微信小程序对接有两种方式：webview组件嵌入页面，小程序客服组件对接消息
使用webview组件嵌入聊天页面形式。这种形式更加的灵活可控，可以传递更多的信息给到客服，例如可以把用户的手机号，所在页面的产品信息等带入进来。
嵌入页面形式
增加展示点击按钮，并且获取到昵称头像，嵌入聊天页面。
wxml部分
<view class="page-body">
<button open-type="getUserInfo" bindgetuserinfo="getPerson">联系客服</button>
<view wx:if="{{url}}">
<web-view src="{{url}}"></web-view>
</view></view>js部分
Page({
data: {
url:""
},
//按钮回调的方法
getPerson:function(e){
console.log(e);
var username=e.detail.userInfo.nickName;
var avator=e.detail.userInfo.avatarUrl;
this.setData({
url:"https://gofly.sopans.com/chatIndex?kefu_id=taoshihan&ent_id=5&visitor_name="+username+"&avator="+avator });
},
onLoad: function () {
},})离线通知
如果需要离线通知，需要按照下面的方式对接
利用小程序的订阅消息，可以在访客离开页面后，也能收取通知
小程序的订阅消息，分为一次性订阅消息和长期订阅消息，长期订阅消息只对政务民生、医疗、交通、金融、教育等线下公共服务开放，一般情况下我们用不了。
一次性订阅消息用于解决用户使用小程序后，后续服务环节的通知问题。用户自主订阅后，开发者可不限时间地下发一条对应的服务消息；每条消息可单独订阅或退订。
注意：授权一次，发送一条，多了发不了
配置订阅模板消息
微信小程序想要对接独立在线客服系统，除了使用小程序消息推送接口外，还可以使用webview嵌入的形式嵌入聊天链接。
但是，使用webview嵌入的形式，当用户离开页面以后，就收不到客服回复的消息了
所以，我们需要当用户离开聊天页面后，客服回复消息，使用小程序的订阅模板来进行通知。
我们前往小程序后台，去开启一下订阅消息，并且选用一个模板。
在公共模板库里搜索一下，选用“咨询回复通知”
配置一下字段，我们就需要三个字段就可以了，分别是，“回复内容” “回复时间” “回复者”
这样会得到模板ID，后面我们会通过这个模板ID进行发送
代码部分的参考
<view class="listItem"> <view class="right"><button type="primary" size="mini" bindtap="callKefu">在线咨询</button> </view> </view>
js部分。这里面就是拼接我的客服系统聊天界面链接，重要的是visitor_id参数部分，按照我的要求是 mini|商户ID|openid ，这样我在客服系统那里，好拿到openid去发送订阅消息
//咨询店铺客服
callKefu(){
this.subReplyNotice();
var url=app.globalData.apiUrl+"/chatIndex?kefu_id="+this.data.kefu_name+"&ent_id="+this.data.ent_id+"&visitor_name="+this.data.nickname+"&avator="+this.data.avatar+"&visitor_id=mini|"+this.data.ent_id+"|"+this.data.openid;
wx.navigateTo({
url: "/pages/index/kefu?url="+encodeURIComponent(url)
})
}, //订阅回复通知
subReplyNotice(){
wx.requestSubscribeMessage({
tmplIds: ['Hk0zWtbgl0aci6b0UIWSUBywYzaglNqkw0KhzkbEuN4'],
success (res) {
console.log(res)
// res包含模板id，值包括'accept'、'reject'、'ban'、'filter'。
// 'accept'表示用户同意订阅该条id对应的模板消息
// 'reject'表示用户拒绝订阅该条id对应的模板消息
// 'ban'表示已被后台封禁
// 'filter'表示该模板因为模板标题同名被后台过滤。
}
})
},webview的嵌入页面 pages/index/kefu
wxml部分
<!--pages/index/kefu.wxml--><view wx:if="{{url}}">
<web-view src="{{url}}"></web-view></view> /**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
console.log(options.url);
this.setData({
url:decodeURIComponent(options.url),
});
},小程序自带客服组件对接
首先登录小程序后台
在小程序后台==>开发管理==>开发设置==>服务器域名部分，配置好自己的域名
再往上翻，开发者ID部分，把AppID AppSecret 找个文档记下来，ip白名单我先给关上了
在小程序后台==>开发管理==>开发设置==>消息推送中补全信息，这个时候如果提交会报token校验失败，需要回到客服系统去配置相应的信息
功能==>客服==>小程序客服，配置好自己的客服人员
客服系统配置
上面就是小程序后台部分的配置，接下来返回我的客服系统后台，去配置相应的信息
设置==>找到下面三个小程序的配置项，补充完善信息
此时在小程序的客服组件里，就能收到来自我客服系统的消息回复了，并且不影响客服人员使用微信自带工具接入