4.1请求服务器数据API

4.1.1小程序/服务器架构

小程序和服务器通信的架构也可以称为C/S架构
请求过程:
1.小程序先向服务器发起网络请求
2.服务器收到请求后执行相关代码处理请求
3.处理完毕后服务器向小程序回复并返回数据
4.小程序相关接口将回调success()函数并对拿到的数据进行处理

注意事项

默认超时时间和最大超时时间都是60秒
所涉及的三种接口API: request、uploadFile、downloadFile最大并发限制是10个
小程序进入后台运行后，如果在5s内网络请求没有结束，会回调错误信息fail interrupted;在回到后台之前，网络请求接口调用都无法调用

4.1.2服务器域名配置

每一个小程序在与指定域名进行网络通信前都必须将该域名添加到管理员
后台自名单中配置方法:
1.登录mp.weixin.qq.com
2.点击左侧“开发”，在“开发设置”下的“服务器域名”中配置域名

注意事项

开发者可将填入自己或第三方的域名地址
域名只支持https(request、uploadFile、downloadFile)和wss(connectSocket)协议
域名不能使用IP地址或localhost
域名必须经过ICP备案
每类接口分别可以配置最多20个域名
域名每个月只可以申请修改5次

如果开发者暂时无法登记有效域名，可以在开发和测试环节暂时跳过域名校验
方法:

点击开发者工具中的“详情”按钮
点击“本地设置”设置选项卡
勾选“不校验合法域名”项

4.1.3临时服务器部署(建议学习)

软件

phpStudy
xampp
wamp
Node.js

访问方式：如: http: / / localhost/或http://127.0.0.1/

4.1.4发起请求

小程序使用wx.request(OBJECT)发起网络请求
wx.request参数说明如下表

属性	类型	默认值	必填	说明
url	string		是	开发者服务器接口地址
data	string/object / ArrayBuffer		否	请求的参数
header	Object		否	设置请求的header，header中不能设置Referer。content-type默认为application / json
method	string	GET	否	HTTP请求方法
dataType	string	json	否	返回的数据格式
responseType	string	text	否	响应的数据类型
success		function		否
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行)

wx.request({ur1:'https: / / www.test.com/ ',data:{x:'123',y: '456'},success:function(res){console.log(res.data)}
})

4.2文件上传与下载

4.2.1 wx.uploadFile文件上传

文件上传功能需要配合开发者服务器使用
小程序使用wx.uploadFile(OBJECT)可以将本地资源上传到开发者服务器
上传时将从客户端发起一个HTTPS POST请求到服务器

OBJECT参数如下表

属性	类型	必填	说明
url	string	是	开发者服务器地址
filePath	string	是	要上传文件资源的路径
name	string	是	文件对应的key，开发者在服务端可以通过这个key 获取文件的二进制内容
header	Object	否	HTTP请求Header，Header中不能设置Referer
formData	Object	否	HTTP请求中其他额外的form data
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行)

<view class='page-body'><view class='demo-box'><view class='title'>文件上传演示</view><image wx:if='{{src}}' src='{{src}}' mode='widthFix'></image><button bindtap="chooseImage">选择文件</button><button type="primary" bindtap="uploadFile">开始上传</button></view>
</view>

