手把手教你开发微信小程序之客服消息

2017-03-27 本文已影响22386人码农随想录

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);
        }
    });
}

4、最后

如何大家看了文章还有不懂或者其他问题，欢迎私信我或者评论

手把手教你开发微信小程序之客服消息

1、客服消息功能概述

2、网页版客服工具

3、客服消息功能具体实现

消息推送配置

填写服务器配置

验证消息的确来自微信服务器

小程序界面实现

contact-button

contact-button只有2中类型：图标部分无法改变

服务器接收消息事件

进入会话事件

文本消息

图片消息

网页版客服工具进入会话事件

获取 access_token

接收事件并回复消息

功能概述

客服接口-发消息

代码实现

4、最后

猜你喜欢

热点阅读