小程序使用的是原生微信聊窗，在小程序后台通过接口和TPshop IM产生消息交互（因为是调用接口，未曾与微信客户建立websocket连接）。

具体对接流程:

1、在小程序当中，调用微信的聊窗组件，打开聊窗（）；例如<button open-type="contact" size="" session-from="wechat|{{userInfo.user_id}}|{{userInfo.nickname}}|{{userInfo.head_pic}}|{{store.store_id}}">客服button> 

参数说明：user_id为客户id，nickname为客户昵称，head_pic为客户头像，store_id为商品所属店铺id（必须，否则无法匹配该商品所属店铺下的客服，客服的接入按店铺客服接入配置流程走）。

2、小程序后台（https://mp.weixin.qq.com），开启消息推送

设置说明：Url为IM留给微信服务器的消息推送地址（http://域名/wechat/index/check_server）；Token为令牌，可手动设置；EncodingAESKey为消息加密密钥，可手动设置，亦可自动生成；消息加密方式设置为安全模式；数据格式设置为XML模式。

3、IM后台设置小程序客服接入配置（admin身份才能设置）

参数说明：AppID、AppSecret 为小程序的AppID、AppSecret ，Token 为小程序消息推送所设置的Token令牌，EncodingAESKey 为消息加密密钥，用于解密。

假如没有该页面，需手动创建，操作示范（Admin身份）：

打开 拓展功能 --> 菜单节点管理 单击‘添加菜单’或者找到‘后台首页(public)’其后的‘添加子菜单’；

然后设置如下信息：

配置成功

此时可以给角色分配权限，配置小程序只能admin操作，但admin为最高权限，所以不用操作接下来的动作，此处只作为分配权限的了解。

用户管理/角色管理：

4、因为小程序客服接入了客服系统，客服所在的客户端需要区别对待，代码修改地方（2018-7-12号之后的源码已改好）：

目录：public/static/common/js   更改文件main.js(pc端)，main.mobile.js(移动端)；

修改地方：监听消息发送方法layim.on(‘sendMesage’,function(res){...})

复制代码：

layim.on('sendMessage', function(res){
    // 发送消息
    var mine = JSON.stringify(res.mine);
    var to = JSON.stringify(res.to);
    //判断是否为微信程序客户
    if(res.to.identity && res.to.identity == 'weixin'){
        var open_id = res.to.open_id;
        var content = res.mine.content;
        $.post('/wechat/index/sendMessageToWX',{open_id:open_id,content:content},function(res){

        },'json');
    }else {
        var login_data = '{"type":"chatMessage","data":{"mine":'+mine+', "to":'+to+'}}';
        socket.send( login_data );
    }
});

 

小程序客服接入逻辑：友情链接（https://developers.weixin.qq.com/miniprogram/dev/api/custommsg/receive.html）