点击下面网址可以在线观看视频

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（备注小程序）