前端基于vue企业微信JS-SDK语音识别功能开发（同公众号）

微信JS-SDK

前端需要实现一个功能，如录音，拍照，分享，地理位置等，前端想要实现这些功能的调用，必须要通过调用JS-SDK的方式来实现，那么如何使用呢，本文进行简单的介绍

1.前期准备

因为是第一次开发，看了很多文档，包括官方文档，看了很多遍，仍然是一头雾水，那些东西该前端配，哪些东西该后端做，没有一点概念。经过了一番与后端的尝试与合作，终于调用成功！

企业微信里有个应用与小程序，里面的自建应用开发同公众号开发，后端设置略微有些不同

后端：根据企业微信里我的企业选项最下面的企业id和应用与小程序里的自建应用的Secret获取token，并计算签名等一系列操作，具体官方文档网上都很详细，这里就不多说；

配置

需要在企业微信的自建程序里设置域名：此域名为前端写代码的外网网页域名，也就是最后呈现的网页域名（前端写完代码给后端，后端根据项目地址我的是gitLab配置外网域名），第一次配置需要启动，所以要和后端配合好，启动时有一个txt文件，前端需要打包给后端，后端配置到根目录并确保可以访问到txt文件

说明：此域名的配置是必要的，只有配置此域名才可以使用此域名调用JS-SDK，可以使用微信开发者工具的公众号开发选项进行在线调试域名，注意：只可以调试你打包到线上的外网ip

前端代码撰写

安装并在组建里引入wx

import wx from 'weixin-js-sdk';const _this = wx;

要想在一个组件使用在当前组件引入就行，引入完成就是使用，在页面调用接口之前必须完成注册等逻辑，因为录音功能是手动触发执行，所以在vue中可以写个函数在mounted钩子函数中执行完成注册，代码如下：

methods: {getConfig() {const self=this;const data=self.qs.stringify({url: location.href.split('#')[0]});//需要传的地址为#前面的地址self.axios({method: 'post',url: '',//获取签名等信息的地址headers: {'Content-Type': 'application/json'},data:data //向服务端提供授权url参数，并且不需要#后面的部分}).then((res) => {let list = res.data.data;_this.config({debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: list.appId, // 必填，公众号的唯一标识timestamp: list.timestamp, // 必填，生成签名的时间戳nonceStr: list.noncestr, // 必填，生成签名的随机串signature: list.signature, // 必填，签名jsApiList: ['startRecord', //开始录音接口'stopRecord',// 停止录音接口'playVoice', //播放语音接口'pauseVoice',//暂停播放接口'stopVoice', //停止播放接口'uploadVoice',//上传语音接口'downloadVoice', //下载语音接口'onVoicePlayEnd', // 监听语音播放完毕api'translateVoice'] // 必填，需要使用的JS接口列表});_this.ready(() => {// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个// 客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调// 用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。})_this.error((res) => {// 这个地方的好处就是wx.config配置错误，会弹出窗口哪里错误，然后根据微信文档查询即可。})}).catch((error) => {// error})},// 开始录音start(e) {let that = this;that.stop();that.time = 0;if(!localStorage.rainAllowRecord || localStorage.rainAllowRecord !== 'true'){_this.startRecord({success: function () {that.timer = setInterval(() => {that.time++}, 1000)that.vicoeEnd()},fail: function () {// 开始录音失败},cancel: function () {// 用户拒绝授权录音}})}},// 停止录音stop() {let that = this_this.stopRecord({success: function (res) {if(that.time<0.5){return}// 暂停成功clearInterval(that.timer)that.localId = res.localId},fail: function (error) {// 停止失败}})},//取消录音判断isCancel(e) {this.cancel()},// 取消录音cancel() {_this.stopRecord({success: (res) => {// 取消录音成功},fail:function (error) {// 取消录音失败}})},// 60秒监听vicoeEnd() {let that = this_this.onVoiceRecordEnd({// 录音时间超过一分钟没有停止的时候会执行 complete 回调complete: function (res) {// 60秒停止录音that.localId = res.localIdclearInterval(that.timer);}})},// 合并merge() {let that = thisthis.axios({method: 'post',url: '',headers: {'Content-Type': 'application/json'},data: {url: location.href.split('#')[0]}}).then((ser) => {that.$refs.allRecord.src = ser.data}).catch((error) => {// error})},// 结束录音并识别语音translate () {const that = this;_this.stopRecord({success: function (res) {// 翻译前停止录音that.localId = res.localId;_this.translateVoice({localId: that.localId,complete: function (res) {// 调用翻译完成时}});},fail: function (res) {// 调用停止失败}});},// 上传语音upVoice() {let that = this_this.uploadVoice({localId: that.localId, // 需要上传的音频的本地ID，由stopRecord接口获得isShowProgressTips: 1, // 默认为1，显示进度提示success: function (res) {var apiUrl = window.location.href// 上传成功that.serverId = res.serverId // 返回音频的服务器端IDthat.axios({method: 'post',url: '/index.php/opcode/6002',headers: {'Content-Type': 'application/json'},data: {serverId: res.serverId,url: location.href.split('#')[0]}}).then((data) => {that.$refs.player.src = data.data}).catch((error) => {// error})}})}// 下载语音// downVoice () {// let that = this// _this.downloadVoice({//serverId: that.serverId, // 需要下载的音频的服务器端ID，由uploadVoice接口获得//isShowProgressTips: 1, // 默认为1，显示进度提示//success: function (res) {// // 下载成功// that.downLoadId = res.localId // 返回音频的本地ID//}// })// },// 模拟上传语音// fake () {// var apiUrl = window.location.href// this.axios({//method: 'post',//url: 'api',//headers: {'Content-Type': 'application/json'},//data: {// serverId: '',// url: apiUrl//}// }).then((res) => {// this.$refs.player.src = res.data//}).catch((error) => {// // error//})// }},

这里样式代码根据需要进行编写就行，哪个按钮需要调用录音开始，哪个按钮调用录音结束，哪个需要翻译，需要用到哪个功能，直接调用methods里面的对应方法即可，（如果调用其它JS-SDK，原理等同，注册时给jsApiList数组添加你需要的功能字段微信公众号API文档可查就可以引用了）， 需要对应方法执行成功后做的事情在对应方法里写就ok啦

是不是很简单呢，代码撰写完毕就是打包代码提交代码了，后台更新代码到线上，就可以看到效果了。注意：由于微信开发者工具是模拟调试，所以只能有一条模拟的录音结果返回，真正的语音及翻译结果还得发送网址到微信里打开查看

好了，微信JS-SDK接口调用就介绍到这里了，新手初写，希望能帮助到大家，也请大家多多指导

如果觉得《前端基于vue企业微信JS-SDK语音识别功能开发（同公众号）》对你有帮助，请点赞、收藏，并留下你的观点哦！