微信小程序增加悬浮在线客服

在index首页增加客服代码及一键拨打电话

1.index.wxss或者app.wxss文件里增加样式

1. .img-plus-style {  
   
2.   height: 70rpx;  
   
3.   width: 70rpx;  
   
4.   position: fixed;  
   
5.   bottom: 220rpx;  
   
6.   right: 30rpx;  
   
7.   opacity: 0.7
   
8. }  
   
9. .img-plus-style1 {  
   
10.   height: 70rpx;  
    
11.   width: 70rpx;  
    
12.   position: fixed;  
    
13.   bottom: 130rpx;  
    
14.   right: 30rpx;   
    
15.   opacity: 0.7
    
16. }  
    
17. .zindex100{z-index: 100}
    
18. .yc{opacity: 0}

复制代码

2.index.wxml文件增加代码

1. <view>  
   
2. <contact-button type="default-dark" size="20" session-from="weapp" class="img-plus-style zindex100 yc">
   
3. </contact-button>
   
4. <image src="../../../img/kefu.png" class="img-plus-style"></image>
   
5. <image src="../../../img/tel.png" class="img-plus-style1" bindtap="calling"></image>
   
6. </view>

复制代码

3.index.js增加 一键拨号

1. calling: function () {
   
2.       wx.makePhoneCall({
   
3.         phoneNumber: '10086',
   
4.       })
   
5.     },

复制代码

4.把两个图标放在image目录下