小程序聯繫客服和撥打客服電話功能實現

點擊下面網址可以在線觀看視頻

10天零基礎入門小程序系列在線視頻教程

上一節給大家講了個人中心的開發和用戶的授權登陸功能，這節給大家講解小程序客服功能的實現。通樣我們這節的代碼是建立在第4天代碼的基礎上，如果前面幾節課沒看，點擊上面鏈接

本節知識點

• 1，添加客服微信
• 2，撥打客服電話

做功能之前，我們先來改造下我們的上一節的個人中心

上一節個人中心

要想實現隱藏按鈕的功能，我就就要用到wx:if，只需要在我們的me.wxml里加入下圖紅色框裏的代碼即可

me.wxml

然後在me.js裏做下處理

me.js

這就可以實現登陸成功以後隱藏button按鈕了。
接下來我們就要實現聯繫客服的功能了

一，在個人中心創建聯繫客服模塊

我們要實現的效果如下,在點擊聯繫客服

聯繫客服

對應的me.wxm,me.js,me.wxss如下

• 1，me.wxml,只是加了一個聯繫客服的佈局

<!--pages/me/me.wxml-->
<view class='top' wx:if='{{isLogin}}'>
 <image class='touxiang' src='{{yonghu.avatarUrl}}'></image>
 <text class='name'>{{yonghu.nickName}}</text>
</view>
<button wx:if='{{!isLogin}}' open-type="getUserInfo" type='primary' lang="zh_CN" bindgetuserinfo="onGotUserInfo">獲取用戶信息</button>
<!-- 聯繫客服 -->
<view class='my_item' bindtap="goToKeFu" >
 <text>聯繫客服</text>
 <view class='right_arrow' />
</view>

• 2,me.js，只是加了一個跳轉到客服頁的方法

// pages/me/me.js
Page({
 data:{
  isLogin:false//是否登陸
 },
 //獲取用戶信息的方法
 onGotUserInfo(event) {
  console.log(event.detail.userInfo)
  this.setData({
   yonghu: event.detail.userInfo,
   isLogin:true//登陸成功
  })
 },
 //跳轉到聯繫客服頁
 goToKeFu(){
  wx.navigateTo({
   url: '../kefu/kefu',
  })
 }
})

• 3,me.wxss，個人中心的樣式

/* pages/me/me.wxss */
page{
 background: gainsboro;
}
.touxiang {
 width: 100px;
 height: 100px;
 border-radius: 100px;
}
.top {
 display: flex;
 flex-direction: column;
 align-items: center;
 background: white;
}
.name{
 margin-top: 20px;
 font-size: 20px;
 margin-bottom: 20px;
 color: red;
}
/* 聯繫客服模塊 */
.my_item {
 width: 100%;
 display: flex;
 flex-direction: row;
 align-items: center;
 padding: 8px 20px;
 margin-top: 5px;
 background: white;
 border-bottom: 1px solid gainsboro;
}

.right_arrow {
 /* 用css畫出三角箭頭 */
 border: solid black;
 border-width: 0 3px 3px 0;
 padding: 3px;
 position: absolute;
 right: 30px;
 /* margin-left: 66%; */
 transform: rotate(-45deg);
 -webkit-transform: rotate(-45deg);
}

到這裏我們個人中心就成功添加了聯繫客服模塊，接下來創建聯繫客服頁面。

二，創建聯繫客服頁面

先右鍵創建kefu文件夾，然後在客服文件夾裏創建kefu.js,kefu.wxml,kefu.wxss,kefu.json

創建客服頁

這裏我們只需要用到kefu.wxml 和kefu.js即可實現聯繫客服功能。
下面就來看下kefu.wxml和kefu.js的實現

• 1，kefu.wxml,一個text提示文案，兩個botton按鈕

  
  
  kefu.wxml

<!--pages/kefu/kefu.wxml-->
<text >點擊下面微信號即可複製，然後去添加好友的地方粘貼即可</text>
<button class='button' bindtap='tianjiaweixin'>客服微信:2501902696</button>
<button class='button' bindtap='bodadianhua'>點擊撥打客服電話</button>

• 2，kefu.js,就兩個方法，一個是添加客服微信，一個是撥打客服電話。
  
  kefu.js
  
  代碼如下

// pages/kefu/kefu.js
Page({
 // 撥打電話
 bodadianhua() {
  wx.makePhoneCall({
   phoneNumber: '15611823564' //客服電話
  })
 },
 // 添加客服微信
 tianjiaweixin() {
  wx.setClipboardData({
   data: '2501902696',
   success: function(res) {
    wx.getClipboardData({
     success: function(res) {
      console.log('複製成功')
      console.log(res.data) // data
     }
    })
   }
  })
 },
})

這樣我們就實現了添加客服微信和撥打客服電話的功能

複製微信

撥打電話

撥打電話功能在模擬器上沒有辦法撥打，所以需要用手機微信掃描

真機預覽

到這裏我們就實現了聯繫客服的功能了。

10天零基礎入門小程序系列在線視頻教程

有問題可以加我微信2501902696（備註小程序）