前言：

把一个链接生成一个二维码图片，这是我们前端非常常见的一个需求。那么我们应该如何做呢？

查看往期文章：

五分钟一百行代码，手写一个vue项目全局通用的toast提示组件

十五分钟两百行代码，手写一个vue项目全局通用的弹框

第一步：下载 Qrcode 库

npm install --save qrcode

第二步：准备容器

我们生成的二维码图片需要一个展示的容器，我们需要提前准备好。

<div id="qrCode">div>

第三步：引入并使用

import QRCode from 'qrcode'
new QRCode(document.getElementById("qrCode"), {
    text: shareLink + "&p=qr_code&v=3", //生成二维码的文本
    width: document.querySelector("#qrCode").offsetWidth,
    height: document.querySelector("#qrCode").offsetWidth,
    colorDark: "#333333", //二维码颜色
    colorLight: "#ffffff", //二维码背景色

    correctLevel: QRCode.CorrectLevel.L //容错率，L/M/H
});

说明：

当你通过new调用之后就能生成要给二维码图片了，然后就能够显示在你指定的容器当中；因为我自己开发vue项目比较多，在vue项目中使用时，需要注意，最好放在 nextTick 中使用，保证容器渲染完成；

this.$nextTick(() => {
		new QRCode(document.getElementById("qrCode"), {
		text: shareLink + "&p=qr_code&v=3", //生成二维码的文本
		width: document.querySelector("#qrCode").offsetWidth,
		height: document.querySelector("#qrCode").offsetWidth,
		colorDark: "#333333", //二维码颜色
		colorLight: "#ffffff", //二维码背景色
		correctLevel: QRCode.CorrectLevel.L //容错率，L/M/H
	});
});

correctLevel 容错率说明：

写在后面

这是一个通用的 qrcode 库的通用使用流程，跟框架无关，你可以按照流程操作；

对你有帮助的话给作者点一个免费的关注吧，感恩！Peace and love~~