微信小程序添加懸浮在線客服會話按鈕

　　微信為小程序提供客服消息能力，小程序用戶可以方便快捷地與小程序服務提供方進行溝通，並且已經做成了組件的形式，直接就可以調用。客服會話按鈕，用於在頁面上顯示一個客服會話按鈕，用戶點擊該按鈕后會進入客服會話。那么如何自定義成懸浮客服會話按鈕呢？隨Z5Win一起來看看

1.我們可以定義contact-button的樣式，加一個class。這個客服組件可以放在一個固定模板里，方便每個頁面都調用到。

<view>
	<contact-button class="img-plus-style zindex100 yc"></contact-button>
	<image src="../../images/kefu.png" class="img-plus-style"></image>
</view>

　　

2.在app.wxss或其他文件里增加樣式

.img-plus-style {
height: 70rpx;
width: 70rpx;
position: fixed;
bottom: 200rpx;
right: 13rpx;
opacity: 0.7
}
.zindex100{z-index: 100}
.yc{opacity: 0}

　　

3.上傳自定義的客服圖標

4.當然你也可以調用撥打電話的功能，只要在圖片里加一個bindtap=”calling”屬性

<view>
	<contact-button class="img-plus-style zindex100 yc"></contact-button>
	<image src="../../images/kefu.png" class="img-plus-style" bindtap="calling"></image>
</view>

　　

然后再定義一個calling的js function，比如在tel.js文件里

calling: function () {
wx.makePhoneCall({
phoneNumber: ‘10086’,
})
}

　　

微信小程序添加懸浮在線客服會話按鈕就實現了，感興趣的朋友可以試試