---

上一篇文章讲到了如何根据不同的需求展示不同的弹框组件，这篇文章主要讲解如何设计网页的微信登录扫码功能。那么就开始吧！

---

在 public/index.html 的head标签中引入：

把文件中展示二维码图片的盒子上添加 id=“weixin” ,将来获取的微信二维码会以iframe的方式嵌入到这个盒子中：

在点击切换到微信登录的函数中添加如下代码：

把今天其他文件夹中的wxLoginStyle文件夹放到utils文件夹中，然后在这个wxLoginStyle目录下用node执行js文件（这个文件我没有放出来，需要的话可以找我要）：

得到：

把它填到上面的href属性，隐藏头部尾部。

最后调整页面iframe外层盒子的样式，使二维码居中。

完成至此已经可以进行扫码登录了。

如果扫码跳转的时候被谷歌浏览器被拦截，需要修改谷歌浏览器设置。

打开谷歌浏览器设置，搜索 “弹出式窗口和重定向”，选择“可以发现”。

扫码后，想要获取地址栏中的code，用获取即可。

有时由于性能问题，会出现code拿到但是不发起请求的问题。对于这种情况，可以为请求函数书写定时器，时间设置为100~200ms即可，同时，async的位置要调整：

当code返回400时，需执行以下逻辑：
1.提示用户进行重新扫码登陆
2.弹出登录框（打开登陆的模态窗口）

当code返回407时，代表手机号没有绑定，会返回一个uuid。只有积分商城中存储该手机号时，业务才会成功。因此，出现407错误后，我们应该引导用户去绑定手机号。故需要执行以下逻辑：

1.弹出提示框，提示用户手机号需绑定微信号
2.弹出登录框
3.保存uuid（绑定后用户输入手机号点击登录按钮时，发送登录请求时需携带uuid给后端）
4.清除浏览器url中的code

中的具体代码如下：

通过“手机绑定微信”接口，按“登录”按钮时，逻辑上会发生两件事：发起登录请求和绑定微信，依据是保存在localstorage中的uuid。

记得检查某些函数是否在该页面引入，譬如这里就要注意引入：

其他新增代码如下：

注：可获取当前路由地址。