一、总体流程
1. 公司注册微信开放平台账号，并认证开发者资质（需要300块，只用交一次）；
2. 创建网站应用，获取AppID和AppSecret；
3. 前端在登录页嵌入微信二维码，并将扫码成功后重定向携带的code传给后端；
4. 后端调用微信接口，先获取access_token，再获取用户信息（包含昵称、头像、UnionID）；
5. 判断扫码用户是否关联网站账号（UnionID + 手机号 + 网站账号，三者关联）；
6. 没有关联就是首次登录，需要绑定手机号并发送短信验证码（证明手机号真实性）。
graph LR
微信扫码 --> 获取微信用户信息 --> 允许 -- 首次 --> 输入手机号绑定 --> 发送短信验证码 --> 进入首页
二、前端代码
<div id="wxqrcode-container"></div>;
if (WxLogin) {
const origin = location.origin;
// 重复调用可以刷新二维码
new WxLogin({
self_redirect: false, // 不改
id: 'wxqrcode-container', // 二维码容器的id
appid: APP_ID, // 网站应用的AppID
scope: 'snsapi_login', // 不改
redirect_uri: encodeURI(`${origin}/login`), // 重定向地址，通常是登录页地址（注意域名必须和网站应用的授权回调域名一致）
state: '', // 重定向要带的参数，可以防止csrf攻击（加载二维码前从后端拿state值，扫码后再将state和code一起传回后端，后端验证state是否相同）
style: 'black', // 文字颜色，只有黑白
href: `${origin}/wxqrcode.css`, // 二维码的样式文件
});
}
const code = location.search.split('code')?.[1]?.slice(1);
if (code) {
// TODO: 将code传给后端
}
三、微信不同应用间的信息互通
网站既有pc站点也有对应的小程序，那在小程序登录后，pc还需要重新绑定手机号吗？
不需要。利用UnionID机制就能实现用户信息互通，因为只要是同一个微信开放平台账号下的移动应用、网站应用、公众号、小程序，用户的UnionID是唯一的（即同一用户，对同一个微信开放平台下的不同应用，UnionID是相同的）。
网站应用最后获取的用户信息包含UnionID；小程序通过wx.login获取用户的UnionID。
