微信小程序代码实现客服功能+自定义样式+去除Button默认样式

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/qq_31766533/article/details/100013238

最近在开发小程序过程中遇到挺多坑的，毕竟微信一家独大，而且他家的腾讯客服很傲娇，我从来是没打通过，好了，不吐槽了。

下面介绍一个小程序客服功能的实现，其实很简单，但是它内置的样式就让人很不舒服了。

 <contact-button class='' type="default-light" size="27"  session-from="webapp">客服</contact-button>

把上面那行代码加上去，出现如图效果，就是已经成功了，因为必须要在真机上调试才能进入会话，我用的是开发者工具，

不过这个是人家的默认样式，自动带的图标啥的，感觉很不爽。

然后就自己动手改了，我也是网上找资料，查文档改的

 <button class='kefubtn cu-btn content' open-type="contact"><text class='text-grey'>联系作者</text></button>

.kefubtn{
  border: none;
  background-color: #fff;
  border-radius:0;
}

button::after {
  border: none;
}

使用::after 伪类选择器，因为button的边框样式是通过::after方式实现的，如果在button上定义边框就会出现两条边框线，所以我们可以使用::after的方式去覆盖默认值。

然后在自定义button的样式和你整体风格一致就大功告成了。

这样功能就已经实现了，没什么技术上的难度，其实原本的自带客服按钮也能使用，就是和整体风格不搭。