1.效果圖

點選客服按鈕，從底部彈出選單欄

點選微信線上客服，可以喚起微信客服

2.為什麼要自己寫選單欄？

微信原生的選單欄不支援直接喚起微信客服唄，難受==
不想說話了，貼程式碼

3.程式碼段

1. 定義元件

<!--components/customerService/customerService.wxml-->
<view class="customer_service_wrap" wx:if="{{isShowCustomerService}}">
    <view class="overlay" animation
 
="{{fadeInOrOut}}" bindtap="cancleCallService"></view>
    <view class="menu_list" animation="{{slideInOrOut}}">
        <view class="menu_top">
            <button class="menu_item"
                    open-type="contact"
                    send-message-title="{{sku_info.name}}"
 

                    <!--這幾項是為了使用者開啟客服會話時，快捷傳送商品圖片和連結的，跟淘寶一個套路-->
                    send-message-path="{{service_url}}"
                    send-message-img="{{sku_info.pictures_arr[0]}}"
                    show-message-card="true">微信線上客服</button>
            <view class="line">
 
</view>
            <button class="menu_item" bindtap="callService">客服電話： {{service_phone}}</button>
        </view>
        <view class="menu_item cancle" bindtap="cancleCallService">取消</view>
    </view>
</view>

// components/customerService/customerService.js
import utils from '../../utils/util'
const appInstance = getApp()
Component({
  /**
   * 元件的屬性列表
   */
  properties: {
      sku_info:{
          type: Object,
          value: {}
      },
      isShowCustomerService: {
          type: Boolean,
          value: false,
          observer: 'serviceHandle'
      }
  },

  /**
   * 元件的初始資料
   */
  data: {
      service_url: '',
      service_phone: '4006655566',
      slideInOrOut: {},
      fadeInOrOut: {},
      translateLeft: null,
      translateTop: null
  },
    created(){
      var fadeInOrOutAnimation = wx.createAnimation({
          duration: 700,
          timingFunction: 'ease',
      })
      this.fadeInOrOutAnimation = fadeInOrOutAnimation

      var slideInOrOutAnimation = wx.createAnimation({
          duration: 700,
          timingFunction: 'ease',
          transformOrigin: '50% 50% 0'
      })
      this.slideInOrOutAnimation = slideInOrOutAnimation

        try {
            var res = wx.getSystemInfoSync()
            this.setData({
                screenWidth: res.screenWidth,
                screenHeight: res.screenHeight,
                translateLeft: 710/2/750*res.screenWidth,
                translateTop: 340/750*res.screenWidth
            })
        } catch (e) {
            // Do something when catch error
        }
  },
    onShow(){
        this.setData({
            // 獲取微信客服用分享連結
            service_url: utils.getCurrentPageUrl(),
            service_phone:  this.data.service_phone
        })
    },
  /**
   * 元件的方法列表
   */
  methods: {
      serviceHandle: function(newVal, oldVal){
          if(newVal === true){
              this.fadeInOrOutAnimation.opacity(0.5).step();
              this.slideInOrOutAnimation.translate(-this.data.translateLeft, -this.data.translateTop).step();

              setTimeout(function () {
                  this.setData({
                      fadeInOrOut: this.fadeInOrOutAnimation.export(),
                      slideInOrOut: this.slideInOrOutAnimation.export(),
                  })
              }.bind(this),100)

          }
      },
      callService: function () {
          var that = this;
          wx.makePhoneCall({
              phoneNumber: that.data.service_phone
          })

      },
      cancleCallService: function () {
          this.fadeInOrOutAnimation.opacity(0).step();
          this.slideInOrOutAnimation.translate(-this.data.translateLeft, this.data.translateTop).step();
          this.setData({
              fadeInOrOut: this.fadeInOrOutAnimation.export(),
              slideInOrOut: this.slideInOrOutAnimation.export(),
          })
          setTimeout(function () {
              this.setData({
                  isShowCustomerService: false
              })
          }.bind(this),300)
      }
  }
})

// components/customerService/customerService.js
{
  "component": true
}

2.使用客服元件

 <!-- index.html -->
<customer-service wx:if="{{canIUseDataProxy}}" sku_info="{{sku_info}}" isShowCustomerService="{{isShowCustomerService}}"></customer-service>

//index.js
{
  "usingComponents": {
    "customer-service": "/components/customerService/customerService"
  }
}

4. 相容性

用了自定義元件的observer屬性，文件說從1.6.3開始支援 ， 親測1.9.9 向下有幾個基礎庫都不相容，做了查詢當前版本庫，低的話降低處理

5.用自定義元件還是模版？

這取決於你只是想複用一段UI樣式，還是想實現一個可複用的小功能？你懂得吧