【小程序开发】第3章：小程序实战——微信小程序网络api的使用

微信小程序网络api的使用
微信小程序图片api的使用
微信小程序相机api的使用
 

1、微信小程序API
微信小程序提供的API的方式，通过API的方式可以调用微信提供的强大的功能，以增强小程序的功能，如：网络请
求、拍照、扫码等。

1.1、网络相关API
1.1.1、request
通过request对象进行网络通信操作。
说明：
每个微信小程序需要事先设置一个通讯域名，小程序只可以跟指定的域名与进行网络通信。包括普通 HTTPS
请求（wx.request）、上传文件（wx.uploadFile）、下载文件（wx.downloadFile) 和 WebSocket 通信
（vconnectSocket）
用法：RequestTask wx.request(Object object)
1.1.1.1、参数 Object object

data 参数说明
最终发送给服务器的数据是 String 类型，如果传入的 data 不是 String 类型，会被转换成 String 。转换规则如
下：
对于 GET 方法的数据，会将数据转换成 query
string（ encodeURIComponent(k)=encodeURIComponent(v)&encodeURIComponent(k)=encodeURICompo nent(v)… ）
对于 POST 方法且 header[‘content-type’] 为 application/json 的数据，会对数据进行 JSON 序列
化
对于 POST 方法且 header[‘content-type’] 为 application/x-www-form-urlencoded 的数据，会将数
据转换成 query string
（encodeURIComponent(k)=encodeURIComponent(v)&encodeURIComponent(k)=encodeURIComponent(v )…）

1.1.1.2、object.method 的合法值

访问接口服务，获取数据。

需要开启对域名的不校验：

1.1.2、WebSocket
小程序对WebSocket做了支持，文档地址：https://developers.weixin.qq.com/miniprogram/dev/api/wx.connec
tSocket.html
示例



效果：

1.1.3、GraphQL
小程序官网并没有支持GraphQL，需要通过第三方包实现，所以需要通过npm进行管理。首先来看下在小程序中
如何使用npm。
第三方的GraphQL插件：https://github.com/Authing/wxapp-graphql
1.1.3.1、小程序中使用npm
从小程序基础库版本 2.2.1 或以上、及开发者工具 1.02.1808300 或以上开始，小程序支持使用 npm 安装第三方
包。

npm init 
npm install wxapp-graphql -S --production 12

PS：此处请务必使用 --production 选项，可以减少安装一些业务无关的 npm 包，从而减少整个小程序包的
大小。
1.1.3.2、示例

测试发现，会报错：

解决方案：将源码拷贝到utils下，将header:obj.header(),这行代码注释掉，然后引用即可。

1.2、图片相关API
1.2.1、选择图片
wx.chooseImage(Object object)
从本地相册选择图片或使用相机拍照。参数

object.sizeType 的合法值

res.tempFiles 的结构

示例：

1.2.2、预览图片
wx.previewImage(Object object)
在新页面中全屏预览图片。预览的过程中用户可以进行保存图片、发送给朋友等操作。 参数 Object object

示例：

1.3、相机相关API
文 档 ：https://developers.weixin.qq.com/miniprogram/dev/api/wx.createCameraContext.html 示例：
index.wxml：

全局样式：

1.4、扫描二维码
文 档 ：https://developers.weixin.qq.com/miniprogram/dev/api/wx.scanCode.html
示例：


效果：

测试结果：

1.5、动画
小程序中支持了动画的api，文档：https://developers.weixin.qq.com/miniprogram/dev/api/Animation.html