PC端微信二维码登录

官方文档链接：https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html

1.使用：

// html：
<div id="qrcode"></div>
// js：
let obj = new WxLogin({
        self_redirect: false,
        id: "qrcode",
        appid: 'xxx',
        scope: "XXXX",
        redirect_uri: '',
        state: Math.ceil(Math.random()*1000), // 如果样式不生效，请将state改为random形式
        style: "black",
        href: "",
      })

2.样式更改：

站长工具：http://tool.chinaz.com/Tools/Base64.aspx
①写样式，例如：

.impowerBox {width: 180px!important;}
.impowerBox .qrcode {width: 200px;}
.impowerBox .title {display: none;}
.impowerBox .info{display: none;}
.impowerBox .wrp_code img{width: 180px;margin: 0;border: none;}
.impowerBox .status {text-align: center;} 

②将样式复制到站长工具中的编码内容中，进行base64编码：

③将最后编码完成的数据放在href中（注意编码内容前面要加上 data:text/css;base64,），例如：

let obj = new WxLogin({
        self_redirect: false,
        id: "qrcode",
        appid: 'xxx',
        scope: "XXXX",
        redirect_uri: '',
        state: Math.ceil(Math.random()*1000), // 如果样式不生效，请将state改为random形式
        style: "black",
        href: "data:text/css;base64,LmltcG93ZXJCb3gge3dpZHRoOiAxODBweCFpbXBvcnRhbnQ7fQ0KLmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDIwMHB4O30NCi5pbXBvd2VyQm94IC50aXRsZSB7ZGlzcGxheTogbm9uZTt9DQouaW1wb3dlckJveCAuaW5mb3tkaXNwbGF5OiBub25lO30NCi5pbXBvd2VyQm94IC53cnBfY29kZSBpbWd7d2lkdGg6IDE4MHB4O21hcmdpbjogMDtib3JkZXI6IG5vbmU7fQ0KLmltcG93ZXJCb3ggLnN0YXR1cyB7dGV4dC1hbGlnbjogY2VudGVyO30g",
      })

3.效果：