前端基于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.localId
            clearInterval(that.timer);
          }
        })
      },
      // 合并
      merge() {
        let that = this
        this.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 // 返回音频的服务器端ID
            that.axios({
              method: 'post',
              url: 'http://my.service.com/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接口调用就介绍到这里了，新手初写，希望能帮助到大家，也请大家多多指导