【笔记】微信网页登录逻辑与实现

现在的网站开发，都绕不开微信登录（毕竟微信已经成为国民工具）。虽然文档已经写得很详细，但是对于没有经验的开发者还是容易踩坑。

所以，专门记录一下微信网页认证的交互逻辑，也方便自己日后回查：

1. 加载微信网页sdk
2. 绘制登陆二维码：新tab页面绘制 / 本页面iframe绘制
3. 用户扫码登陆，前端跳入回调网址
4. 回调网址进一步做逻辑处理，如果是页内iframe绘制二维码，需要通知顶级页

?阅读更多系列文章 / 阅读原文?

微信网页SDK加载

在多人团队协作中，加载资源的代码需要格外小心。因为可能会有多个开发者在同一业务逻辑下调用，这会造成资源的重复加载。

处理方法有两种，第一种是对外暴露多余接口，专门check是否重复加载。但是考虑到调用者每次在加载前，都需要显式调用check()方法进行检查，难免会有遗漏。

所以采用第二种方法–设计模式中的缓存模式，代码如下：

// 备忘录模式: 防止重复加载
export const loadWeChatJs = (() => {
   
  let exists = false; // 打点
  const src = '//res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js'; // 微信sdk网址

  return () => new Promise((resolve, reject) => {
   
    // 防止重复加载
    if(exists) return resolve(window.WxLogin);
	
    let script = document.createElement('script');
    script.src = src;
    script.type = 'text/javascript';
    script.onerror = reject; // TODO: 失败时候, 可以移除script标签
    script.onload = () => {
   
      exists = true;
      resolve(window.WxLogin);
    };
    document.body.