[网络协议]四、小程序必备API

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参数说明如下表

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参数如下表

<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=this
		wx.chooselmage({
			count: 1,//默认9
			sizeType:['original', 'compressed'],//可以指定是原图还是压缩图，默认二者都有
			sourceType: ['album', 'camera'],//可以指定来源是相册还是相机，默认二者都有
			success: function(res){
				let src = res.tempFilePaths[0]
				that.setData({
					src: src
				})
			}
		})
	},
	uploadFile: function(){
		var that = this
		let src = this.data.src
		if (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参数如下表

<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参数说明

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

4.3.3 wx.onSocketError

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

4.3.4 wx.sendSocketMessage

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

4.3.5 Wx.onSocketMessage

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

4.3.6 wx.closeSocket

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

4.3.7 wx.onSocketClose

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

4.4图片处理API

4.4.1 wx.chooselmage选择图片

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

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

4.4.2 wx.previewImage预览图片

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

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

4.4.3 wx.getImageInfo获取图片信息

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

success返回参数说明

<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保存图片到相册

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

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)

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

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打开地图来选择位置

3. wx.openLocation(OBJECT)

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

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

4.7.2地图组件控制

4. wx.createMapContext(mapID)

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

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

getCenterLocation参数说明

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参数说明

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

4.9.2模态弹窗

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

wx.ShowModal参数说明

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

4.9.3操作菜单

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

4.10登录API

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

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

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

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

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

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微信小程序支付介绍

微信支付主要经过:

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

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

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

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

4.12分享API