vue调用企业微信JS-SDK实现语音识别功能
1.前期准备
使用别人的东西我们第一步就是到对应官方文档熟悉使用流程。https://open.work.weixin.qq.com/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=https://api.sixeco.com/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,// 必填,企业微信的corpID
timestamp: 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 = false
that.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.localId
clearInterval(that.timer);
this.translate()
}
})
},
// 结束录音并识别语音
translate () {
const that = this;
_this.stopRecord({
success: function (res) {
// 翻译前停止录音
that.localId = res.localId;
that.getText()
},
fail: function (res) {
// 调用停止失败
}
});
},
一条龙下来就是这样啦,不过有几个需要注意的地方就是调用企微,确保签名认证通过了方可调用其他接口,遇到错误返回也没关系,根据错误码查找对应原因,一个个调试就可以啦
https://work.weixin.qq.com/api/doc/90001/90148/90455
哈哈,第一次接触这块,踩了不少的坑,希望对大家有帮助