vue3 实现二维码展示与扫描

一、下载安装插件

下面展示一些 内联代码片。

npm install html5-qrcode
npm install qrcodejs2-fix

前者用于二维码扫描，后者用于二维码展示

"dependencies": {
		"axios": "^1.6.7",
		"html5-qrcode": "^2.3.8",
		"image-tools": "^1.4.0",
		"qrcodejs2-fix": "^0.0.1",
		"sm-crypto": "^0.3.13",
		"weixin-jsapi": "^1.1.0"
	}

二、展示二维码代码实现

1、直接展示二维码

<template>
  <div id="qrCodeBox"></div>
</template>

<script setup>
import { onMounted, nextTick } from 'vue';
// 页面中引入
import QRCode from 'qrcodejs2-fix';
onMounted(() => {
    // 生成二维码
    getQrCode();
});

// 生成方法
const getQrCode = () => {
    // DOM 都加载完毕再执行
    nextTick(() => {
        document.getElementById('qrCodeBox').innerHTML = '';
        new QRCode(document.getElementById('qrCodeBox'), {
            text: '呱呱', // 扫码后显示的内容, 如果页面链接, 扫码后会直接跳转到链接
            width: 100, //二维码宽
            height: 100, //二维码高
        });
    });
}
</script>

<style scoped>
</style>

2、从接口获取数据后展示二维码

<template>
  <div id="qrCodeBox"></div>
</template>

<script setup>
// 页面中引入
import QRCode from 'qrcodejs2-fix';
//根据接口返回数据来显示二维码
import { onUnmounted, onMounted, ref, reactive, watchEffect } from 'vue';

// 进入页面只执行一次的监听函数
watchEffect(() => {
    // 当接口返回了数据, 再生成二维码
    if (接口返回的数据存在){
      getQrCode();
    }
})

// 生成二维码
// 这里也不用包裹nexttick, 因为接口返参已经有延迟了
const getQrCode = () => {
    document.getElementById('qrCodeBox').innerHTML = '';
    new QRCode(document.getElementById('qrCodeBox'), {
        text: `${接口返回的数据} ${接口返回的数据}`,
        width: 100, //二维码宽
        height: 100, //二维码高
    });
};
</script>

<style scoped>
</style>

三、扫描代码实现

<template>

	<button margin="50rpx 0" @click="getCameras">设备绑定</button>
	<div class="container" style="height: 100vh;width: 100%;background-color: rgba(0, 0, 0,0.6);
			position: fixed;top: 0;left: 0;">
<!--		<image @click="stop"-->
<!--			style="width: 50rpx;height: 50rpx;position: fixed;z-index: 9999;left: 20rpx;top: 20rpx;"-->
<!--			src="/static/images/myImages/close.png"></image>-->
		<div id="reader"></div>
	</div>
	<span>{{ result }}</span>
</template>
<script setup>
	import {
		Html5Qrcode
	} from 'html5-qrcode'
	import {
		onMounted,
		ref,
		onUnmounted
	} from 'vue'
	const cameraId = ref('')
	const html5QrCode = ref(null)
	//订单设备数量总数
	const total = ref(0)
	const result = ref('')

	onMounted(() => {
		if (html5QrCode.value) {
			stop()
		}
	})
	onUnmounted(() => {
		stop()
	})
	const getCameras = () => {
		Html5Qrcode.getCameras()
			.then((devices) => {
				if (devices && devices.length) {
					// 如果有2个摄像头，1为前置的
					if (devices.length > 1) {
						cameraId.value = devices[1].id
					} else {
						cameraId.value = devices[0].id
					}
					//开始扫描
					start()
				}
			})
			.catch((err) => {
				alert(err)
			})
	}

	const start = () => {
		html5QrCode.value = new Html5Qrcode('reader')
		html5QrCode.value.start(
				cameraId.value, {
					fps: 10, // 设置每秒多少帧
					qrbox: {
						width: '100vw',
						height: '100vw'
					}
				},
				(decodedText, decodedResult) => {
					if (decodedText) {
						setTimeout(() => {
							uni.showToast({
								title: "扫码完成！",
								icon: "none",
								image: '/static/images/myImages/win.png',
								duration: 2000
							});
							stop();
						}, 2000)

					}
				},
				(errorMessage) => {
					//   showToast('暂无扫描结果')
					console.log('暂无扫描结果', errorMessage)
				}
			)
			.catch((err) => {
				console.log(`Unable to start scanning, error: ${err}`)
			})
	}
	const stop = () => {
		html5QrCode.value
			.stop()
			.then((ignore) => {
				// QR Code scanning is stopped.
				console.log('QR Code scanning stopped.', ignore)
				// showToast('QR Code scanning stopped.')
			})
			.catch((err) => {
				// Stop failed, handle it.
				console.log('Unable to stop scanning.', err)
				// showToast('Unable to stop scanning.')
			})
	}
</script>
<style lang="scss" scoped>
	page {
		background: rgb(247, 247, 247);
	}
</style>