微信扫一扫_微信扫一扫接口-优快云博客

进入：微信开放文档，引入 jssdk 需要的 js 文件。在项目入口 js文件，直接引入

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://res.wx.qq.com/open/js/jweixin-1.6.0.js';
document.head.appendChild(script);
// 通过config接口注入权限验证配置
function getWxInfo() {
  if (window.location.href.indexOf('localhost') > -1) return
  var url = window.location.href
  get('/message/generateSdkParam?url=' + url,).then((res) => {
    if (res.data.data) {
      window.wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: res.data.data.appid, // 必填，公众号的唯一标识
        timestamp: res.data.data.timestamp, // 必填，生成签名的时间戳
        nonceStr: res.data.data.nonceStr, // 必填，生成签名的随机串
        signature: res.data.data.signature,// 必填，签名
        jsapi_ticket: res.data.data.jsapi_ticket,
        jsApiList: ['chooseImage', 'uploadImage', 'previewImage', 'downloadImage', 'getLocalImgData', 'scanQRCode'] // 必填，需要使用的JS接口列表
      });
    }
  })
}

getWxInfo()

jssdk 权限是否成功问题，通过查看控制台下的输出信息，以下表示引入成功
在需要扫一扫的页面点击入口调微信扫一扫的相关接口操作

// 最后在需要扫一扫的页面点击入口调   微信扫一扫的相关接口操作
scanQRCode = () => {
  console.log('scan')
  window.wx.error(function (res) {
    alert("出错了：" + res.errMsg);//这个地方的好处就是wx.config配置错误，会弹出窗口哪里错误，然后根据微信文档查询即可。
  });

  window.wx.ready(() => {
    // alert('wx ready');
    // window.wx.checkJsApi({
    //   jsApiList: ['scanQRCode'],
    //   success: function (res) {
    //
    //   }
    // });
    window.wx.scanQRCode({
      needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
      scanType: ["qrCode"], // 可以指定扫二维码还是一维码，默认二者都有
      success: (res) => {
        var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
        // alert("扫描结果："+result);
        location.href = result  // 返回要跳转的路由连接
      },
      fail(res) {
        console.log(res);
      },
    });
  });
}

另外：这里因为是在微信公众号中，所以需要本地调试，通过 NATAPP 参考：https://blog.youkuaiyun.com/weixin_42722953/article/details/89314903
cmd 启动（natapp.ext）：natapp -authtoken=XXXXXX
在这里插入图片描述
启动后会有一个本地映射的地址，浏览器地址栏后续可以直接通过 http://qzkpet.natappfree.cc 访问，每次生成的映射地址都是会变的，所以要重新加入到微信公众号后台，白名单中。