Page({data:{src: "//上传图片的路径地址"},chooseImage: function(){var that=thiswx.chooselmage({count: 1,//默认9sizeType:['original', 'compressed'],//可以指定是原图还是压缩图，默认二者都有sourceType: ['album', 'camera'],//可以指定来源是相册还是相机，默认二者都有success: function(res){let src = res.tempFilePaths[0]that.setData({src: src})}})},uploadFile: function(){var that = thislet src = this.data.srcif (src==''){wx.showToast({title: '请先选择文件!',icon:'none'})}else {//发起文件上传请求var uploadTask=wx.uploadFile({url:'http:/localhost/miniDemo/upload.php',//可以替换为并发者自己的服务器地址filePath:src,name: 'file',success: fuinction(res){console.log(res)wx.showToast({title: res.data})}})uploadTask.onProgressUpdate((res)=>{console.log('上传进度',res.progress)console.log('已经上传的数据长度',res.totalBytesSent)console.log('预期需要上传的数据总长度',res.totalBytesExpectedToSend)})}}
})

4.2.2 wx.downloadFile文件下载

文件下载功能使用开发者服务器或第三方服务器均可
小程序使用wx.downloadFile(OBJECT)可以从服务器下载文件资源到本地

OBJECT参数如下表

属性	类型	必填	说明
url	string	是	下载资源的url
header	Object	否	HTTP请求的Header，Header中不能设置Referer
filePath	string	否	指定文件下载后存储的路径
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行)

<view class='page-body'><view class='demo-box'><view class= 'title'>文件下载演示</view><block wx:if='{{isDownload}}'><image mode='widthFix' src='{{src}}'></image><button bindtap="reset">重置</button></block><button wx:else type="primary" bindtap="download">点击此处下载图片</button></view>
</view>

Page({data:{isDownload:false},download: function(){var that = this//开始下载var downloadTask =wx.downloadFile({url:'http://img06.tooopen.com/images/201808217tooopen_s1_135625562533875.jpg',//用户可自行更换success: function (res) {//只要服务器有响应数据，就会把响应内容写入文件并进入success回调，业务需要自行判断是否下载到了想要的内容if (res.statusCode === 200){let src = res.tempFilePath//文件临时路径地址that.setData({src:src,isDownload:true})}}})//任务对象监听下载进度downloadTask.onProgressUpdate((res) => {console.log('下载进度',res.progress)console.log('已经下戟的数据长度',res.totalBytesWritten)console.log('预期需要下载的数据总长度',res.totalBytesExpectedToWrite)})},
//清空下载图片reset: function(){this.setData({src:'',isDownload: false})}
})

4.3 WebSocket会话API

WebSocket会话用来创建一个会话连接，创建完会话连接后可以相互通信，像微信聊天和QQ聊天一样
它共涉及7个API的使用
1.wx.connectSocket(OBJECT)，创建一个会话连接
2.wx.onSocketOpen(CallBack)，监听WebSocket连接打开事件
3.wx.onSocketError(CallBack)，监听WebSocket错误
4.wx.sendSocketMessage(OBJECT)，发送数据
5.wx.onSocketMessage(CallBack)，监听WebSocket接收到服务器的消息事件
6.wx.closeSocket()，关闭WebSocket连接
7.wx.onSocketClose(CallBack)，监听WebSocket关闭

4.3.1 wx.connectSocket参数说明

属性	类型	必填	说明
url	string	是	开发者服务器wss接口地址
header	Object	否	HTTP Header，Header中不能设置Referer
protocols	Array.< string>	否	子协议数组
tcpNoDelay	boolean	否	建立TCP连接的时候的TCP_NODELAY设置(用得不多)
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行)

wx.connectSocket({url: 'wss://example.qq.com',header:{'content-type':'application/json'},protocols:['protocol1'],method:"GET"
})

4.3.2 wx.onSocketOpen

监听WebSocket连接打开事件>
参数: function callback(WebSocket连接打开事件的回调函数)
参数:Object res

属性	类型	说明
header	object	连接成功的HTTP响应Header

4.3.3 wx.onSocketError

监听WebSocket错误
参数: function callback(WebSocket错误事件的回调函数)

4.3.4 wx.sendSocketMessage

通过WebSocket连接发送数据
需要先wx.connectSocket，并在wx.onSocketOpen回调之后才能发送
参数:Object

属性	类型	必填	说明
data	string/ ArrayBuffer	是	需要发送的内容
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行)

4.3.5 Wx.onSocketMessage

监听WebSocket接受到服务器的消息事件
参数： function callback（WebSocket接受到服务器的消息事件的回调函数）
参数：Object res

属性	类型	说明
data	string/ ArrayBuffer	服务器返回的消息

4.3.6 wx.closeSocket

关闭WebSocket连接
参数说明如下表

属性	类型	说明
code	number	一个数字值表示关闭连接的状态号，表示连接被关闭的原因。
reason	string	一个可读的字符串，表示连接被关闭的原因。这个字符串必须是不长于123字节的UTF-8文本（不是字符)。
success	function	接口调用成功的回调函数
fail	function	接口调用失败的回调函数
complete	function	接口调用结束的回调函数（调用成功、失败都会执行)

