🎉🚀React封装微信扫码登录组件

我们经常遇到这种网站，像csdn就是这样，扫一个码去关注公众号，得到你的微信的、在这个公众号的、唯一的openid作为标识符，去进入网站。

这样做的好处就是做私域运营的话，增长了粉丝又区分了粉丝，又登录到位了、阻隔了闲杂人等。

二维码渲染

获取二维码阶段：后端向微信服务器请求获取临时二维码（包含唯一标识和图片数据），前端将base64格式的二维码图片展示给用户。

后端用nodejs来实现，大概代码如下：

js 复制代码

// 用这个库去发http请求
const axios = require('axios');

// 取微信二维码，然后返回去给前端用
async function getWechatQRCode() {
  const response = await axios.get('https://api.weixin.qq.com/sns/qrcode/create', {
    params: {
      appid: '微信应用的唯一标识（用公众号的appid）',
      redirect_uri: '授权后的回调地址（用扫码授权后的回调地址）',
      scope: 'snsapi_login',
      state: '随机值（用来防止csrf的）'
    }
  });
  
  return {
    ticket: response.data.ticket, // 二维码唯一标识
    qrUrl: response.data.base64     // 二维码图片base64
  };
}

前端去拿二维码，渲染到页面上：

js 复制代码

// React组件示例------登录页（代码如下所示）
const [qrCode, setQrCode] = useState('');
const [ticket, setTicket] = useState('');

useEffect(() => {
  const fetchQRCode = async () => {
    const response = await fetch('/api/wechat/qrcode'); // 调后端的获取二维码接口
    const data = await response.json();
    setQrCode(data.qrUrl); // 获取二维码渲染到页面
    setTicket(data.ticket); // 设置唯一值
  };
  
  fetchQRCode();
}, []);

轮询检查

扫码确认阶段：用户扫码后，微信服务器会通知我们的后端服务，前端通过轮询或长连接不断检查扫码状态。

js 复制代码

// waiting, scanned, confirmed, expired
const [scanStatus, setScanStatus] = useState('waiting'); 

useEffect(() => {
  const intervalId = setInterval(async () => {
    const response = await fetch(`/api/wechat/check-status?ticket=${ticket}`);
    const { status, userInfo } = await response.json();
    
    setScanStatus(status);
    
    if (status === 'confirmed') {
      clearInterval(intervalId);
      handleLoginSuccess(userInfo); // 执行成功回调
    }
  }, 1000); // 每1秒检查一次

  return () => clearInterval(intervalId);
}, [ticket]);

登录完成阶段：当前端检测到用户已扫码确认，触发登录成功流程，跳转或更新用户状态

js 复制代码

const handleLoginSuccess = (userInfo) => {
  setUser(userInfo);
  localStorage.setItem('token', userInfo.token);
  navigate('/dashboard');
};

封装扫码组件

这里讲一下为啥要封这个微信扫码组件？

第一点 ，一般作为后台的扫码登录入口；
第二点 ，比如说用户换绑关联更新用户信息；
第三点，一般要用扫码登录去获取用户信息的地方。

所以就封装成一个组件，用的时候引用就好了。

通用性设计

将微信扫码功能封装为独立React组件时，关键在于保持高度通用性。组件不应只服务于登录场景，而应该适用于：

用户登录
账号绑定
身份验证
任何需要微信用户确认的场景

回调机制

通过onSuccess等回调函数将业务逻辑与组件解耦：

jsx 复制代码

<WechatQRLogin 
  onSuccess={(userData) => {
    // 登录成功处理
    // 可以是跳转、更新状态等
  }}
  onError={(error) => {
    // 错误处理
  }}
/>

内置状态管理

组件内部应处理好以下状态：

二维码获取与刷新
轮询检查扫码状态
超时处理
错误重试机制

二维码刷新策略

实现自动刷新机制，当二维码过期时：

js 复制代码

const refreshQR = () => {
  // 重新获取二维码逻辑
  // 通常设置定时器在二维码快过期时自动刷新
}

样式可定制化

通过props允许外部控制样式：

jsx 复制代码

<WechatQRLogin 
  qrStyle={{ width: 200, height: 200 }}
  refreshBtnStyle={{ color: '#1890ff' }}
/>

总结

这个组件要做得简单好用，微信登录流程归它管，业务逻辑交给外面的回调处理，别混在一起。各种出错情况都得考虑到，比如网络问题、超时或者用户中途取消，不能动不动就崩了。

轮询频率要合理，别太频繁，省得浪费资源。用 TypeScript 写好类型定义，让调用的时候有提示，少踩坑。最后文档得写清楚，少讲概念，多给例子，让人一看就知道怎么用。

通过这种封装方式，我们可以在任何需要微信扫码的场景中快速复用该组件，只需关注业务逻辑处理，提高了开发效率和代码质量。

🎉🚀React封装 微信扫码 登录组件

二维码渲染

轮询检查

封装扫码组件

通用性设计

回调机制

内置状态管理

二维码刷新策略

样式可定制化

总结

🎉🚀React封装微信扫码登录组件