vue组件中插入二维码的操作

引入

在 public/index.html 的head标签中引入：

<script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>

显示

给二维码一个可供显示的盒子

<div v-show="!isshow" id="weixin" class="qrcode">
     二维码
</div>

需要注意的是 ID 与 class 是需要进行绑定的

请求

二维码需要进行请求来获取,微信登录第一步：申请微信登录二维码

在相关的事件里进行绑定

   let _this = this;
   new WxLogin({
      id: "weixin", 
      appid: "wx67cfaf9e3ad31a0d",  // 这个appid要填死
      scope: "snsapi_login",
      redirect_uri: "https://sc.wolfcode.cn/cms/wechatUsers/shop/PC",
      state: encodeURIComponent(window.btoa("http://127.0.0.1:8080" + _this.$route.path)),
      href: "",
         });

解释:

1. redirect_uri : 扫码成功后重定向的接口

2. state : state填写编码后的url

3. href : 调用样式文件

样式调整

针对于二维码的css样式进行调整

步骤:

1. 在工具函数文件夹( untils )中创建一个新文件夹( wxLoginStyle )

2. 文件夹( wxLoginStyle )中新建一个css( wxLogin.css )进行样式管理与一个js( data-url.js )进行编译

3. 在css( wxLogin.css )中书写样式

4. 使用cmd来执行js文件( data-url.js )获取base64的格式

5. 把base64的格式相对路径导入new Weixin 的href中

js( data-url.js )

可以看出其返回了 css格式转化base64并且 log了函数执行结果

var fs = require('fs');
​
function base64_encode(file) {
    var bitmap = fs.readFileSync(file);
    return 'data:text/css;base64,' + new Buffer(bitmap).toString("base64");
}
console.log(base64_encode("./wxLogin.css"))

获得其中的地址

实例中引入相对应的绝对路径

new WxLogin({
      id: "weixin",
            ........
      // 调用样式文件
      href: "data:text/css;base64,LmltcG93ZXJCb3ggLmluZm8sLmltcG93ZXJCb3ggLnRpdGxlew0KICAgIGRpc3BsYXk6IG5vbmU7DQp9",
            });