Vue微信SDK 录音功能

需求：
微信下长按按钮，弹出正在录音gif，上传录音；
在非微信下，正常显示录音gif，即做一个假的录音按钮。
在微信下，因为项目中会加载一个外部js，有一定几率会阻塞wx的初始化，所以如果在用户点击按钮时，wx sdk没有初始化，也显示假的录音按钮。

将tourch和mouse写绑定在一个button中 在IOS下 会出现一次录音 取消长按后再执行一次 startRecord -> stopRecord问题，所以将移动端和PC端按钮分开显示。

<button v-if="!!navigator.userAgent.match(/AppleWebKit.*Mobile.*/)" id="recrd_btn_mobile" class="record-button" @touchstart="startRecord" @touchend="stopRecord"></button>
<button v-else id="recrd_btn_pc" class="record-button"  @mousedown="startRecord" @mouseup="stopRecord"></button>

// 利用 _this.oRecordInfo.useWxRecord 来决定是否为假按钮 值可根据情况修改
touchmoveDefault: function (e) {
  e.preventDefault();
},
startRecord: function (event) {
  console.log('startRecord')
  var _this = this
  if (!!navigator.userAgent.match(/AppleWebKit.*Mobile.*/)) {
    // 移动端 取消浏览器长按事件 （否则在录音时会有弹出框）
    document.oncontextmenu = _this.touchmoveDefault
    //禁止滑动事件 防止在长按时 下拉窗口不能触发stopRecord
    document.body.addEventListener('touchmove', _this.touchmoveDefault, {passive: false})
  }
  if(localStorage.rainAllowRecord !== 'true' && _this.oRecordInfo.useWxRecord !== 2 && _this.oRecordInfo.useWxRecord !== 3){
    //  首次进入 弹出是否授权框
    wx.startRecord({
      success: function(){
        //  授权录音
        localStorage.rainAllowRecord = 'true'
        _this.oRecordInfo.useWxRecord = 3
        _this.oRecordInfo.bShowRecording = false  //  控制正在录音gif显示
        wx.stopRecord()
        return
      },
      cancel: function () {
        // 用户拒绝授权录音
        _this.oRecordInfo.bShowRecording = false
        _this.oRecordInfo.useWxRecord = 0
        return
      }
    })
    if (_this.oRecordInfo.useWxRecord === 1) {
      //  使用假录音功能
      _this.oRecordInfo.useWxRecord = 2
    }
  }
  _this.oRecordInfo.bShowRecording = true
  _this.oRecordInfo.timer = new Date()
  //  防止因为js 加载时间过长导致调用录音接口失败问题 实现假按钮效果
  if ((_this.oRecordInfo.useWxRecord === 1 || _this.oRecordInfo.useWxRecord === 3) && localStorage.rainAllowRecord === 'true') {
    _this.oRecordInfo.recordTimer = setTimeout(function () {
    wx.startRecord({
      success: function(){
        console.log('wx.startRecord success')
        localStorage.rainAllowRecord = 'true'
      },
      cancel: function () {
        _this.oRecordInfo.bShowRecording = false
      }
    })
   }, 300)
  }
},
stopRecord: function(event) {
  var _this = this
  console.log('stopRecord')
  //  回复滑动事件
  if (!!navigator.userAgent.match(/AppleWebKit.*Mobile.*/)) {
    document.body.removeEventListener('touchmove', _this.touchmoveDefault)
  }
  _this.oRecordInfo.bShowRecording = false
  var t = new Date()
  if (t - _this.oRecordInfo.timer < 300) {
    //  少于300毫秒 不执行startRecord
    clearTimeout(_this.oRecordInfo.recordTimer)
  } else if (t - _this.oRecordInfo.timer < 2000) {
    if (_this.toastInstance) {
      _this.toastInstance.close()
    }
    _this.toastInstance = this.$toast({
      message: '时间太短啦 重新试一次吧',
      position: 'bottom',
      duration: 1000
    })
    if (_this.oRecordInfo.useWxRecord !== 2) {
      setTimeout(function() {
        wx.stopRecord({
          success: function(res) {
            console.log('updataRecord success')
          },
          fail: function(res) {
            console.log(JSON.stringify(res))
          }
        })
      }, 500)
    }
  } else {
    wx.stopRecord({
      success: function(res) {
        console.log('updataRecord success')
      },
      fail: function(res) {
        console.log(JSON.stringify(res))
      }
    })
    if (_this.oRecordInfo.timer) {
      _this.show_upload_next_button = true
    }
  }
  _this.oRecordInfo.timer = null
}

参考博客，写的很全面