1. index.html 引入微信官方提供的js文件
<script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
2.需要内嵌二维码的页面中
// template 代码
<div id="wxcode">
</div>
// methods 代码
createWxQrcode() {
// 生成微信登录二维码
var obj = new WxLogin({
self_redirect: true,
id: "wxcode", // 页面显示二维码的容器id
appid: "wxbdc5610cc59c1631", // 微信官方提供的测试id
scope: "snsapi_login",
redirect_uri: encodeURI("https://passport.yhd.com"), // 微信官方中的测试地址
state: "bind",
style: "black",
href: "",
});
}
// mounted中挂载
mounted() {
this.createWxQrcode();
},
3.修改默认样式,微信登录和底部文字都是默认和二维码一起生成的。
步骤:
>样式css代码转为Base64,转换网站:base64解码 base64编码 在线base64解码/编码工具 (ip138.com)
>转换后的编码放入,obj中的href选项. href格式: 'data:text/css;base64, 转换后的代码'
createWxQrcode() {
// 生成微信登录二维码
var href = 'data:text/css;base64,LmltcG93ZXJCb3gge2Rpc3BsYXk6IGZsZXg7fQouaW1wb3dlckJveCAucXJjb2RlIHt3aWR0aDogMjMycHg7IGhlaWdodDogMjMycHh9Ci5pbXBvd2VyQm94IC50aXRsZSB7ZGlzcGxheTogbm9uZTt9Ci5pbXBvd2VyQm94IC5pbmZvIHtkaXNwbGF5OiBub25lO30KLnN0YXR1c19pY29uIHtkaXNwbGF5OiBub25lfQ=='
var obj = new WxLogin({
self_redirect: true,
id: "wxcode",
appid: "wxbdc5610cc59c1631",
scope: "snsapi_login",
redirect_uri: encodeURI("https://passport.yhd.com"),
state: "bind",
style: "black",
href: href, // 这里修改微信二维码默认样式
});
},
改了一半的截图:
下面的提示字可用这行代码转为Base64去除: .impowerBox .info {display: none;}
最终结果:
微信官方文档地址:准备工作 | 微信开放文档 (qq.com)