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呢是因为鸡肋啊，一开始不知道是坑，所以来回换。。。。