微信官网
1.在 public/index.html 的head标签中引入:
<script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
2.把需要展示二维码图片的盒子上添加 id=“weixin” :
<div id="weixin" >
二维码
</div>
3.在点击切换到微信登录的函数中:
weixinClick(){// 点击切换微信扫码登录这一项,并向微信扫码登录
this.isShowForm=false;
// 申请微信登录二维码
let _this = this;
new WxLogin({
id: "weixin",
appid: "wx67cfaf9e3ad31a0d", // 这个appid要填死
scope: "snsapi_login",
// 扫码成功后重定向的接口
redirect_uri: "https://sc.wolfcode.cn/cms/wechatUsers/shop/PC",
// state填写编码后的url
state: encodeURIComponent(window.btoa("http://127.0.0.1:8080" + _this.$route.path)),
// 调用样式文件
href: "",
});
},
4.修改固定样式达到想要的效果
4.1 新建wxLoginStyle文件夹装有data-url.js 和 wxlogin.css
****data-url.js****
var fs = require('fs');
// function to encode file data to base64 encoded string
function base64_encode(file) {
// read binary data
var bitmap = fs.readFileSync(file);
// convert binary data to base64 encoded string
return 'data:text/css;base64,'+new Buffer(bitmap).toString('base64');
}
console.log(base64_encode('./wxlogin.css'))
*****wxlogin.css 文件*****
.impowerBox .title, .impowerBox .info{
display: none;
}
.impowerBox .qrcode{
margin-top: 20px;
}