小程序进入客服消息中心业务(一)
1. 如何进入小程序客服消息中心
<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 |