微信 JSSDK 扫描二维码踩坑记录：扫描成功回调请求指南

前端

2024-01-02 08:05:48

微信 JSSDK 扫描二维码：扫码回调请求常见问题

作为开发者，我们常常会使用微信 JSSDK 的强大功能来提升用户体验。其中，扫描二维码无疑是广受欢迎的一项功能。然而，在使用过程中，你可能也会和我一样遇到过一些恼人的问题，比如扫码成功后迟迟没有回调请求，或者返回的结果与预期不符。

问题诊断

经过一番排查，我发现了导致这些问题的两个主要原因：

1. 域设置不当： 微信 JSSDK 要求开发者绑定域名才能使用其功能。如果你绑定了错误的域名，就会导致回调请求无法发出。

2. HTTPS 协议问题： 微信 JSSDK 要求使用 HTTPS 协议。如果你的页面不是通过 HTTPS 访问，也会导致回调请求失败。

解决方案

针对这些原因，解决方法很简单：

1. 检查域名绑定： 确保你已经正确绑定了要使用 JSSDK 功能的域名。

2. 启用 HTTPS 协议： 将你的页面升级为 HTTPS 协议。

额外注意事项

除了上述解决方法外，以下注意事项也可以帮助你避免类似问题：

使用最新的 JSSDK 版本： 微信 JSSDK 会定期更新，建议使用最新的版本以确保功能和稳定性。
正确配置 config 参数： 在调用 JSSDK 接口之前，必须正确配置 config 参数，包括 appId、timestamp、nonceStr 和 signature。
使用 Promise： 微信 JSSDK 支持使用 Promise 处理回调，这可以简化代码结构和提高可读性。

代码示例

为了帮助你更好地理解如何解决这些问题，这里提供一个使用 Promise 处理 JSSDK 扫描二维码回调请求的代码示例：

wx.scanQRCode({
  needResult: 1,
  scanType: ["qrCode", "barCode"],
  success: (res) => {
    return new Promise((resolve, reject) => {
      const scanResult = res.resultStr;
      // 在这里处理扫描结果
      resolve(scanResult);
    });
  },
  fail: (err) => {
    // 在这里处理扫描失败的情况
  },
  complete: () => {
    // 在这里完成扫描操作
  },
});