纯前端实现二维码生成(原生/vue方法)（超简单）

前言

我们借用了qrcode.js插件，这个插件可以帮助我们生成二维码，超简单超好用

下面是我生成了一个主页的二维码，大家可以扫码查看效果

插件引入

1.本地文件引入

本地引入依赖包地址：下载地址

 1.首先引入插件，这里我是script标签引入的，如果用vue直接全局引入即可

<script type="text/javascript" src="/js/qrcodejs-master/qrcode.js"></script>

2.npm方式引入

2.1控制台输入指令

npm install --save qrcodejs2-fix

2.2vue中引入

import QRCode from 'qrcodejs2-fix'

操作步骤

1.准备一个存放二维码的盒子

原生中使用ID绑定，VUE中使用ref绑定

<div id="qrCodeUrl"></div> //html中使用ID绑定

<div ref="qrcode"> //vue中只需要绑定一个ref值即可
 
</div>

2.js调用并且存放内容

这里是先把盒子为空了，然后再去调用方法生成二维码  text就是你的二维码内容：可以是一段文字，也可以是一个连接，这里我用的是连接，扫码后直接跳转

下面分别是原生和vue的调用方式

// html js    
document.getElementById("qrCodeUrl").innerHTML = "";
    let qrCodeUrl = new QRCode("qrCodeUrl", {
        width: 200,
        height: 200,
        text: this.originUrl, //二维码内容，可以是一个连接或者单纯的一段文字
    });

// vue
new QRCode(this.$refs.qrcode, {
    text: qrCodeUrl,   //URL地址
    width: 300,
    height: 300,
    colorDark: '#000',    //二维码颜色
    colorLight: "#ffffff"  //背景颜色
});