vue项目在微信公众号中调用微信扫一扫

本文参考官方文档

步骤一：绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
备注：登录后可在“开发者中心”查看对应的接口权限。

步骤二：引入JS文件

在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.6.0.js
如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）。
备注：支持使用 AMD/CMD 标准模块加载方法加载

步骤三：通过config接口注入权限验证配置

// 生成签名
// jsapi_ticket 后台获取
// noncestr 随机字符串
// timestamp 当前时间戳
// url 当前url，不算hash值
// 按照以上顺序以键值对的形式连接起来（所有属性值均为原始值），在通过sha1加密形成签名。
wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: appId, // 必填，公众号的唯一标识
        timestamp: timestamp, // 必填，生成签名的时间戳
        nonceStr: nonceStr, // 必填，生成签名的随机串
        signature: signature, // 必填，签名
        jsApiList: ["scanQRCode"], // 必填，需要使用的JS接口列表
});
wx.ready((res) => {
        console.log("成功");
        // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
        this.isWxConfig = true;  // 放开扫码按钮限制
});
wx.error((res) => {
        console.log("失败");
        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查    看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});

步骤四：调用微信扫一扫

if (this.isWxConfig) {
  wx.scanQRCode({
    needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
    scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
    success: (res) => {
      var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
      console.log(res.resultStr);
   },
  });
}