1.npm下载

npm install qrcodejs2 --save

2.

<view class="center">
			<div class="qrcode" ref="qrCodeUrl"></div>
		</view>
		

<script>
	import QRCode from "qrcodejs2"
	export default {
		components: {
				QRCode 
			},
		data() {
			return {
                qrcode:12346,
                qrcodeInstance: null, // 用于保存二维码实例
			}
		},
		methods: {
			creatQrCode() {
				var qrcode = document.getElementsByClassName('qrcode')[0].innerHTML
				console.log(qrcode)
				var qrcode = new QRCode(this.$refs.qrCodeUrl, {
					text: this.qrcode, //需要转换为二维码的内容
					width: 200, //二维码宽度
					height: 200, //二维码高度
					colorDark: '#000000', //前景色   
					colorLight: '#ffffff', //后景色
					correctLevel: QRCode.CorrectLevel.L //容错级别
				})
			}
// 生成二维码
		creatQrCode(txtQrcode) {
			// 如果已经存在二维码实例，先清除
			if (this.taxQrcodeData.qrcodeInstance) {
				this.taxQrcodeData.qrcodeInstance.clear() // 清除二维码内容
				this.taxQrcodeData.qrcodeInstance.makeCode(txtQrcode) // 重新生成二维码
			} else {
				// 如果不存在二维码实例，则创建一个新的
				this.taxQrcodeData.qrcodeInstance = new QRCode(
					this.$refs.qrCodeUrl,
					{
						text: txtQrcode, // 需要转换为二维码的内容
						width: 200, // 二维码宽度
						height: 200, // 二维码高度
						colorDark: '#000000', // 前景色
						colorLight: '#ffffff', // 背景色
						correctLevel: QRCode.CorrectLevel.L, // 容错级别
					}
				)
			}
			
		},
		},
		// 遇到需要操作dom元素的方法，必须要放在mounted中，放在onLoad中会报错
		mounted() {
			this.creatQrCode()
		}
	}
</script>

3.

<style>
	/* 想要在页面水平垂直居中需要给父盒子设置宽高 */
     .center {
     	width: 100%;
     	height: 1250rpx;
     	flex: auto;
     	display: flex;
     	flex-direction: column;
     	justify-content: center;
     	align-items: center;
     }
</style>