企业微信小程序vue项目调用扫一扫接口

真的是折腾几天，终于找到了那个bug

先是正常的操作-初始化配置

// 初始化企业微信配置
    initWeChatConfig() {
      let url = encodeURIComponent(window.location.href.split('#')[0])
      getRequest(
        this.baseUrl,
        '你的接口url=' + decodeURIComponent(url)
      )
        .then((res) => {
          console.log(res.data)
          // 处理成功情况
          if (res.status == 200) {
            wx.config({
              beta: true, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题
              debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
              appId: res.data.appId, // 必填，公众号的唯一标识
              timestamp: res.data.timestamp, // 必填，生成签名的时间戳    <%= Html.Encode(ViewData["timestamp" ]) %>
              nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
              signature: res.data.signature, // 必填，签名
              jsApiList: ['checkJsApi', 'scanQRCode'], // 必填，需要使用的JS接口列表, 这里只需要调用扫一扫
            })
          }
        })
        .catch(function (error) {
          // 处理错误情况
          console.log(error)
        })
    },

 点击扫码二维码--这里需要注意，使用箭头函数的方式接收回调，(res) => {}，之前的H5代码复制过来function (res) {}，这样的方式接收不到回调，不知道啥原因，但是用箭头函数就成功了

scan() {
      wx.ready(() => {
        wx.checkJsApi({
          //判断当前客户端版本是否支持指定JS接口
          jsApiList: ['scanQRCode'],
          success: (res) => {
            // 以键值对的形式返回，可用true，不可用false。如：{"checkResult":{"scanQRCode":true},"errMsg":"checkJsApi:ok"}
            if (res.checkResult.scanQRCode != true) {
              alert('抱歉，当前客户端版本不支持扫一扫')
            } else {
              wx.scanQRCode({
                desc: 'scanQRCode desc',
                needResult: 1, // 默认为0，扫描结果由企业微信处理，1则直接返回扫描结果，
                scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是条形码（一维码），默认二者都有
                success: (res) => {
                  var result = res.resultStr //当needResult为1时返回处理结果
                  this.onSearch(result)//处理回调的函数
                },
                error: (res) => {
                  if (res.errMsg.indexOf('function_not_exist') > 0) {
                    alert('版本过低请升级')
                  }
                },
              })
            }
          },
          fail: function (res) {
            //检测getNetworkType该功能失败时处理
            alert('checkJsApi error', res)
          },
        })
      }) //wx.ready结束

      wx.error((res) => {
        alert('错误信息:' + JSON.stringify(res))
      })
    },

然后就是最最最重要的！！！！！一直失败的原因

因为是企业微信登陆，所以在路由中会记录登录的code，因为这个code导致接口返回的config签名一直不匹配，一直报错{"errCode":2,"err_Info":"invalid signature more info at https://
open.work.weixin.qq.com/ devtool/query?e=40093", "errMsg":"config:fail"}，签名不匹配。

！！！！！

还有一个重要的地方，这个删除路由参数，要在扫码的页面删除，不能在menu什么页面删除，那样无效，在扫码的页面created(){}中删除路由参数（我是都给删了，没有试只删除一个能不能成功）

let currentUrl = new URL(window.location.href)
    // 检查 URL 中是否有 `state`和‘code’ 参数并删除
    if (currentUrl.searchParams.has('state')) {
      currentUrl.searchParams.delete('state')
    }
    if (currentUrl.searchParams.has('code')) {
      currentUrl.searchParams.delete('code')
    }
    // 将更新后的 URL 重载到浏览器中
    window.location.href = currentUrl.href

好了，困扰了2天的bug终于完成啦✅，完结，撒花🎉🎉🎉