微信网页登录逻辑与实现
现在的网站开发，都绕不开微信登录（毕竟微信已经成为国民工具）。虽然文档已经写得很详细，但是对于没有经验的开发者还是容易踩坑。 所以，专门记录一下微信网页认证的交互逻辑，也方便自己日后回查： 加载微信网页sdk绘制登陆二维码：新tab页面绘制 / 本页面iframe绘制用户扫码登陆，前端跳入回调网址回调网址进一步做逻辑处理，如果是页内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.appendChild(script); });})();绘制登陆二维码根据《微信登陆开发指南》，将参数传递给window.WxLogin()即可。 ...