微信官網??

微信開放平臺

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填寫編碼后的urlstate: 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 stringfunction base64_encode(file) {// read binary datavar bitmap = fs.readFileSync(file);// convert binary data to base64 encoded stringreturn '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;}

總結

以上是生活随笔為你收集整理的VUE项目获取微信二维码 (返回了的是一个html)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。