【绘制某个链接地址的二维码】【qrcodejs2绘制二维码】

---

前言

在前端项目中，用户扫描二维码的功能，有时候会根据不同的用户信息，跳转到不同的链接，甚至会携带不同的参数，这时候就不能使用UI给我们的切图来展现二维码，就需要我们根据不同的用户去绘制不同的二维码图片，让用户自行跳转到相对应的链接。这里推荐插件qrcodejs2来绘制不同的二维码。

---

一、qrcodejs2是什么？

官网地址：https://davidshimjs.github.io/qrcodejs/

QRCode.js是一个二维码生成javascript库；支持跨浏览器的HTML5 Canvas和表格标签的DOM操作；并且不依赖其它的库或拓展。

二、使用步骤

1.下载

代码如下（示例）：

npm i qrcodejs2@0.0.2

2.使用

代码如下（示例）： 在xxx.vue中

<div class="QR-code-div">
  <div class="qrcode" id="qrcode"></div>
</div>

.QR-code-div {
	width: 4.1875rem;
	height: 4.1875rem;
	padding: .125rem;
	background-color: #fff;
	.qrcode {
	  width: 100%;
	  height: 100%;
	  >canvas {
	    width: 100%;
	    height: 100%;
	  }
	  >img {
	    width: 100%;
	    height: 100%;
	    object-fit: contain;
	  }
	}
}

import QRCode from "qrcodejs2";

export default {
  data() {
    return {
      qRCode: null,
    };
  },
  mounted() {
  	this.createQRcode();
  },
  methods: {
  	createQRcode() {
  		if (!this.qRCode) {
	       const W = document.getElementById("qrcode").offsetWidth;
	       const H = document.getElementById("qrcode").offsetHeight;
	       const channel = "mihoyo";
	       this.qRCode = new QRCode("qrcode", {
	         width: W,
	         height: H,
	         text: "https://ys.mihoyo.com/?channel=" + channel,
	       });
	     }
  	   }
  	}	
}

---

接下来就可以在页面直接绘制二维码了，参数和链接都可以修改。二维码的宽和高也是根据屏幕大小来来决定的，但是二维码的大小不会随着屏幕大小的变化而变化，需要刷新页面。

缺点：二维码的中间不能放图片。

三、效果

总结

这里是qrcodejs2绘制二维码的全部过程。如有错误请朋友们留言补充。