完全自定义微信小程序客服按钮，实现点击view打开客服

完全自定义微信小程序客服按钮，实现点击view打开客服

写微信小程序的时候需要用到一个客服菜单，在设计里面这个菜单需要呈现为一个条状，布局的时候我使用View来实现这个样式，原本想的是通过对view定义事件来打开客服，但是在实现功能的时候突然发现客服只能使用两种方式实现，

<!-- 方式一 <button> 按钮 -->
<button open-type="contact">客服</button><!-- 方式二 <contact> 按钮 -->
<contact-button></contact-button>

说实话，官方提供的这两种方式局限都挺大，特别是第二种，要实现我的奇葩需求太难了。原本抱有的一丝期望在查阅了大量的资料后也放弃了，目前为止还没有办法通过调用事件来打开客服，于是只能回到上面这两种方式中来

网上查到的一般是是通过把<contact-button>放一排，以达到点击按钮任何位置都能打开客服的目的，

或者通过把客服按钮绝对定位到自己的按钮上方，然后设置绝对透明，以达到看到的是自己写的按钮但是实际点击的是客服按钮的目的（原文链接：）

但是作为一个重度强迫症患者，觉得这两种方法都显得过于繁琐了，不够完美，于是尝试通过定义button来实现我想要的效果

一、效果图

首先，我想要实现的效果如下图所示

客服按钮对应wxml代码为

<!--客服-->
<view class='col-100'><view class='button-setting' wx:for='{{connectButton}}' wx:key='key'><text class='{{item.className}}'>{{}}</text><text class='icon-right {{item.className}}'>〉</text></view>
</view>

.js文件相关代码

Page({data: {connectButton: [{ className: "", text: "在线客服", bindtap: "" }]},})

.wxss文件相关代码

.col-100 {width: 100vw;background-color: #FFFFFF;margin-top: 20rpx;overflow: hidden;
}.button-setting {border-bottom: #F2F2F2 1px solid;padding: 30rpx 20rpx 30rpx 60rpx;color: #333;
}.icon-right {float: right;color: #CCC;
}

二、加入button

我实现这个样式的思路是，用<button>标记包住菜单内容以实现点击菜单任何位置都能打开客服，再对<button>按钮定义样式，使其完全融入菜单当中，相关代码如下

<!--现在的客服-->
<view class='col-100'><button open-type="contact" class='contacButton'><view class='contacButtonView' wx:for='{{connectButton}}' wx:key='key'><text class='floatL {{item.className}}'>{{}}</text><text class='icon-right {{item.className}}'>〉</text></view></button>
</view><!--原来的客服-->
<view class='col-100'><view class='button-setting' wx:for='{{connectButton}}' wx:key='key'><text class='{{item.className}}'>{{}}</text><text class='icon-right {{item.className}}'>〉</text></view>
</view>

.js文件

Page({data: {connectButton: [{ className: "", text: "在线客服", bindtap: "" }]},})

.wxss文件

.col-100 {width: 100vw;background-color: #FFFFFF;margin-top: 20rpx;overflow: hidden;
}.button-setting {border-bottom: #F2F2F2 1px solid;padding: 30rpx 20rpx 30rpx 60rpx;color: #333;
}.icon-right {float: right;color: #CCC;
}.contacButton {background-color: #FFF;padding: 0;margin: 0;font-size: inherit;
}.contacButton::after {border: #FFF solid;
}.contacButtonView {padding: 12rpx 20rpx 12rpx 60rpx;color: #333;
}

对比wxml可以发现，对代码的改动极小，只是使用button保住了原来的内容，并且定义了新的样式，其他的没有做变化

三、注意事项

1. 定义button的样式时，border是在其样式的 ::after 里，如果直接定义样式就会发现border设置无效
2. 由于编辑菜单的时候我是使用wx:for来实现一个个的选项的，由于我的客服是单独的一行，所以把<button>静态放在了<view wx:for>的里面不会有任何问题，但是如果在.js文件里面多加几个对象即多加几行菜单的话就会发现点击新加入的菜单都会打开客服，这是由于 wx:for 循环创建菜单的时候会把循环内的静态代码原封不动的保留下来，所以如果有朋友也是用这种方式的话，还需要把<button>换成变量，否则程序会出问题的哟~

如果大家有更好的方法欢迎分享！