微信公众号扫一扫功能实现

Posted 2021-03-10

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

/* 
请求后台接口获取微信配置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;