欢迎光临,了解微信小程序开发,就上易用通!

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

发布:2017-12-07 09:07浏览: 来源:网络 作者:tianshu

1、客服消息功能概述在页面中使用 contact-button/ 可以显示进入客服会话按钮。当用户在客服会话发送消息(或进行某些特定的用户操作引发的事件推送时),微信服务器会将消息(或事件 ...

 
 
 

1、客服消息功能概述


  • 在页面中使用 <contact-button/> 可以显示进入客服会话按钮。

  • 当用户在客服会话发送消息(或进行某些特定的用户操作引发的事件推送时),微信服务器会将消息(或事件)的数据包(JSON或者XML格式)POST请求开发者填写的URL。开发者收到请求后可以使用发送客服消息接口进行异步回复。

  • 微信服务器在将用户的消息发给小程序的开发者服务器地址(开发设置处配置)后,微信服务器在五秒内收不到响应会断掉连接,并且重新发起请求,总共重试三次,如果在调试中,发现用户无法收到响应的消息,可以检查是否消息处理超时。关于重试的消息排重,有msgid的消息推荐使用msgid排重。事件类型消息推荐使用FromUserName + CreateTime 排重。

  • 服务器收到请求必须做出下述回复,这样微信服务器才不会对此作任何处理,并且不会发起重试,否则,将出现严重的错误提示。详见下面说明:

    1、直接回复success(推荐方式)
    2、直接回复空串(指字节长度为0的空字符串,而不是结构体中content字段的内容为空)
  • 一旦遇到以下情况,微信都会在小程序会话中,向用户下发系统提示“该小程序客服暂时无法提供服务,请稍后再试”:

    1、开发者在5秒内未回复任何内容
    2、开发者回复了异常数据
  • 小程序客服消息界面效果展示

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

    小程序客服消息列表展示

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

点击小程序客服消息进入的界面

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

小程序客服消息聊天界面

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

小程序客服消息聊天界面右上角按钮点击

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

点击自己小程序按钮进入的界面

2、网页版客服工具

具体可参考https://mp.weixin.qq.com/debug/wxadoc/introduction/custom.html#网页版客服工具

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


  • 消息推送配置

  • 填写服务器配置

    登录https://mp.weixin.qq.com

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

    点击设置

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

    消息推送配置

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

    消息推送配置
  • 验证消息的确来自微信服务器

    开发者提交信息后,微信服务器将发送GET请求到填写的服务器地址URL上,GET请求携带参数如下表所示:

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

    参数详解
    /**
    *  检验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
    客服会话按钮,用于在页面上显示一个客服会话按钮,用户点击该按钮后会进入客服会话。

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

    屏幕快照 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中类型:图标部分无法改变

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

    default-light

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

    default-dark
  • 服务器接收消息事件

  • 进入会话事件
    用户在小程序“客服会话按钮”进入客服会话时将产生如下数据包:
    {
    "ToUserName": "toUser",
    "FromUserName": "fromUser",
    "CreateTime": 1482048670,
    "MsgType": "event",
    "Event": "user_enter_tempsession",
    "SessionFrom": "sessionFrom"
    }

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

    参数说明
  • 文本消息
    用户在客服会话中发送文本消息时将产生如下数据包:
    {
    "ToUserName": "toUser",
    "FromUserName": "fromUser",
    "CreateTime": 1482048670,
    "MsgType": "text",
    "Content": "this is a test",
    "MsgId": 1234567890123456
    }

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

    参数说明
  • 图片消息
    用户在客服会话中发送图片消息时将产生如下数据包:
    {
    "ToUserName": "toUser",
    "FromUserName": "fromUser",
    "CreateTime": 1482048670,
    "MsgType": "image",
    "PicUrl": "this is a url",
    "MediaId": "media_id",
    "MsgId": 1234567890123456
    }

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

    参数说明
  • 网页版客服工具进入会话事件
    用户在小程序“客服会话按钮”进入客服会话时将产生如下数据包:
    {
    "ToUserName": "toUser",
    "FromUserName": "fromUser",
    "CreateTime": 1482048670,
    "MsgType": "event",
    "Event": "kf_create_session",
    "KfAccount": "kf2001@gh_93228be5b792"
    }

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

参数说明
  • 获取 access_token

    请参考手把手教你开发微信小程序之模版消息中获取 access_token

  • 接收事件并回复消息

  • 功能概述

当用户和小程序客服产生特定动作的交互时(具体动作列表请见下方说明),微信将会把消息数据推送给开发者,开发者可以在一段时间内(目前修改为48小时)调用客服接口,通过POST一个JSON数据包来发送消息给普通用户。此接口主要用于客服等有人工消息处理环节的功能,方便开发者为用户提供更加优质的服务。

目前允许的动作列表如下,不同动作触发后,允许的客服接口下发消息条数和下发时限不同。下发条数达到上限后,会收到错误返回码,具体请见返回码说明页:

手把手教你开发微信小程序之客服消息(图17)屏幕快照 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"
      }
    }

    参数说明

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

    参数说明

返回码说明

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

返回码说明
  • 代码实现
<!-- 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);
        }
    });
}





免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。