4.3.7 wx.onSocketClose

监听WebSocket连接关闭事件
参数：function callback(WebSocket连接关闭事件的回调函数)
参数:Object res

属性	类型	说明
header	object	连接成功的HTTP响应Header

4.4图片处理API

4.4.1 wx.chooselmage选择图片

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

属性	类型	必填	说明
count	number	否	最多可以选择的图片张数
sizeType	Array.< string>	否	所选的图片的尺寸
sourceType	Array.< string>	否	选择图片的来源
success	function	接口调用成功的回调函数
fail	function	接口调用失败的回调函数
complete	function	接口调用结束的回调函数（调用成功、失败都会执行)

wx.chooselmage({count: 1,sizeType: ['original', 'compressed'],sourceType: ['album', 'camera'],success (res){// tempFilePath可以作为img标签的src属性显示图片const tempFilePaths = res.tempFilePaths}
})

4.4.2 wx.previewImage预览图片

用来预览多张图片以及设置默认显示的图片
预览的过程中用户可以进行保存图片、发送给朋友等操作

属性	类型	必填	说明
urls	Array.< string>	是	需要预览的图片链接列表。
current	string	否	当前显示图片的链接
success	function	接口调用成功的回调函数
fail	function	接口调用失败的回调函数
complete	function	接口调用结束的回调函数（调用成功、失败都会执行)

Page({onload:function(){wx.previewImage({current:'bye.jpg',//当前显示图片的http链接urls:["bye.jpg", "location.png"] //需要预览的图片http链接列表})}
})

4.4.3 wx.getImageInfo获取图片信息

用来获取图片信息
包括图片的宽度、高度以及返回路径

属性	类型	必填	说明
src	string	是	图片的路径，可以是相对路径、临时文件路径、存储文件路径、网络图片路径
success	function	接口调用成功的回调函数
fail	function	接口调用失败的回调函数
complete	function	接口调用结束的回调函数（调用成功、失败都会执行)

success返回参数说明

属性	类型	说明
width	number	图片原始宽度，单位px。不考虑旋转。
height	number	图片原始高度，单位px。不考虑旋转。
path	string	图片的本地路径
orientation	string	拍照时设备方向
type	string	图片格式

<view class="weui-panel"><view class="weui-panel__bd"><image mode='widthFix' src="{{src}}" style='width:300px';></image><button bindtap="getImageInfo">getImagelnfo</button></view>
</view>
<view wx:if="{{!!info}}" class='result'><text space="nbsp">{{info}}</text>
</view>

Page({data:{src:'微信图标.png',info:'',},getImageInfo(){wx.getImagelnfo({src: this.data.src,complete:(res) => {this.setData({info: this.format(res)})}})},format(obj){return '{\n'+ Object.keys(obj).map(function (key) { return''+ key + ':' +obj[key] + ','}).join('ln') +'\n' +'}'}
})

4.4.4 wx.saveImageToPhotosAlbum保存图片到相册

将图片保存到系统相册里
此操作需要用户授权

属性	类型	必填	说明
filePath	string	是	图片文件路径，可以是临时文件路径或永久文件路径，不支持网络图片路径
success	function	接口调用成功的回调函数
fail	function	接口调用失败的回调函数
complete	function	接口调用结束的回调函数（调用成功、失败都会执行)

Page({onload:function(){wx.saveImageToPhotosAlbum({success (res){}})}
})

4.5文件操作API

4.5.1 wx.saveFile保存文件到本地

4.5.2 wx.getSavedFileList获取本地文件列表

4.5.3 wx.getSavedFileInfo获取本地文件信息

4.5.4 wx.removeSavedFile删除本地文件

4.5.5 wx.openDocument打开文档

4.5.6 wx.getFileInfo获取文件信息

4.6数据缓存API

4.7位置信息API

4.7.1获取位置、选择位置、打开位置

1. wx.getLocation(OBJECT)

获取当前位置，包括当前位置的地理坐标、速度
用户离开小程序后，此接口无法调用

属性	类型	必填	说明
type	string	否	wgs84返回gps坐标，gcj02返回可用于wx.openLocation 的坐标
altitude	string	否	传入true会返回高度信息，由于获取高度需要较高精确度，会减慢接口返回速度
success	function	接口调用成功的回调函数，参数：京都、纬度、速度、位置的精确度
fail	function	接口调用失败的回调函数
complete	function	接口调用结束的回调函数（调用成功、失败都会执行)

