1. 绑定域名(在公众号设置js接口安全域名);
    在微信公众号平台中配置安全域名: 公众号设置 - 功能设置 - JS接口安全域名
    域名规则:例:https://admin.serve.com.cn;填写:serve.com.cn;
    微信jssdk config:invalid signature 签名错误 ,就是域名没配置好;
  2. 引用js文件
npm install weixin-js-sdk --save

调用扫一扫的组件里面引用

3.获取微信签名以及其他需要

methods: {
  //点击上传扫描图片
  uploadScan(){
  //扫描的接口,扫描成功,我设置active为1,而且,扫描的div消失,上传药盒图片的div显示
     const that = this
     wx.scanQRCode({
      needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
      scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码,默认二者都有
      success: function (res) {
        console.log(res.resultStr,'扫描的结果~')
        const result = res.resultStr.split(',')[1]; // 当needResult 为 1 时,扫码返回的结果  scanCode
        that.scanCode = result
        that.$toast('您扫描成功,追溯码为' + result);
        that.uploadScanCode(result)
      },
      error:function(response){
      that.$toast(response);
    }
    });
  },
  getCofig(){
    const that = this
    const url = (window.location.href).split('#')[0]
    console.log(window.location.href,'这个是获取当前扫描的完整url~')
    axios.get(api.getTikect+'?url='+window.location.href)
      .then(function (res) {
        if(res.data.code  == '200'){
          console.log(res.data.data,'这个是获取调用扫描返回的参数?~~')
          //微信 的配置~~
          that.wxConfig(res.data.data.appid, res.data.data.timestamp,res.data.data.nonceStr, res.data.data.signature)
        }else{
          that.$toast(res.data.message)
        }
      })
      .catch(function (error) {
        console.log(error);
      }); 
  },

  //wx.config的配置
  wxConfig(appId,timestamp,nonceStr,signature){
    wx.config({
      debug: false, // 开启调试模式,
      appId: appId, // 必填,企业号的唯一标识,此处填写企业号corpid
      timestamp: timestamp, // 必填,生成签名的时间戳
      nonceStr: nonceStr, // 必填,生成签名的随机串
      signature: signature,// 必填,签名,见附录1
      jsApiList: ['scanQRCode','checkJsApi','translateVoice'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
    });
    
    wx.error(function (res) {
      alert("出错了:" + res.errMsg);//这个地方的好处就是wx.config配置错误,会弹出窗口哪里错误,然后根据微信文档查询即可。
    });
  },
},

5、具体的案列就如以上的了,扫描完成之后,就可以拿到扫描的结果了,

注意:如果参数都正确,还是报了"errMsg": “config:invalid signature”,那么很有可能是因为微信的缓存原因,可以把微信关掉,再重新进去项目里面,就可以正常操作了

Logo

前往低代码交流专区

更多推荐