手把手教你开发微信小程序之客服消息
1、客服消息功能概述在页面中使用 contact-button/ 可以显示进入客服会话按钮。当用户在客服会话发送消息(或进行某些特定的用户操作引发的事件推送时),微信服务器会将消息(或事件 …
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、客服消息功能具体实现
-
消息推送配置
-
填写服务器配置
登录https://mp.weixin.qq.com
(此图片来源于网络,如有侵权,请联系删除! )
点击设置
(此图片来源于网络,如有侵权,请联系删除! )
消息推送配置
(此图片来源于网络,如有侵权,请联系删除! )
消息推送配置
-
验证消息的确来自微信服务器
开发者提交信息后,微信服务器将发送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
客服会话按钮,用于在页面上显示一个客服会话按钮,用户点击该按钮后会进入客服会话。
(此图片来源于网络,如有侵权,请联系删除! )
屏幕快照 2017-03-27 下午4.45.51.png
<!--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中类型:图标部分无法改变
(此图片来源于网络,如有侵权,请联系删除! )
default-light
(此图片来源于网络,如有侵权,请联系删除! )
default-dark
-
服务器接收消息事件
-
进入会话事件
用户在小程序“客服会话按钮”进入客服会话时将产生如下数据包:
{
“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数据包来发送消息给普通用户。此接口主要用于客服等有人工消息处理环节的功能,方便开发者为用户提供更加优质的服务。
目前允许的动作列表如下,不同动作触发后,允许的客服接口下发消息条数和下发时限不同。下发条数达到上限后,会收到错误返回码,具体请见返回码说明页:
(此图片来源于网络,如有侵权,请联系删除! )
屏幕快照 2017-03-27 下午5.42.15.png
-
客服接口-发消息
-
接口调用请求说明:
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);
}
});
}
免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。
本站为避免不必要的纷争,分享的所有资源中一切可能有版权风险的资源将全部转载自第三方网站或平台,站长只为大家提供相关资源的介绍和跳转引导。 因可能有疏忽大意,所以如有遗漏资源侵犯了您的合法权利,请联系站长删除。
【小程序源码网资源下载使用说明】:
本站所分享的一切QQ小程序源码,thinkphp整站源码,微信小程序源码,图文教程等资源仅供用户学习参考使用,任何人不得作其他用途,违者自行承担所有责任。
【小程序源码网毫无人看的介绍】:
本站又称Z站,原名贼娘网,开站于2018年,换过三任站长,目前站长是第四任站长,本站是一个主要分享免费开源小程序源码/网站源码/免费素材/教程资源的网站,主要小程序资源有用于学习的小程序源码,也有正版原创可商用的小程序源码,是一个公益博客型网站。
【小程序源码网原创源码版权申明】:
未经小程序源码网许可,任何人不得擅自使用本站原创首发源码进行商业行为(除本站VIP用户在期限内,版权无使用限制),否则将依法承担相应赔偿责任。
【小程序源码网转载文章版权申明】:
本站所转载的QQ小程序或微信小程序源码与其他资源仅供学习,任何人不得作其他用途,违者自行承担所有责任。
【小程序源码网站长最后的屁话】:
如有您认为本站有任何侵犯您合法权益的文章,或者您有什么疑问需求,欢迎联系站长QQ,站长24小时在线,备注公司名称和源码版权问题或者需要小程序定制开发等站长业务类型可急速处理,如果您只是交流小程序的一些开发问题或源码问题可以加入QQ群讨论,就不用加站长啦,对于白嫖党,QQ群才是处理问题的天堂,当然站长也欢迎大家骚扰~
小程序源码网 » 手把手教你开发微信小程序之客服消息