vue调用企业微信JS-SDK实现语音识别功能

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
哈哈，第一次接触这块，踩了不少的坑，希望对大家有帮助