VUE项目获取微信二维码 (返回了的是一个html)

微信官网  

微信开放平台

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;

}