vue调用企业微信JS-SDK实现语音识别功能
1.前期准备
使用别人的东西我们第一步就是到对应官方文档熟悉使用流程。https://open.work./api/doc/90000/90136/90514
2.后端
根据企业微信里我的企业选项最下面的企业id和应用与小程序里的自建应用的Secret获取token，并计算签名等一系列操作，具体官方文档网上都很详细，这里就不多说；
3.前端代码撰写
第一步：安装对应的依赖并且在使用的组件里引入使用
import wx from 'weixin-js-sdk';const _this = wx;
第二步：获取对应的权限的数据，这回需要和后端配合调接口
getConfig() {const self=this;const data=location.href.split('#')[0];//需要传的地址为#前面的地址self.axios({method: 'post',url: '/red/web/getJsWxConfig?ticket=0&url=/os/',//获取签名等信息的地址// headers: {'Content-Type': 'application/json'},data:data //向服务端提供授权url参数，并且不需要#后面的部分}).then((res) => {// console.log(res.data.data)let list = res.data.data;_this.config({beta: true,// 必须这么写，否则wx.invoke调用形式的jsapi会有问题debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId:list.appId,// 必填，企业微信的corpIDtimestamp: list.timesTamp, // 必填，生成签名的时间戳nonceStr: list.nonceStr, // 必填，生成签名的随机串signature: list.signature, // 必填，签名jsApiList: ['startRecord', //开始录音接口'stopRecord',// 停止录音接口'translateVoice','onVoiceRecordEnd'] // 必填，需要使用的JS接口列表});_this.ready(() => {// _this.startRecord();// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个// 客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调// 用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。})_this.error((res) => {// 这个地方的好处就是wx.config配置错误，会弹出窗口哪里错误，然后根据微信文档查询即可。})}).catch((error) => {// error})},// 开始录音start(e) {let that = this;that.showPopover = falsethat.videoText = '正在录音...'that.videoStatus = '正在切换车辆颜色…'if(!localStorage.rainAllowRecord || localStorage.rainAllowRecord !== 'true'){_this.startRecord({success: function () {that.timer = setInterval(() => {that.time++}, 1000)that.vicoeEnd()},fail: function () {// 开始录音失败 },cancel: function () {// 用户拒绝授权录音}})}},// 60秒监听vicoeEnd() {let that = this_this.onVoiceRecordEnd({// 录音时间超过一分钟没有停止的时候会执行 complete 回调complete: function (res) {// 60秒停止录音that.localId = res.localIdclearInterval(that.timer);this.translate()}})},// 结束录音并识别语音translate () {const that = this;_this.stopRecord({success: function (res) {// 翻译前停止录音that.localId = res.localId;that.getText()},fail: function (res) {// 调用停止失败}});},
一条龙下来就是这样啦，不过有几个需要注意的地方就是调用企微，确保签名认证通过了方可调用其他接口，遇到错误返回也没关系，根据错误码查找对应原因，一个个调试就可以啦
https://work./api/doc/90001/90148/90455
哈哈，第一次接触这块，踩了不少的坑，希望对大家有帮助
