uni-app用qrcodejs2生成二维码

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

<template>
	<view class="businessPay">
		<action-bar style="width: 100%;" title="确认支付" leftIcon="back"></action-bar>

		<!-- <uni-section title="预存现金" type="line"></uni-section> -->
		<!-- <cash-advance ref="cashAdvance"></cash-advance> -->

		<!-- <uni-section title="支付方式" type="line"></uni-section> -->
		<!-- <pay-way ref="payWay"></pay-way> -->

		<view class="msgBox">
			<common-msg-item title="订单金额" :content="payAmount"></common-msg-item>
			<PickMsgItem title="支付方式" :range="payWay" rangeKey="mname" iconfont="&#xe634;" @onPick="onPercombPick">
			</PickMsgItem>
			<view>
				<uni-popup ref="popup" type="center" :mask-click="false">
					<uni-card>
						<view v-if="isShowModal">
							<!-- <view style="width: 450upx;height: 500upx;margin-top: 10px"> -->
								<view class="qrcode">
									<!-- <canvas style="width: 450upx;height: 500upx;" canvas-id="couponQrcode"></canvas> -->
									<div id="qrCode" ref="qrCodeDiv"></div>
								</view>
							<!-- </view> -->
							<view class="title" style="margin-top: 10px;font-weight:bold">
								扫码二维码支付
							</view>
						</view>
					</uni-card>
				</uni-popup>
			</view>
		</view>

		<view class="businessPay-btn">
			<view class="btn" @click="businessPay()">
				立即支付
			</view>
		</view>

		<web-view v-if="webViewSrc" :src="webViewSrc"></web-view>
	</view>
</template>

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>标签是否生成成功。不然会出现二维码生成空白的情况，这里需要注意的点是<div>的是<uni-popup>标签里面的，要<uni-popup>先生成渲染完，才会到<div>去渲染二维码。这里需要注意一下先后顺序，如果没有获取就延迟再重新获取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;
	}