weixin-js-sdk下的录音并转化为文字功能(VUE)

weixin-js-sdk下的录音并转化为文字功能(VUE)

1.引入weixin-js-sdk

import wx from 'weixin-js-sdk'

如果没有下载请

npm install weixin-js-sdk

2.methods中开始调用

const _this = wx
getWeiXin(){
//this.$http等价于axios，封装过
  this.$http({
    url: '后台给的接口里面有config的东西',
  }).then(res=>{
    wx.config({
      debug: true, // 开启调试模式,调试完成后改为false不然一直弹框哦！！！！
      appId: res.data.data.appid, // 必填，企业号的唯一标识，此处填写企业号corpid
      timestamp: res.data.data.timestamp, // 必填，生成签名的时间戳
      nonceStr: res.data.data.nonceStr, // 必填，生成签名的随机串
      signature: res.data.data.signature,// 必填，签名
      jsApiList: ['startRecord','stopRecord','onVoiceRecordEnd','translateVoice'] // 必填，需要使用的JS接口列表，
    })
    // config信息验证后才执行
    _this.ready(() => {
      //开始录音
      $('#talk').on('touchstart',function(e){
        e.preventDefault();
        //开始录音
        _this.startRecord();
      });
      //停止录音
      $('#talk').on('touchcancel touchend', function(){
        //停止录音接口
        _this.stopRecord({
          success: function (res) {
            this.localId = res.localId;
            _this.translateVoice({
              localId: this.localId, // 需要识别的音频的本地Id，由录音相关接口获得
              isShowProgressTips: 1, // 默认为1，显示进度提示
              success: function (res) {
                alert(res.translateResult);
               let result = res.translateResult;
                //去掉最后一个句号
                result = result.substring(0,result.length-1);
                alert(result);
                this.$router.push('/Intelligent?result='+result);
              }
            });
          }
        });
      });
      //监听录音自动停止接口
      _this.onVoiceRecordEnd({
        //录音时间超过一分钟没有停止的时候会执行 complete 回调
        complete: function (res) {
          this.localId = res.localId;
          $('#talk').removeClass('red');
          _this.translateVoice({
            localId: this.localId, // 需要识别的音频的本地Id，由录音相关接口获得
            isShowProgressTips: 1, // 默认为1，显示进度提示
            success: function (res) {
              alert(res.translateResult);
              result = res.translateResult;
              //去掉最后一个句号
              result = result.substring(0,result.length-1);
              this.$router.push('/Intelligent?result='+result);
            }
          });
        }
      });
    });
    //存入本地存储
    if(!localStorage.rainAllowRecord || localStorage.rainAllowRecord !== 'true'){
      _this.startRecord({
        success: function(){
          localStorage.rainAllowRecord = 'true';
          wx.stopRecord();
        },
        cancel: function () {
          alert('用户拒绝授权录音');
        }
      });
    }
    // 微信sdk错误返回问题
    _this.error((res) => {
      // alert('出错了：' + res.errMsg)// 这个地方的好处就是wx.config配置错误，会弹出窗口哪里错误，然后根据微信文档查询即可。
    })
  }).catch(err=>{
    // console.log(err);
  });
},

3.遇到的坑

微信内置的浏览器不支持在安卓上couchend，苹果可以，这就很鸡肋了，所以同时使用了touchcancel touchend

并且需要在touchstart时添加e.preventDefault();

页面进去后会一直弹出是否调用录音功能，解决办法是在第一次时存入本地存储。

至于为什么在VUE项目中使用jq呢是因为鸡肋啊，一开始不知道是坑，所以来回换。。。。