Page({onLoad:function(){wx.getLocation({type: 'wgs84',success:function(res){var latitude=res.latitude;console.log("纬度="+latitude);var longitude=res.longitude;console.log("经度="+latitude);var speed=res.speed;console.log(“速度”+speed);var accuracy=res.accuracy;console.log(“精确度"+accuracy);}})}
})

2. wx.chooseLocation(OBJECT)

使用wx.chooseLocation打开地图来选择位置

属性	类型	必填
success	function	接口调用成功的回调函数，参数：京都、纬度、速度、位置的精确度
fail	function	接口调用失败的回调函数
complete	function	接口调用结束的回调函数（调用成功、失败都会执行)

3. wx.openLocation(OBJECT)

使用该接口可以使用微信内置地图查看位置

属性	类型	必填	说明
latitude	number	是	纬度，范围为-90~90，负数表示南纬。使用gcj02国测局坐标系
longitude	number	是	经度，范围为-180~180，负数表示西经。使用gcj02国测局坐标系
scale	number	否	缩放比例，范围5~18
name	string	否	位置名
address	string	否	地址的详细说明
success	function	接口调用成功的回调函数
fail	function	接口调用失败的回调函数
complete	function	接口调用结束的回调函数（调用成功、失败都会执行)

Page({onLoad:function(){iwx.getLocation({type:"gcj02",success:function(res){var latitude=res.latitudevar longitude=res.longitudewx.openLocation({latitude: latitude,longitude:longitude,scale: 28})}})}
})

4.7.2地图组件控制

4. wx.createMapContext(mapID)

地图组件控制是用来创建并返回map上下文mapContext对象的
它有两种方法:

getCenterLocation
■获取当前地图中心的经纬度，可以用于wx.openLocation
moveToLocation
■将地图中心移动到当前定位点，需要配合map组件的show-location使用

getCenterLocation参数说明

属性	类型	必填
success	function	接口调用成功的回调函数
fail	function	接口调用失败的回调函数
complete	function	接口调用结束的回调函数（调用成功、失败都会执行)

Page({onLoad:function(e){ this.mapCtx=wx.createMapContext('myMap')},getCenterLocation:function(){this.mapCtx.getCenterLocation({success:function(res){console.log(res.longitude)console.log(res.latitude)}})},moveToLocation:function(){this.mapCtx.moveToLocation()}
})

<map id= “myMap” show-location />
<button type="primary" bindtap="getCenterLocation">获取位置</button>
<button type="primary" bindtap="moveToLocation">移动位置</button>

4.8设备应用API

4.8.1获得系统信息

4.8.2获取网络状态

4.8.3加速度计

4.8.4罗盘

4.8.5拨打电话

4.8.6扫码

4.8.7剪贴板

4.8.8蓝牙

4.8.9屏幕亮度

4.8.10用户截屏事件

4.8.11振动

4.8.12手机联系人

4.9交互反馈API

wx.showToast(OBJECT)——显示消息提示框
wx.hideToast(OBJECT)——隐藏消息提示框
wx.showModal(OBJECT)——显示模态弹窗
wx.showActionSheet(OBJECT)——显示操作菜单

4.9.1消息提示框

消息提示框是一种经常用来提交成功或者加载中的友好提示方式
消息提示框可以设置提示框的内容、类型、时间以及相应的事件
若想显示消息提示框，可使用wx.showToast(OBJECT)的API

wx.showToast参数说明

属性	类型	必填	说明
title	string	是	提示的内容
icon	string	否	图标
image	string	否	自定义图标的本地路径，image的优先级高于icon
duration	number	否	提示的延迟时间
mask	boolean	否	是否显示透明蒙层，防止触摸穿透
success	function	接口调用成功的回调函数
fail	function	接口调用失败的回调函数
complete	function	接口调用结束的回调函数（调用成功、失败都会执行)

Page({onLoad:function(){wx.showToast({title:'成功',icon: 'success',duration:2000})}
})

4.9.2模态弹窗

模态弹窗用来对整个界面进行覆盖，防止用户操作界面中的其他内容
可以设置提示的标题、内容、取消按钮和样式、确定按钮和样式及一些绑定事件
使用wx.showModal(OBJECT)显示模态弹窗

wx.ShowModal参数说明

属性	类型	必填	说明
title	string	否	提示的标题
content	string	否	提示的内容
showCancel	boolean	否	是否显示取消按钮
cancelText	string	否	取消按钮的文字，最多4个字符
cancelColor	string	否	取消按钮的文字颜色，必须是16进制格式的颜色字符串
confirmText	string	否	确认按钮的文字，最多4个字符
confirmColor	string	否	确认按钮的文字颜色，必须是16进制格式的颜色字符串
success	function	接口调用成功的回调函数
fail	function	接口调用失败的回调函数
complete	function	接口调用结束的回调函数（调用成功、失败都会执行)

