说起扫微信二维码登录网站应用，实践很多
我司项目最近处理了微信登录，作为一个前端小白，实在搞不懂微信流程
直接进入流程吧！
一，二维码的类型
1.内嵌式
下载微信官方的JDK,调用简单的函数则可以弹出iframe页面的二维码
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。占据区域过大。采用传入的宽高，可以达到自己想要的宽高
七丶迎点痛击
微信二维码登录最麻烦的是，会重定向造成页面刷新
这样的用户体验及其不佳，并且前端无法判断微信是否已绑定或者已登录
只能用刷新结果来确定
其实也是有办法解决的，因为使用wxJDK时，请求的二维码页面为微信封装好了的页面
在他的里面也有自己获取二维码的流程，如果使用服务端代替这些流程，就不用使用到微信的get重定向，使用post来处理登陆的流程，实现登录成功跳转和提醒
这点我是从大佬的博客看到的：（简书留不下地址，我也头痛。大家直接搜 无刷新微信扫码登录解决方案）
里面由无刷新微信扫码的demo和code。感谢到大佬的分享（虽然我没使用上，但内心渴望）
tip: 写这个文章，纯属被难倒的时候就很捉急，搜也搜不到有实质性的文章。所以想如果完成了就要写一个文章帮帮像自己这样的白白。期待下一次被难倒的偶遇吧
注：禁止直接搬运 请在有深入研究后借鉴
