qrcodejs2实现前端生成二维码且实时刷新

本篇文章基于前端Vue框架

基本使用

安装：
npm install qrcodejs2 --save
引入：
import QRCode from 'qrcodejs2'
然后在Vue的HTML代码中定义一个真实div并且用ref属性进行标识

<div class="qrcode" ref="qrCodeUrl">div>

下面是JavaScript中的代码

createQrcode() {
	var qrcode = new QRCode(this.$refs.qrCodeUrl,{
		text:'张三李四王二麻子',//可以是链接，也可以是文本
		width:260,//二维码的宽度
		height:260,//二维码的高度
		colorLight:'#ffffff',//二维码背景色
		colorDark:'#F7382B',//二维码前景色，以实现红码为例
		correctLevel: QRCode.CorrectLevel.H//纠错等级
	})
},

效果图如下：

以上步骤可以产生一个基本的二维码，如何做到实时刷新呢？

二维码实时刷新

我们在开发过程中肯定会遇到这个需求就是生成的二维码要实时刷新，比如3秒刷新一次。那么如何做到3秒刷新一次呢？

首先二维码在后端存储的时候回存储为一个字符串，不会将图片存入数据库，也不会将图片存储在服务器然后在数据库中存储一个图片地址，因为这样的话成本太高了，当数据存储到一定的量时就会造成事故。一般而言，会在数据库中存储一个经过加密后的字符串，将这个字符串发送给前端后，前端只需要将这个字符串解析为二维码即可，这样可以节省很多的空间。

我们如何做到实时刷新呢？

我们可以设定一个计时器，3秒请求一次后端的数据

start () {
	this.timer = setInterval(() => {
		this.showUserMessage();
	},3000)
},

    showUserMessage() {
      getUserMessage().then(res => {
        this.userMessage = res.data;
        console.log(res.data);
        if (this.userMessage.nucleicStatus === 0) {
          this.colorDark = '#F7382B'
        } 
        this.createQrcode()
      });
    },

但此时会有一个新的问题就是你会发现页面中会不断声生成二维码，而且新生成的二维码会排在以前二维码的下面。也就是说新生成的二维码并没有替换掉之前的二维码，那么该如何去做呢？

    createQrcode() {
      this.$refs.qrCodeUrl.innerHTML = ""//词句代码将之前的二维码清空了
      console.log('code',this.userMessage.subscrideCode);
      var qrcode = new QRCode(this.$refs.qrCodeUrl,{
        text:'this.userMessage.subscrideCode',
        width:260,
        height:260,
        colorLight:this.colorDark,
        colorDark:'#ffffff',
        correctLevel: QRCode.CorrectLevel.H
      })
    },