自定义组件实现底部弹出菜单

1.效果图

点击客服按钮，从底部弹出菜单栏

点击微信在线客服，可以唤起微信客服

2.为什么要自己写菜单栏？

微信原生的菜单栏不支持直接唤起微信客服呗，难受==
不想说话了，贴代码

3.代码段

1. 定义组件

<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.使用客服组件

 
<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样式，还是想实现一个可复用的小功能？你懂得吧