微信二维码登录网站应用（关键字：href 样式 重定向）

说起扫微信二维码登录网站应用，实践很多

我司项目最近处理了微信登录，作为一个前端小白，实在搞不懂微信流程

直接进入流程吧！

一，二维码的类型

1.内嵌式

下载微信官方的JDK,调用简单的函数则可以弹出iframe页面的二维码

wxLogin.js调用方式

2.弹出式

拼接微信的二维码api网址加上appid加上state

微信请求二维码的链接

微信官方文档对请求二维码参数的解释

二丶redirect_url解释（其实答案就在猜想里面）

身为前端可能会对这个多想，诸多猜测

1.为前端首页链接，根据get的重定向，将params获取到，将code和state发送到服务端，由服务端获取微信用户信息，完成后通过响应头设置重定向 ，定位到网站首页

2.为后端接口，直接将code和state发送到服务端，由服务端获取微信用户信息，完成后通过响应头设置重定向 ，定位到网站首页

3.我也是由此想通的，网页为服务端应用，由后端模板完成，当监听接口发送过来的state和code时，服务端获取微信用户信息，然后返回新的首页模板页面

（以上纯小白前端开发时的猜想，大佬饶命）

三丶state  解释

  如果后端state是加密了的，前端的state也需要加密，为了一致性，最好先请求服务端获取appid和state值，然后使用wxJDK，将服务端发来的appid和state填入，然后初始化出二维码。

四丶href  解释

   如果需要对二维码的样式调整，官方给出的建议是：使用外链的css文件进行调整（必须https协议）

当然，也可以使用base64对css样式进行编码，并放入"data:text/css;base64,"

放入我使用的："data:text/css;base64,LmltcG93ZXJCb3h7IHRleHQtYWxpZ246bGVmdH0KLmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDIwMHB4OyBtYXJnaW46MH0KLmltcG93ZXJCb3ggLnRpdGxlIHtkaXNwbGF5OiBub25lO30KLmltcG93ZXJCb3ggLmluZm8ge3dpZHRoOiAyMDBweDt9Ci5zdGF0dXNfaWNvbiB7ZGlzcGxheTogbm9uZX0KLmltcG93ZXJCb3ggLnN0YXR1cyB7dGV4dC1hbGlnbjogY2VudGVyO30="

需要调整的话就百度搜，base64在线编码   将"data:text/css;base64",  后面的code放入其中解码，然后可以进行调整，调整后依次放回"data:text/css;base64,"后面即可(如果样式失效，可以查看下面的常见错误)

五丶常见错误

   redirect_url：当初始化二维码时，会提示redirect_url有误。可能会是以下可能

                 appid错误

                 state后面跟了#redirect_url(我就是因为这个造成base64位css样式失效)

六丶wxLogin中的width和height

   大家可能对我wxJDK调用对象中的width和height感到疑惑，其实那是我自己封装的。因为业务有需求要先绑定后登录，所以需要一个小容器装载微信绑定的二维码。但微信wxJDK的iframe的宽高为300/400。占据区域过大。采用传入的宽高，可以达到自己想要的宽高

这个代码可以在network中将wxLoign.js源码保存成本地js进行修改

七丶迎点痛击

微信二维码登录最麻烦的是，会重定向造成页面刷新

这样的用户体验及其不佳，并且前端无法判断微信是否已绑定或者已登录

只能用刷新结果来确定

其实也是有办法解决的，因为使用wxJDK时，请求的二维码页面为微信封装好了的页面

在他的里面也有自己获取二维码的流程，如果使用服务端代替这些流程，就不用使用到微信的get重定向，使用post来处理登陆的流程，实现登录成功跳转和提醒

这点我是从大佬的博客看到的：（留不下地址，我也头痛。大家直接搜 无刷新微信扫码登录解决方案）

里面由无刷新微信扫码的demo和code。感谢到大佬的分享（虽然我没使用上，但内心渴望）

tip: 写这个文章，纯属被难倒的时候就很捉急，搜也搜不到有实质性的文章。所以想如果完成了就要写一个文章帮帮像自己这样的白白。期待下一次被难倒的偶遇吧

注：禁止直接搬运  请在有深入研究后借鉴