java实现小程序客服推送消息 小程序客服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参数说明如下表

属性	类型	默认值	必填	说明
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=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参数如下表

属性	类型	必填	说明
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.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参数说明

属性	类型	必填	说明
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)获取用户信息

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

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

属性	类型	必填	说明
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微信小程序支付介绍

微信支付主要经过:

1. 小程序内调用登录接口
2. 商户server调用支付统一下单
3. 商户server调用再次签名
4. 商户server接收支付通知
5. 商户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微信小程序支付实现步骤

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

4.12分享API