前端如何生成二维码

1.引用包

先安装二维码相关依赖包

npm install qrcodejs2 -S
npm install vue-qr -S

废话不多说，直接上代码。
可以根据需要选中自己喜欢的生成二维码的方式，关于依赖包的使用请在npm包官方网站搜索，都有对应的配置文档。

<template>
	<div class="flex">
		<!-- 第一种：使用qrcodejs2 -->
		<div style="width: 200px;border: 1px solid #eee;padding: 10px;background-color: #f5f5f5;">
			<div class="flex">
				<el-input class="mb10" v-model="text01" placeholder="text01"></el-input>
				<el-button class="mb10" @click="creatQrCode01" type="primary">生成</el-button>
			</div>
			<div class="qrcode" ref="qrCodeUrl"></div>
		</div>

		<!-- 第二种：使用vue-qr -->
		<div style="border: 1px solid #eee;padding: 10px;background-color: #f5f5f5;">
			<el-input class="mb10" v-model="text02" placeholder="text02"></el-input>
			<div class="flex">
				<!-- 1.没有logo -->
				<vue-qr :text="text02" :size="200" margin="10"></vue-qr>
				<!-- 2.有logo -->
				<!-- 2.1 使用gif作为背景 -->
				<vue-qr
					:gifBgSrc="gifUrl"
					:logoSrc="imageUrl"
					:text="text02"
					:size="200"
					margin="10"
					:whiteMargin="false"
					logoCornerRadius="1"
					colorDark
					colorLight
				></vue-qr>
				<!-- 2.2 使用普通图片作为背景-->
				<vue-qr
					:bgSrc="bgUrl"
					:logoSrc="imageUrl"
					:text="text02"
					:size="200"
					margin="10"
					:whiteMargin="false"
					logoCornerRadius="3"
					colorDark
					colorLight
				></vue-qr>
			</div>
		</div>
	</div>
</template>

<script>
import QRCode from "qrcodejs2";
import vueQr from "vue-qr";
export default {
	components: {
		vueQr
	},
	data() {
		return {
			text01: "text01",
			text02: "text02",
			imageUrl: require("../assets/images/bg.png"),
			// bgUrl: require('../assets/images/logo.jpg'),
			bgUrl: "https://img.bazhuay.com/1615949942403_466.jpeg",
			gifUrl: require("../assets/images/starboy.gif")
		};
	},
	methods: {
		creatQrCode01() {
			const qrcode = new QRCode(this.$refs.qrCodeUrl, {
				text: this.text01, // 需要转换为二维码的内容
				width: 100,
				height: 100,
				colorDark: "#000000",
				colorLight: "#ffffff",
				correctLevel: QRCode.CorrectLevel.H
			});
		}
	},
	mounted() {
		this.creatQrCode01();
	}
};
</script>

<style lang="less">
.flex {
	display: flex;
}
.mb10 {
	margin-bottom: 10px;
}
.qrcode {
	img {
		width: 200px;
		height: 200px;
		background-color: #fff; //设置白色背景色
		padding: 10px; // 利用padding的特性，挤出白边
		box-sizing: border-box;
	}
}
</style>

2.结论

1.二维码的背景图支持网络路径。
2.当text内容越长，那二维码周围的小方块就显得越小 。
3.周围三个大方块是用来协助手机（或其他扫码设备）定位的。

3.拓展

关于二维码的原理请参考B站通俗易懂的讲解传送门。