基于vue做微信公众号项目，调用微信的扫一扫接口_ts vue3 微信公众号 扫一扫 pnpm install weixin-js-sdk

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

npm install weixin-js-sdk --save
1

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

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配置错误，会弹出窗口哪里错误，然后根据微信文档查询即可。
    });
  },
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

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

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