uni-app入门教程之接口的基本使用

推荐（免费）：uni-app开发教程

文章目录

• 前言
• 一、网络请求
• 二、图片处理
• • 1.uni.chooseImage(OBJECT)
  • 2.uni.previewImage(OBJECT)
  • 3.uni.getImageInfo(OBJECT)
  • 4.uni.saveImageToPhotosAlbum(OBJECT)
• 三、文件上传和下载
• • 1.uni.uploadFile(OBJECT)
  • 2.uni.downloadFile(OBJECT)
• 四、数据缓存
• • 1.uni.setStorage(OBJECT)
  • 2.uni.setStorageSync(KEY,DATA)
  • 3.uni.getStorage(OBJECT)
  • 4.uni.getStorageSync(KEY)
  • 5.uni.removeStorage(OBJECT)
  • 6.uni.removeStorageSync(KEY)
• 总结

前言

本文主要介绍uni-app提供的一些基础接口，包括：网络请求接口，用于通过指定的请求方法，携带特定的数据，向特定的地址请求并返回请求结果；图片处理接口，包括选择、预览、获取信息、保存到本地等接口；文件处理接口，包括文件上传和下载接口；数据缓存接口，包括以同步或异步的方式保存、获取或删除数据的接口。

一、网络请求

小程序要想正常运转，都需要与服务器端进行数据交互，一般都通过接口实现。
数据交互一般都会通过网络请求接口实现。

uni.request(OBJECT)是用于发起网络请求的接口。

OBJECT常见参数如下：

使用GET方法进行普通请求，index.vue如下：

显示：

可以看到，请求后返回了data数据。

说明：
在各个小程序平台运行时，网络相关的API在使用前需要配置域名白名单，因此在使用小程序进行测试时，需要在微信开发者中心设置域名，或者在项目的本地配置中不校验合法域名，如下：

再请求json数据和使用POST方法请求，如下：

显示：

可以看到，也返回了数据。

二、图片处理

1.uni.chooseImage(OBJECT)

从本地相册选择图片或使用相机拍照。

OBJECT常见参数如下：

index.vue如下：

显示：

可以看到，上传成功后，结果返回了临时图片的路径链接。

2.uni.previewImage(OBJECT)

预览图片。

OBJECT常见参数如下：

index.vue如下：

显示：

可以看到，在调用uni.chooseImage上传图片后，成功时的回调函数中再调用uni.previewImage，即可实现预览。

被预览的图片链接，除了可以是uni.chooseImage上传生成的内部临时图片，还可以是自定义的外部图片，如下：

显示：

可以看到，外部图片也可以正常显示。

3.uni.getImageInfo(OBJECT)

获取图片信息。

OBJECT常见参数和含义如下：

index.vue如下：

显示：

可以看到，获取到了图片的大小、类型和方向等信息。

4.uni.saveImageToPhotosAlbum(OBJECT)

保存图片到系统相册。

OBJECT常见参数如下：

index.vue如下：

显示：

可以看到，可以实现将图片保存到本地，并且图片信息一致。

三、文件上传和下载

1.uni.uploadFile(OBJECT)

将本地资源上传到开发者服务器，客户端发起一个 POST 请求，其中 content-type 为 multipart/form-data。

仿优购鞋子商城整站 for ECSHOP

ECSHOP仿优购鞋子商城整站源码，程序基于ECSHOP 2.7.3 UFT8版本制作，适合服装，鞋子，家居等商城使用。目前程序未添加广告位，请自行在网站后台进行添加。具体添加方法，请查看SHOPEX5站点的相关教程。 安装方法：1。访问 ：域名/install2. 按照程序提示进行安装.3.安装完成后,登陆网站后台.选择数据库管理--数据库备份--数据库还原.，导入之前的数据库。4.后台-模板管

下载

OBJECT常见参数如下：

index.vue如下：

显示：

可以看到，在上传图片文件之后，获取到了实时的上传进度、并在进度条中同步显示。

除了使用uni.uploadFile(OBJECT)，还可以使用更好的APIuniCloud.uploadFile，uniCloud提供了免费CDN和更好的易用性，包括安全的cdn直传。

2.uni.downloadFile(OBJECT)

下载文件资源到本地，客户端直接发起一个 HTTP GET 请求，返回文件的本地临时路径。

OBJECT常见参数如下：

index.vue如下：

显示：

可以下载图片到本地并保存。

四、数据缓存

在APP或者小程序中，可以利用本地存储来保存一些数据，比如用户登录数据，在使用用户名密码或者第三方登录方式进行登录后，会将用户信息保存到服务器端，会将用户id和用户随机码（与用户匹配）以键值对的形式到本地，每次与远程进行交互时，都会将保存下来的用户数据发送到远程进行校验。

1.uni.setStorage(OBJECT)

将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口，可以在存储的同时进行其他操作。

OBJECT参数及其意义如下：

2.uni.setStorageSync(KEY,DATA)

将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口，需要在数据存储完成之后才能进行其他操作。

参数及其意义如下：

在使用uni.setStorageSync(KEY,DATA)存储数据时，需要使用try...catch...语句块捕捉异常。

setStorage和setStorageSync的简单使用如下：

显示：

可以看到，两种方式都将数据保存下来。

3.uni.getStorage(OBJECT)

从本地缓存中异步获取指定 key 对应的内容。

OBJECT 参数及其含义如下：

4.uni.getStorageSync(KEY)

从本地缓存中同步获取指定 key 对应的内容。

参数及其含义如下：

getStorageSync也需要使用try...catch...语句块捕捉异常。

getStorage和getStorageSync的简单使用如下：

显示：

可以获取到之前保存下来的数据。

5.uni.removeStorage(OBJECT)

从本地缓存中异步移除指定 key。

OBJECT 参数及其含义如下：

6.uni.removeStorageSync(KEY)

从本地缓存中同步移除指定 key。

参数说明：

removeStorage和removeStorageSync的简单使用如下：

显示：

此时可以删除指定的数据。

uni.getStorageInfo(OBJECT)和uni.getStorageInfoSync()用于异步和同步获取当前 storage 的相关信息，uni.clearStorage()和uni.clearStorageSync()用于异步和同步清理本地数据缓存，它们的用法与前3组接口类似。

总结

uni-app提供的的js接口包括标准ECMAScript的js API 和 uni 扩展 API 两部分，每个接口都能实现特定的功能，可以根据具体需要选择使用，来进一步加快开发效率。