Page({onLoad:function(){wx.showModal({title:'提示',content:'这是一个模态弹窗',success:fuunction(res){if(res.confirm){console.log('用户点击确定')}}})}
})

4.9.3操作菜单

微信小程序中可以借助wx.showActionSheet(OBJECT)实现从底部弹出操作菜单的功能
其参数说明如下表:

属性	类型	必填	说明
itemList	Array.< string>	是	按钮的文字数组，数组长度最大为6
itemColor	string	否	按钮的文字颜色，默认为"#000000"
success	function	接口调用成功的回调函数
fail	function	接口调用失败的回调函数
complete	function	接口调用结束的回调函数（调用成功、失败都会执行)

4.10登录API

wx.login(OBJECT)获取登录凭证code
用户登录凭证code发往开发者服务器换取唯一标识(opened)和会话密码(session_key)
开发者服务器获取唯一标识(opened)和会话密钥(session_key)
开发者服务器生成自己的sessionId小程序客户端保存sessionId
wx.checkSession(OBJECT)检查登录状态是否过期
wx.getUserInfo(OBJECT)获取用户信息

可以简单理解为以下几个步骤:

小程序里使用wx.login方法获取登录凭证code值
拿到code值后再加上AppID、secret、grant_type授权类型这3个参数发送到自己后台开发服务器，在后台服务器上去请求https:/ /api.weixin.qq.com/sns/jscode2session这个路径，同时上传这3个参数，来获取唯一标识(openId)和会话密钥(session_key)
拿到唯一标识(openId)和会话密钥(session_key)后在自己后台开发服务器上生成自己的sessionld
微信小程序可以将服务器生成的sessionId信息保存到本地缓存信息Storage里
后续用户进入微信小程序，先从Storage获得sessionld，将这个sessionld传输到服务器上进行查询来维护登录状态

4.10.1 wx.login(OBJECT)获取登录凭证code

小程序使用wx.login接口来获取登录凭证(code)，进而获取用户登录状态信息，包括用户的唯一标识(openId)和本次登录的会话密钥(session_key)
用户数据的加解密通信需要依赖session_key完成
wx.login参数说明如下表:

属性	类型	必填	说明
timeout	number	否	超时时间，单位ms
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行)

