关于微信扫码登陆页面

关于微信扫码登陆页面

第一步：注册微信开放平台，创建应用，注意 appid 下面主要的使用的appid

第二步：前端index.html引用wxlogin.js

  <script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>

第三步 ：创建一个空的div

 <div class="qrImgBox" id="comWx_img"></div>

第四步调用二维码生成方法

            var obj = new WxLogin({
                id: "comWx_img",
                appid: appid,//这里是你的应用的appid
                scope: "snsapi_login",
                redirect_uri: encodeURIComponent(url),//url为你要重定向的地址
                state: Math.ceil(Math.random() * 1000),
                style: "black",
                href:
	                    "data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7bWFyZ2luLXRvcDogMjBweDsgaGVpZ2h0OiAxOTBweDsgd2lkdGg6IDE5MHB4OyBib3JkZXI6IG5vbmU7fQ0KLmltcG93ZXJCb3ggLnRpdGxlIHtkaXNwbGF5OiBub25lO30NCi5pbXBvd2VyQm94IC5pbmZvIHt3aWR0aDogMjIwcHg7fQ0KLnN0YXR1c19pY29uIHttYXJnaW4tdG9wOiAtMTBweDsgZGlzcGxheTogbm9uZTt9DQouaW1wb3dlckJveCAuc3RhdHVzIHt0ZXh0LWFsaWduOiBjZW50ZXI7IGNvbG9yOiAjNzM3Qzg0O30NCi5pbXBvd2VyQm94IC5zdGF0dXNfc3VjYyAuc3RhdHVzX3R4dCBwIHtjb2xvcjojMzMzMzMzOyB0b3A6IDEwcHg7IGZvbnQtc2l6ZTogMTRweDt9DQouaW1wb3dlckJveCAuc3RhdHVzX3N1Y2MgLnN0YXR1c190eHQgaDQge2ZvbnQtc2l6ZTogMTNweDtkaXNwbGF5OiBub25lO30NCg=="//生成的二维码的样式
            });

第五步：扫码之后在重定向的地址后面会拼接上重定向后code,通过监听地址栏的变化完成登录过程