qrCode生成二维码

html 复制代码

<template>
	<view class="flex-c-c">
		<canvas :id="canvasId" :canvas-id="canvasId" :type="canvasType"
			:style="{width: size+'rpx',height:size+'rpx'}" />
	</view>
</template>

<script>
	import UQRCode from 'uqrcodejs'
	import {
		getSystemData
	} from '@/utils/public.js'
	export default {
		name: 'qrCodeCmp',
		props: {
			size: {
				type: Number,
				default: 228
			},
			// 二维码生成内容
			value: {
				type: String,
				default: ''
			},
			canvasId: {
				type: String,
				default: 'qrcode'
			}
		},
		watch: {
			value: {
				handler(val) {
					if (val) {
						this.drawQrcode(val)
					}
				},
				immediate: true
			}
		},
		data() {
			return {
				// #ifdef APP-VUE
				canvasType: undefined,
				// #endif
				// #ifndef APP-VUE
				canvasType: '2d',
				// #endif
			}
		},
		methods: {
			async drawQrcode(val) {
				const qr = new UQRCode();
				qr.data = val;
				qr.size = uni.upx2px(this.size);
				qr.areaColor = 'transparent'
				// #ifdef H5
				this.$nextTick(async () => {
					// #endif
					qr.make();
					let canvasContext = null;
					// #ifdef MP-WEIXIN
					const canvas = (this.canvas = await new Promise(resolve => {
						uni
							.createSelectorQuery()
							.in(this) // 在组件内使用需要
							.select(`#${this.canvasId}`)
							.fields({
								node: true,
								size: true
							})
							.exec(res => {
								resolve(res[0].node);
							});
					}));
					canvasContext = canvas.getContext('2d');
					/* 使用dynamicSize+scale，可以解决小块间出现白线问题，dpr可以解决模糊问题 */
					const dpr = getSystemData().pixelRatio;
					canvas.width = qr.dynamicSize * dpr;
					canvas.height = qr.dynamicSize * dpr;
					canvasContext.scale(dpr, dpr);
					// #endif
					// #ifndef MP-WEIXIN
					canvasContext = this.canvasContext = uni.createCanvasContext(this.canvasId,
						this);
					// #endif
					// 组件内调用需传this，vue3 中 this 为 getCurrentInstance()?.proxy
					qr.canvasContext = canvasContext;
					qr.drawCanvas();
					// #ifdef H5
				})
				// #endif
			}
		}

	}
</script>

使用方法

html 复制代码

<qrCodeCmp :size="228" :value="combiBarCode[item.couponId]" :canvasId="'qrcode-'+item.coundownTime" />