微信小程序客服按钮(contact-button)自定使用cell单元格形式

2,843 阅读1分钟

小程序调用客服会话的功能,默认是使用button组件 官方文档:

页面中使用 <button open-type="contact" />可以显示进入客服会话按钮。

详见:developers.weixin.qq.com/miniprogram…

但是我们经常想用的地方,却不适合使用button。 比如像下面这样使用一个cell单元格:

解决方法: 在cell单元格上叠加小程序客服按钮button,调整button的大小及样式,覆盖cell组件单元格,然后把button设置成透明。

代码如下(使用的 weui 框架的 cell 单元格组件): wxml:

<view class='weui-cells weui_cells-after-title'>
  <view class='weui-cell'>
    <view class="weui-cell__bd">联系我们</view>
    <view class="weui-cell__ft weui-cell__ft_in-access"></view> 
      <button class='contact-button' open-type='contact'>a</button> 
    </view>
</view>

wxss

.contact-button {
  display: inline-block;
  position: absolute;
  width: 100%;
  background: salmon;
  opacity: 0;
}