uni-app用qrcodejs2生成二维码

在package.json文件导入"qrcodejs2": "0.0.2"

import QRCode from 'qrcodejs2';
            businessPay(){
                this.couponQrCode();
            },

// 二维码生成工具
			couponQrCode() {
				// new qrCode('couponQrcode', {
				// 	text: this.qrCodeValue,
				// 	width: 200,
				// 	height: 225,
				// 	colorDark: "#333333",
				// 	colorLight: "#FFFFFF",
				// 	correctLevel: qrCode.CorrectLevel.H
				// })
                // 这里打开生成二维码的时候，需要多一层判断body主体渲染完后，才能获取this.$refs.qrCodeDiv这个div拿来渲染，不然会导致无法获取div标签到时无法渲染成功，二维码为空白的情况
				const el = this.$refs.qrCodeDiv
				if(!el) {
					setTimeout(() => {
                        // 进行回调二维码生成工具方法
						this.couponQrCode()
					}, 300)
				}
				this.$nextTick(() => {
					new QRCode(this.$refs.qrCodeDiv, {
						text: this.qrCodeValue,
						width: 220,
						height: 245,
						colorDark: "#333333", //二维码颜色
						colorLight: "#ffffff", //二维码背景色
						correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H
					  })
				})
			},

这里的couponQrCode()方法需要用到this.$refs.qrCodeDiv，去判断

标签是否生成成功。不然会出现二维码生成空白的情况，这里需要注意的点是

的是标签里面的，要先生成渲染完，才会到

去渲染二维码。这里需要注意一下先后顺序，如果没有获取就延迟再重新获取div标签去生成二维码。----这里也算是一个坑

.businessPay {
		width: 100%;
		overflow: hidden;
		box-sizing: border-box;

		view {
			box-sizing: border-box;
		}

		.msgBox {
			width: 100%;
			background-color: #fff;
			padding: 30rpx 40rpx;
		}

		&-btn {
			width: 100%;
			overflow: hidden;
			padding: 40rpx 20rpx;

			.btn {
				width: 100%;
				overflow: hidden;
				color: #fff;
				font-size: 28rpx;
				background-color: #1F77FF;
				line-height: 100rpx;
				height: 100rpx;
				border-radius: 50rpx;
				text-align: center;
			}
		}
	}
	.qrcode {
		padding: 50 upx 0 20 upx 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.title {
		text-align: center;
	}