一、微信开发者工具下载

• 微信开发者工具是微信官方提供的开发工具，可以用来开发微信小程序、公众号网页等。
• 下载地址

二、微信网页扫码登录

• 微信网页扫码登录是微信官方提供的一种登录方式，用户只需要在微信客户端中打开网页，扫码登录即可。
• 微信官方文档
• 生成带参数的二维码
• 参考文档

三、web网站扫码登录

• 参考文档

• 后台需要做好俩个接口：

1. 获取微信ticket凭证和id的接口 ：xxx/weixin_qrcode_ticket
2. 轮训验证登录，根据用户openid获取用户信息、生成token、保存token到数据库的接口：xxx/check_login

• 前端实现

// React + Typescript 示例
export default function MxLogin() {
  const [wechat, setWechat] = useState<{ ticket: string; id: string }>({
    ticket: '',
    id: ''
  })
  const [checkLogin, setCheckLogin] = useState(false)

  useEffect(() => {
    initWechatQrcode()
  }, [])

  // 轮训验证登录
  useEffect(() => {
    let intervalId = null

    if (!checkLogin) {
      return () => {
        intervalId && clearTimeout(intervalId)
      }
    }

    // 轮训是否有扫码登录
    const fetchData = async () => {
      try {
        const response = await axios.post('xxx/check_login', { id: wechat.id })
        // todo 设置用户信息与token
      } catch (error) {
        // todo 处理错误
      }
    }

    fetchData()
    intervalId = setInterval(fetchData, 1000)
    return () => {
      intervalId && clearTimeout(intervalId)
    }
  }, [checkLogin])

  // 获取微信 ticket 凭证 和 id
  const initWechatQrcode = async () => {
    axios.post('xxx/weixin_qrcode_ticket')
      .then((res: any) => {
        if (res.ticket) {
          const wechatUrl =
            'https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket='
          setWechat({ ticket: wechatUrl + res.ticket, id: res.id })
          setCheckLogin(true)
          return
        }
        message.error('获取微信授权失败！')
      })
      .catch(() => {
        message.error('获取微信授权失败！')
      })
  }

  return (
    <>
      <div className="login-wechat-qrcode">
        {wechat.ticket && <img src={wechat.ticket} />}
      </div>
    </>
  )
}