美文网首页微信小程序
手把手教你开发微信小程序之客服消息

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

作者: 码农随想录 | 来源:发表于2017-03-27 17:53 被阅读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、最后

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

相关文章

网友评论

    本文标题：手把手教你开发微信小程序之客服消息

    本文链接：https://www.haomeiwen.com/subject/xwdrottx.html

    延伸阅读

    深度阅读

    • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

    栏目导航

    热点阅读

    微信小程序

    关于我们|服务条款|联系我们|手把手教你开发微信小程序之客服消息|投稿指南|网站地图|RSS订阅|排版工具|手机版

    提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

    Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

    备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

    本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

    所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！