需求：
微信下長按按鈕，彈出正在錄音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
        if (!!navigator.userAgent.match(/AppleWebKit.*Mobile.*/)) {
          document.body.removeEventListener('touchmove', _this.touchmoveDefault)
         }
        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
}