小程序进入客服消息中心

小程序进入客服消息中心

1. 如何进入小程序客服消息中心

button按钮进入小程序客服消息中心

<button open-type="contact">点击按钮至客服</button>

2. 如何进入小程序客服中心后右下角显示发送小程序

<button open-type="contact" bindcontact="pathNavFn" send-message-path="/pages/test/lang/lang?type=service" show-message-card="true" send-message-title="查看客服标题">点击按钮至客服</button>
属性 类型 默认值 必填 说明
open-type string 微信开放能力
send-message-path string 当前分享路径 会话内消息卡片点击跳转小程序路径,open-type="contact"时有效,可以携带参数,参数格式和小程序内部跳转一致
send-message-title string 当前小程序卡片标题 会话内消息卡片标题,open-type="contact"时有效
show-message-card boolean false 是否显示会话内消息卡片,设置此参数为 true,用户进入客服会话会在右下角显示"可能要发送的小程序"提示,用户点击后可以快速发送小程序消息,open-type="contact"时有效

3. 获取用户客服消息

获取用户客服消息官网链接

需要将 button 组件 open-type 的值设置为 contact,当用户点击后就会进入客服会话,如果用户在会话中点击了小程序消息,则会返回到小程序,开发者可以通过 bindcontact 事件回调获取到用户所点消息的页面路径 path 和对应的参数 query

代码示例
<button open-type="contact" bindcontact="handleContact"></button>
Page({
    handleContact (e) {
        console.log(e.detail.path)
        console.log(e.detail.query)
    }
})
后台接入消息服务

用户向小程序客服发送消息、或者进入会话等情况时,开发者填写的服务器配置 URL (如果使用的是云开发,则是配置的云函数)将得到微信服务器推送过来的消息和事件,开发者可以依据自身业务逻辑进行响应。接入和使用方式请参考消息推送


4. 服务端获取用户发送的小程序卡片消息

服务端接收消息和事件 官网链接

小程序卡片消息
  • 用户在客服会话中发送小程序卡片消息时将产生如下数据包:
XML格式
<xml>
  <ToUserName><![CDATA[toUser]]></ToUserName>
  <FromUserName><![CDATA[fromUser]]></FromUserName>
  <CreateTime>1482048670</CreateTime>
  <MsgType><![CDATA[miniprogrampage]]></MsgType>
  <MsgId>1234567890123456</MsgId>
  <Title><![CDATA[Title]]></Title>
  <AppId><![CDATA[AppId]]></AppId>
  <PagePath><![CDATA[PagePath]]></PagePath>
  <ThumbUrl><![CDATA[ThumbUrl]]></ThumbUrl>
  <ThumbMediaId><![CDATA[ThumbMediaId]]></ThumbMediaId>
</xml>
JSON 格式
{
  "ToUserName": "toUser",
  "FromUserName": "fromUser",
  "CreateTime": 1482048670,
  "MsgType": "miniprogrampage",
  "MsgId": 1234567890123456,
  "Title":"title",
  "AppId":"appid",
  "PagePath":"path",
  "ThumbUrl":"",
  "ThumbMediaId":""
}
参数说明
参数 说明
ToUserName 小程序原始ID
FromUserName 发送者的openid
CreateTime 消息创建时间(整型)
MsgType miniprogrampage
MsgId 消息id,64位整型
Title 标题
AppId 小程序appid
PagePath 小程序页面路径
ThumbUrl 封面图片的临时cdn链接
ThumbMediaId 封面图片的临时素材id

5. 小程序客服消息功能流程