前阵做微信公众号开发扫一扫功能,碰到一些坑记录下,废话少说直接上代码。

/* 
请求后台接口获取微信配置responseData,入参含appId、applicationId、url
url 为当前页面url 注意必须如:https://gzh.yunfuw.cn/account/add?     code=061wrY680jrpQE1o2y980E03780wrY6l&state=cloud_payment
*/

wx.config({
  debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
  appId:'', // 必填,公众号的唯一标识
  timestamp: responseData.timestamp, // 必填,生成签名的时间戳
  nonceStr: responseData.noncestr, // 必填,生成签名的随机串
  signature: responseData.sign, // 必填,签名,见附录1
  jsApiList: ["scanQRCode"] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});

wx.ready(function () {
  wx.scanQRCode({
    needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
    scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码,默认二者都有
    success: function (res) {
      setTimeout(() => {
        // do something
        var result = res.resultStr.indexOf(",") > -1 ? 
                             res.resultStr.split(",")[1] : 
                                 res.resultStr;
      }, 2000);
    }
  });
});

遇到的坑

  1. 要把服务器IP,从微信公众号后台,添加到IP白名单中。否则微信授权失败,无法调用微信扫一扫功能

  2. 在SPA(单页面应用)中,跳转到含有扫一扫功能的页面时,不能用push 方法去跳转,要用window.location.href去跳转页面。否则跳转到的页面url不会含code,导致微信授权失败,无法调用微信扫一扫功能。

  3. 扫一扫成功回调success里面要添加setTimeout ,否无法获取到返回结果

  4. 扫一扫成功回调success中的响应结果res ,在不用手机里面返回结果可能不同,需要做处理下返回结果

    res.resultStr.indexOf(",") > -1 ? res.resultStr.split(",")[1] : res.resultStr;

    微信公众号扫一扫功能实现_第1张图片