【经验】如何集成微信扫码

sz_xd

本帖最后由二麻子于 2025-3-21 09:26 编辑

微信JS接口扫码集成
- 1、公众号配置JS安全域名
  - 在公众号后台，进入开发 - 接口权限，配置 JS 接口安全域名。该域名必须为项目的 HTTPS 域名，且需通过备案。
  - 公众号需要关联小程序，确保小程序已与公众号绑定。
- 2、项目引入微信JS SDK
  - 通过引入微信官方提供的 JS SDK 脚本文件，确保页面能够调用微信的 JS 接口。
    https://res.wx.qq.com/open/js/jweixin-1.6.0.js
    复制代码
- 3、获取票据并缓存到数据库中
  - 插件概述
    - 调用微信公众平台提供的接口，通过 appid 和 appsecret 获取 access_token。
    - 使用 access_token 获取 jsapi_ticket。
  - 实现要点
    - 使用计划任务每隔 1 小时刷新票据，确保在有效期（7200 秒）内更新。
    - 注意每个公众号每天调用 access_token 接口的次数限制（2000 次），使用计划命令定时更新票据并将其缓存到数据库，避免频繁请求。
  - 通过插件获取票据（这里的id 和秘钥是指公众号的id和秘钥）
- 4、前端获取签名
  - 前端调用后端接口，传递当前页面的 URL，后端根据票据、随机字符串、时间戳、URL 生成签名并返回前端。
  //前端使用JS命令获取当前页面的URL，提供给插件生成签名
  1. let currentUrl = window.location.href;
  复制代码
- 5、根据返回的签名进行SDK配置
  - 在前端调用JS方法完成微信 JS SDK 初始化配置（建议将代码封装到模版命令中复用），代码如下：
    //wxConfigData 为上一步插件返回的生成签名
    
    function initWeChatSDK(wxConfigData, debug = false) {
    
      return new Promise((resolve, reject) => {
    
    // 配置微信 JS-SDK
    
    wx.config({
    
       debug: debug, // 调试模式
    
       appId: wxConfigData.appId,
    
       timestamp: wxConfigData.timestamp,
    
       nonceStr: wxConfigData.nonceStr,
    
       signature: wxConfigData.signature,
    
       jsApiList: ['scanQRCode'] // 必填，需使用的 JS 接口列表
    
    });
    
    // 配置成功回调
    
    wx.ready(() => {
    
       console.log('微信 JS-SDK 配置成功');
    
       resolve(); // 返回成功的 Promise
    
    });
    
    // 配置失败回调
    
    wx.error((err) => {
    
       console.error('微信 JS-SDK 配置失败', err);
    
       reject(err); // 返回失败的 Promise
    
    });
    
      });
    
    }
    复制代码
- 6、调用微信JS扫码API
  调用扫码功能，并将扫码结果写入指定单元格，示例如下：
  1. wx.scanQRCode({
  2. needResult: 1, // 扫码结果直接返回
  3. scanType: ["qrCode", "barCode"], // 可扫描的类型
  4. success: function (res) {
  5. let scanResult = res.resultStr;
  6. // 将扫码数据写入单元格或存储到数据库
  7. console.log(scanResult);
  8. }
  9. });
  复制代码
- 参考链接：
  1. https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#2
  复制代码
  scan-code-signature-generation-command-1.0.0-jar-with-dependencies.zip (3 MB, 下载次数: 25)
  
  2025-3-20 17:20 上传
  点击文件名下载附件