官方文档链接: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",
})