微信小程序接入小程序客服功能

目录

文档

文档实现

我的修改

---

微信的客服有很多种，这里只说最简单最普通的小程序客服，其余的请自行探索。

文档

官方简单文档（这里只有最基础的使用方法）

官方详细文档（非常详细）

文档实现

我这里是基于简单文档写的，因为这个足以满足我的需求了，仅仅是给小程序加个可有可无的客服功能。

在页面中放一个button，open-type设置为contact，就可以实现最简单的跳转到小程序客服聊天界面。

<button open-type="contact" bindcontact="handleContact" session-from="sessionFrom"></button>

Page({
    handleContact (e) {
        console.log(e.detail.path)
        console.log(e.detail.query)
    }
})

我的修改

因为我要和其他框架一起使用，但最简单的接入方式只能用button组件，但我想用框架组件，以下是我的实现。

我要用TDesign框架的t-cell组件，这样好看一点，我是把button改为透明，然后充满父容器。

      <view class="customerContainer">
        <t-cell title="联系客服" class="contact-cell" leftIcon="service" hover arrow />
        <button class="contact-btn" open-type="contact" bindcontact="handleContact" style="opacity: 0;">联系客服</button>
      </view>

.customerContainer {
  position: relative;
}


.contact-btn {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* 覆盖整个t-cell */
  height: 100%; /* 覆盖整个t-cell */
  opacity: 0; /* 使按钮透明 */
}