1、客服消息功能概述
在页面中使用 <contact-button/> 可以显示进入客服会话按钮。
当用户在客服会话发送消息（或进行某些特定的用户操作引发的事件推送时），微信服务器会将消息（或事件）的数据包（JSON或者XML格式）POST请求开发者填写的URL。开发者收到请求后可以使用发送客服消息接口进行异步回复。
微信服务器在将用户的消息发给小程序的开发者服务器地址（开发设置处配置）后，微信服务器在五秒内收不到响应会断掉连接，并且重新发起请求，总共重试三次，如果在调试中，发现用户无法收到响应的消息，可以检查是否消息处理超时。关于重试的消息排重，有msgid的消息推荐使用msgid排重。事件类型消息推荐使用FromUserName + CreateTime 排重。
-
服务器收到请求必须做出下述回复，这样微信服务器才不会对此作任何处理，并且不会发起重试，否则，将出现严重的错误提示。详见下面说明：
1、直接回复success（推荐方式） 2、直接回复空串（指字节长度为0的空字符串，而不是结构体中content字段的内容为空） -
一旦遇到以下情况，微信都会在小程序会话中，向用户下发系统提示“该小程序客服暂时无法提供服务，请稍后再试”：
1、开发者在5秒内未回复任何内容 2、开发者回复了异常数据 -
小程序客服消息界面效果展示
小程序客服消息列表展示
2、网页版客服工具
具体可参考https://mp.weixin.qq.com/debug/wxadoc/introduction/custom.html#网页版客服工具
3、客服消息功能具体实现
-
消息推送配置
-
填写服务器配置
-
验证消息的确来自微信服务器
开发者提交信息后，微信服务器将发送GET请求到填写的服务器地址URL上，GET请求携带参数如下表所示：
/**
* 检验signature对请求进行校验
*/
function checkSignature(params){
//token 就是自己填写的令牌
var key=[token, params.timestamp, params.nonce].sort().join('');
//将token （自己设置的） 、timestamp（时间戳）、nonce（随机数）三个参数进行字典排序
var sha1 = crypto.createHash('sha1');
//将上面三个字符串拼接成一个字符串再进行sha1加密
sha1.update(key);
return sha1.digest('hex') === params.signature;
//将加密后的字符串与signature进行对比，若成功，返回echostr
}
-
小程序界面实现
-
contact-button
客服会话按钮，用于在页面上显示一个客服会话按钮，用户点击该按钮后会进入客服会话。
<!--index.wxml-->
<view class="container">
<view bindtap="bindViewTap" class="userinfo">
<image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</view>
<view class="user motto">
<contact-button type="default-light" size="30" session-from="weapp" class="guest-button">
</contact-button>
</view>
</view>
-
contact-button只有2中类型：图标部分无法改变
-
服务器接收消息事件
-
进入会话事件
用户在小程序“客服会话按钮”进入客服会话时将产生如下数据包：
{
"ToUserName": "toUser",
"FromUserName": "fromUser",
"CreateTime": 1482048670,
"MsgType": "event",
"Event": "user_enter_tempsession",
"SessionFrom": "sessionFrom"
}
-
文本消息
用户在客服会话中发送文本消息时将产生如下数据包:
{
"ToUserName": "toUser",
"FromUserName": "fromUser",
"CreateTime": 1482048670,
"MsgType": "text",
"Content": "this is a test",
"MsgId": 1234567890123456
}
-
图片消息
用户在客服会话中发送图片消息时将产生如下数据包：
{
"ToUserName": "toUser",
"FromUserName": "fromUser",
"CreateTime": 1482048670,
"MsgType": "image",
"PicUrl": "this is a url",
"MediaId": "media_id",
"MsgId": 1234567890123456
}
-
网页版客服工具进入会话事件
用户在小程序“客服会话按钮”进入客服会话时将产生如下数据包：
{
"ToUserName": "toUser",
"FromUserName": "fromUser",
"CreateTime": 1482048670,
"MsgType": "event",
"Event": "kf_create_session",
"KfAccount": "kf2001@gh_93228be5b792"
}
-
获取 access_token
请参考手把手教你开发微信小程序之模版消息中获取 access_token
-
接收事件并回复消息
-
功能概述
当用户和小程序客服产生特定动作的交互时（具体动作列表请见下方说明），微信将会把消息数据推送给开发者，开发者可以在一段时间内（目前修改为48小时）调用客服接口，通过POST一个JSON数据包来发送消息给普通用户。此接口主要用于客服等有人工消息处理环节的功能，方便开发者为用户提供更加优质的服务。
目前允许的动作列表如下，不同动作触发后，允许的客服接口下发消息条数和下发时限不同。下发条数达到上限后，会收到错误返回码，具体请见返回码说明页：
-
客服接口-发消息
-
接口调用请求说明：
http请求方式: POST https://api.weixin.qq.com/cgi-bin/message/custom/send?access_token=ACCESS_TOKEN 各消息类型所需的JSON数据包如下：
发送文本消息
{
"touser":"OPENID",
"msgtype":"text",
"text":
{
"content":"Hello World"
}
}
发送图片消息
{
"touser":"OPENID",
"msgtype":"image",
"image":
{
"media_id":"MEDIA_ID"
}
}
参数说明
返回码说明
-
代码实现
<!-- ih_request.js -->
const request = require('request');
var ih_request = {};
module.exports = ih_request;
ih_request.get = async function(option){
var res = await req({
url: option.url,
method: 'get'
});
res.result?option.success(res.msg):option.error(res.msg);
}
<!-- wx_sendMessage.js -->
var router = require('koa-router')();
const request = require('../script/ih_request');
router.post('/', async function (ctx, next) {
//这个access_token需要自己维护
var access_token = 'gOyUImFWLoCWKZfssu9ompMQ7a4UR2npNx4ziHHMMzxjuQzD_XdCQu1UJwcxBQCbUl6owBdRqXk-QjagYzyA5Fb8bgCKuCkO63nKSPwy2ESSYwLoo1bInlg4UMOi2ToGLENaABAATC';
var body = 'success';
console.log(ctx.request.body);
if (ctx.request.body.isCheck){
var checkResult = checkSignature({
'signature' : ctx.request.body.signature,
'timestamp' : ctx.request.body.timestamp,
'nonce' : ctx.request.body.nonce
});
body = checkResult?ctx.request.body.echostr :'err signature';
}else {
var data = JSON.parse(ctx.request.body.data);
switch (data.MsgType){
case 'text': {//用户在客服会话中发送文本消息
await sendTextMessage("我知道了", data, access_token);
break;
}
case 'image': { //用户在客服会话中发送图片消息
await sendImageMessage(data.MediaId, data, access_token);
break;
}
case 'event': {
console.log('event');
var content = '';
if (data.Event == 'user_enter_tempsession'){ //用户在小程序“客服会话按钮”进入客服会话,在聊天框进入不会有此事件
await sendTextMessage("您有什么问题吗?", data, access_token);
}else if (data.Event == 'kf_create_session'){ //网页客服进入回话
console.log('网页客服进入回话');
}
break;
}
}
}
console.log('end');
ctx.body = body;
});
async function sendTextMessage(content, data, access_token){
await request.postJson({
url: 'https://api.weixin.qq.com/cgi-bin/message/custom/send?access_token='+access_token,
body: {
touser:data.FromUserName,
msgtype:"text",
text:
{
content:content
}
},
success: function(res){
console.log(res);
},
error: function(err){
console.log(err);
}
});
}
async function sendImageMessage(media_id, data, access_token){
await request.postJson({
url: 'https://api.weixin.qq.com/cgi-bin/message/custom/send?access_token='+access_token,
body: {
touser:data.FromUserName,
msgtype:"image",
image:
{
media_id:media_id
}
},
success: function(res){
console.log(res);
},
error: function(err){
console.log(err);
}
});
}
4、最后
如何大家看了文章还有不懂或者其他问题，欢迎私信我或者评论
