准备工作

1.网站需要已备案

2.需要认证企业公众号

3.公众号绑定安全域名并授权对应的权限（如扫码）

开发

以微信扫一扫功能为例

引入sdk

可以通过 meta 或者 npm 引入

 <script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

或

npm i weixin-js-sdk

获取签名信息

签名获取流程：

1. 前端请求签名
   • 向后端发送请求获取签名信息
   • 通常需要传递当前页面URL作为参数（这里有个坑，ios 必须要使用第一次进入时的 url）
2. 后端生成签名
   • 使用微信公众号的 appid 和 appsecret 获取 access_token
   • 通过 access_token 获取 jsapi_ticket
   • 结合时间戳、随机字符串、URL生成签名
3. 返回给前端使用

初始化

基础示例

// 获取签名的通用方法
async function getWxConfig() {
  try {
    // 获取当前页面URL（需要去除hash部分），为了处理ios的问题可以在页面初始化时记录下当前 url 比如记录到 entryUrl 中
    const url = window.entryUrl||location.href.split('#')[0];
    
    // 请求后端获取签名配置
    const response = await fetch(`/api/wechat/signature?url=${encodeURIComponent(url)}`);
    const config = await response.json();
    
    // 配置微信JS-SDK
    wx.config({
      debug: false,
      appId: config.appId,
      timestamp: config.timestamp,
      nonceStr: config.nonceStr,
      signature: config.signature,
      jsApiList: [
        'updateAppMessageShareData',
        'updateTimelineShareData'
        // 根据需要添加其他接口
      ]
    });
    
    wx.ready(() => {
      console.log('微信JS-SDK配置成功');
      // 在这里调用API
    });
    
    wx.error((res) => {
      console.error('微信JS-SDK配置失败:', res);
    });
    
  } catch (error) {
    console.error('获取微信签名失败:', error);
  }
}

// 调用方法
getWxConfig();

使用

// 获取签名并调用扫一扫功能
async function initWxScan() {
  try {
    // 先获取微信配置
    await getWxConfig();
    
    // 监听微信SDK准备就绪
    wx.ready(() => {
      console.log('微信JS-SDK配置成功，可以调用API');
      
      // 调用扫一扫功能
      scanQRCode();
    });
    
  } catch (error) {
    console.error('初始化微信SDK失败:', error);
  }
}

// 扫一扫功能
function scanQRCode() {
  wx.scanQRCode({
    needResult: 1, // 0表示直接返回扫描结果，1表示显示扫描结果页面
    desc: 'scanQRCode',
    success: function (res) {
      // 扫描成功的回调
      const result = res.resultStr; // 扫描结果
      console.log('扫描结果:', result);
      
      // 处理扫描结果
      handleScanResult(result);
    },
    fail: function (error) {
      console.error('扫描失败:', error);
      // 可以根据错误码处理不同情况
      if (error.errMsg.includes('cancel')) {
        console.log('用户取消了扫描');
      }
    },
    complete: function () {
      console.log('扫描操作完成');
    }
  });
}

// 处理扫描结果
function handleScanResult(result) {
  // 根据业务需求处理扫描结果
  alert('扫描结果: ' + result);
  
  // 示例：如果是URL则跳转
  if (result.startsWith('http')) {
    if (confirm('检测到链接，是否打开?')) {
      window.location.href = result;
    }
  }
}

// 调用初始化
initWxScan();

封装

class WechatSDKManager {
  constructor() {
    this.isReady = false;
  }
  
  // 初始化微信SDK
  async init() {
    try {
      const url = window.entryUrl||location.href.split('#')[0];
      const response = await fetch(`/api/wechat/signature?url=${encodeURIComponent(url)}`);
      const config = await response.json();
      
      return new Promise((resolve, reject) => {
        wx.config({
          debug: false,
          appId: config.appId,
          timestamp: config.timestamp,
          nonceStr: config.nonceStr,
          signature: config.signature,
          jsApiList: [
            'scanQRCode',
            'chooseImage',
            'uploadImage'
            // 根据需要添加更多接口
          ]
        });
        
        wx.ready(() => {
          this.isReady = true;
          console.log('微信JS-SDK准备就绪');
          resolve();
        });
        
        wx.error((res) => {
          console.error('微信JS-SDK配置失败:', res);
          reject(new Error(res.errMsg));
        });
      });
    } catch (error) {
      throw new Error('初始化微信SDK失败: ' + error.message);
    }
  }
  
  // 调用扫一扫
  scanQRCode(options = {}) {
    return new Promise((resolve, reject) => {
      if (!this.isReady) {
        reject(new Error('微信SDK尚未准备好'));
        return;
      }
      
      wx.scanQRCode({
        needResult: options.needResult !== undefined ? options.needResult : 1,
        scanType: options.scanType || ["qrCode", "barCode"],
        success: (res) => {
          resolve(res.resultStr);
        },
        fail: (error) => {
          reject(error);
        }
      });
    });
  }
}

// 使用示例
const wechatManager = new WechatSDKManager();

function isIOS() {
  return /iPhone|iPad|iPod/i.test(navigator.userAgent)
}
// 页面加载后初始化
document.addEventListener('DOMContentLoaded', async () => {
  try {
    if (isIOS()) {
      if (!window.entryUrl) {
        window.entryUrl = location.href.split('#')[0]
      }
    }
    await wechatManager.init()
    console.log('微信SDK初始化完成')
  } catch (error) {
    console.error('微信SDK初始化失败:', error)
  }
})

// 点击按钮调用扫一扫
document.getElementById('scanBtn').addEventListener('click', async () => {
  try {
    const result = await wechatManager.scanQRCode({
      needResult: 1,
      scanType: ["qrCode"]
    });
    
    console.log('扫描结果:', result);
    // 处理扫描结果
    handleScanResult(result);
  } catch (error) {
    console.error('扫描失败:', error);
    if (error.errMsg && !error.errMsg.includes('cancel')) {
      alert('扫描失败，请重试');
    }
  }
});