微信小程序-自定义客服会话按钮(contact-button)

先来说明一下我们需要实现的最终效果：

得到如图样式，用户点击该按钮后会进入客服会话。

下面我们直接看代码：

步骤1：

按照正常view组件写法写好我们需要的样式

wxml

<view class='lists'>
  <view class="list">
    <view class="spaceAroundCenter">
      <image src="../img/personal/service.png" class="icoLeft"></image>联系我们</view>
    <image src="../img/general/more.png" class="icoRight"></image>
  </view>
</view>

wxss

.lists {
  margin: 15rpx 20rpx 0 20rpx;
}

.list {
  background-color: #fff;
  padding: 28rpx 10rpx;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-between;
}

.spaceAroundCenter {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-around;
}

.icoLeft {
  width: 48rpx;
  height: 48rpx;
  margin: 0 25rpx;
}

.icoRight {
  width: 48rpx;
  height: 48rpx;
}

步骤二：

添加button组件，通过设置 open-type=”contact” ，进入客服会话

wxml

1	<button class='contact-btn' open-type='contact'>按钮</button>

步骤三

设置view组件和button组件两者的样式，使button组件覆盖在view组件上，并且为透明。

wxml

<view class='lists contact'>
<button class='contact-btn' open-type='contact'>按钮</button>
  <view class="list">
    <view class="spaceAroundCenter">
      <image src="../img/personal/service.png" class="icoLeft"></image>联系我们</view>
    <image src="../img/general/more.png" class="icoRight"></image>
  </view>
</view>

wxss

/* 跳转到客服聊天按钮 */
.contact {
  position: relative;
}

.contact-btn {
  width: 100%;
  position: absolute;
  opacity: 0; /* 设置成透明 */
}

另：contact-button

1	<contact-button type="default-dark" size="20" session-from="weapp"></contact-button>

使用官方提供的组件，只能得到如图样式的一个客服会话按钮，但是不能修改样式。点击查看详情