wx.login({success (res) {if (res.code) {//发起网络请求wx.request({url: 'https://example.com/onLogin',data: {code: res.code}})} else {console.log('登录失败！' + res.errMsg)}}
})

4.11微信支付API

4.11.1微信小程序支付介绍

微信支付主要经过:

小程序内调用登录接口
商户server调用支付统一下单
商户server调用再次签名
商户server接收支付通知
商户server查询支付结果

微信支付接口
Wx.requestPayment(OBJECT)
Object object

属性	类型	默认值	必填	说明
timeStamp	string		是	时间戳，从 1970 年 1 月 1 日 00:00:00 至今的秒数，即当前的时间
nonceStr	string		是	随机字符串，长度为32个字符以下
package	string		是	统一下单接口返回的 prepay_id 参数值，提交格式如：prepay_id=***
signType	string	MD5	否	签名算法，应与后台下单时的值一致
paySign	string		是	签名，具体见微信支付文档
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

4.11.2微信小程序支付实现步骤

微信小程序调用wx.login方法，获取用户登录凭证code
微信小程序将用户登录凭证code传输给自己的开发者后台服务器
开发者后台服务器根据用户登录凭证code向微信服务器请求获取唯一标识(openid)
开发者后台服务器获取到唯一标识(opened)后，开发者后台服务器调用统一下单支付接口，来获取预支付交易会话标识(prepay_id)
开发者后台服务器调用签名，并返回支付需要使用的参数
微信小程序调用wx.requestPayment方法发起微信支付
开发者后台服务器接收微信服务器的通知并处理微信服务器返回的结果

4.12分享API

四、小程序必备API相关推荐

【小程序开发必备】微信小程序常用API全介绍，附示例代码和使用场景
文章目录 1.网络请求相关API 1.1 wx.request 1.2 wx.uploadFile 1.3 wx.downloadFile 1.4 wx.connectSocket 2.页面跳转相关A ...
【微信小程序控制硬件第12篇-项目篇】微信小程序蓝牙控制硬件应如何开始动手？为您全面解析微信小程序蓝牙API的使用；（附带demo）
[微信小程序控制硬件第1篇 ] 全网首发,借助 emq 消息服务器带你如何搭建微信小程序的mqtt服务器,轻松控制智能硬件! [微信小程序控制硬件第2篇 ] 开始微信小程序之旅,导入小程序Mqtt客户 ...
【微信小程序入门到精通】— 小程序的 API 到底是个啥
目录前言一.API 导论二.事件监听 API 三.同步 API 四.异步 API 总结前言对于目前形式,微信小程序是一个热门,那么我们该如何去学习并且掌握之后去做实际项目呢? 为此我特意开设 ...
api 定位微信小程序精度_小程序的api是什么
微信小程序API(Application Programming Interface),应用程序编程接口,也是程序员口中常说的接口.其实api并不专属于小程序,任何编程语言或程序形态都有相对应的api ...
小程序支付api密钥_如何避免在公共前端应用程序中公开您的API密钥
小程序支付api密钥问题 (The Problem) All you want to do is fetch some JSON from an API endpoint for the weath ...
mybaitplus 根据id批量进行修改_phpcms小程序插件api接口升级到4.3（新增批量获取、搜索等接口）...
phpcms小程序插件api接口升级到4.3 (1)全部接口进行代码精简优化,减少不必要的重复代码.冗余代码以及注释 (2)修复诸多bug,合并post和get接收方式并统一调度 (3)修改appse ...
从0到一开发微信小程序（6）—小程序常用API
文章目录其他相关文章 1.小程序API 1.1.路由 1.1.1.navigateTo(保留当前页面,跳转到应用内的某个页面,可以带参数) 1.1.2.redirectTo(关闭当前页面,跳转到应用 ...
微信小程序-常用api
文章目录微信小程序-常用api 路由 wx.switchTab(Object object) wx.navigateTo(Object object) wx.navigateBack(Object ...
解决小程序api为http和豆瓣限制小程序使用api问题
关于豆瓣api的调用,前几天使用的时候发现了很多问题,就是官方限制了小程序使用api,尽管豆瓣官方提供的接口就是https的但是小程序就是无法获取豆瓣的数据,然后我就找了很多种方法,发现了几点: 1. ...

四、小程序必备API