[JavaScript知识库]uni-app 微信相机模仿扫码枪的功能

需求：
1、扫描一个标签，不返回页面，直接继续扫描
2、扫描到一个要发出滴的声音

组件源码：

<template>
	<view class="scan-view" v-if="show">
		<view class='scan-border'>
			<camera class='scan-camera' mode="scanCode" @scancode='scancode' frame-size='large'>
				<cover-image class='cover-corner cover-left-top' src='/static/img/left-top.png'></cover-image>
				<cover-image class='cover-corner cover-right-top' src='/static/img/right-top.png'></cover-image>
				<cover-image class='cover-corner cover-left-bottom' src='/static/img/left-bottom.png'></cover-image>
				<cover-image class='cover-corner cover-right-bottom' src='/static/img/right-bottom.png'></cover-image>
				<cover-view class='scan-animation'></cover-view>
			</camera>
			<cover-view @click="esc" class="mt60 primary_color">
				退出
			</cover-view>
			<cover-view class="mt40" style="width: 100%;text-align: center;">
				<cover-view v-for="item in resultList" :key="item" style="width: 100%;text-align: center;">{{item}}</cover-view>
			</cover-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				innerAudioContext: null,
				result: '',
				resultList: [], //保存此次扫码结果
				show: false
			}
		},
		created() {
			this.innerAudioContext = uni.createInnerAudioContext()
			this.innerAudioContext.src =
				'static/img/scan-audio.mp3';
		},
		methods: {
			open() {
				this.show = true;
			},
			close() {
				this.show = false;
			},
			scancode(e) {
				//1、获取扫描结果的值
				this.result = e.detail.result;
				let re = /^\d{10}$/;
				console.log("扫描结果", this.result)
				//2、判断此次扫码是否有结果集，如果有，则不进行处理，如果没有，则emit\
				if (!this.resultList.includes(this.result) && re.test(this.result)) {
					// 提示音
					this.innerAudioContext.play()
					// 校验扫描结果，并处理
					this.$emit("scan", this.result)
					this.resultList.unshift(this.result)
				}
			},
			//退出
			esc() {
				this.close();
			}
		}
	}
</script>

<style>
	.scan-view {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		background-color: #B9BEC4;
		position: fixed;
		z-index: 999;
		top: 0;
		left: 0;
		align-items: center;
		justify-content: space-around;
	}

	.scan-border {
		width: 94%;
		height: 94%;
		/* 	border: 6upx solid #08FDFE; */
		border-radius: 10upx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.scan-camera {
		width: 500upx;
		height: 500upx;
		border-radius: 6upx;
		margin: 30upx;
		position: relative;
	}

	.cover-corner {
		width: 80upx;
		height: 80upx;
		position: absolute;
	}

	.cover-left-top {
		left: 0;
		top: 0;
	}

	.cover-right-top {
		right: 0;
		top: 0;
	}

	.cover-left-bottom {
		left: 0;
		bottom: 0;
	}

	.cover-right-bottom {
		right: 0;
		bottom: 0;
	}

	.scan-animation {
		position: absolute;
		top: 0px;
		left: 10upx;
		width: 480upx;
		animation: myanimation 3s linear infinite;
		height: 4upx;
		background-color: #106DFD;
		border-radius: 50%;
	}

	@keyframes myanimation {
		from {
			top: 0px;
		}

		to {
			top: 250px;
		}
	}
</style>

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