码迷,mamicode.com
首页 > 微信 > 详细

微信小程序添加悬浮在线客服会话按钮

时间:2018-08-27 23:20:09      阅读:820      评论:0      收藏:0      [点我收藏+]

标签:asc   bind   class   兴趣   nec   程序   其他   微信   能力   

  微信为小程序提供客服消息能力,小程序用户可以方便快捷地与小程序服务提供方进行沟通,并且已经做成了组件的形式,直接就可以调用。客服会话按钮,用于在页面上显示一个客服会话按钮,用户点击该按钮后会进入客服会话。那么如何自定义成悬浮客服会话按钮呢?随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’,
})
}

  

微信小程序添加悬浮在线客服会话按钮就实现了,感兴趣的朋友可以试试

微信小程序添加悬浮在线客服会话按钮

标签:asc   bind   class   兴趣   nec   程序   其他   微信   能力   

原文地址:https://www.cnblogs.com/ytkah/p/9545301.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!