uni-app相机组件实现自定义二维码扫描

湖南许仙

已于 2022-06-23 19:24:35 修改

阅读量3.9k

点赞数 5

分类专栏： uni-app 文章标签： uni-app 小程序

于 2021-08-18 15:29:35 首次发布

本文链接：https://blog.csdn.net/qq_41207700/article/details/119780323

版权

uni-app 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了如何使用uni-app开发小程序，实现一个带有动态扫描动画和音乐响应的二维码扫描页面。通过JavaScript控制相机视图和CSS动画，配合定时器实现扫码过程中的视觉变化，当扫描成功时播放预先设置的歌曲作为提示音。

摘要由CSDN通过智能技术生成

入坑uni-app写小程序，项目需要自定义的二维码扫码页面。

template部分

<template>
	<view>
		<view class="scanCode_box">
				<camera class='camera' mode="scanCode" @error="cameraError" @scancode='scancode'
					frame-size='large'>
					<cover-view class='animation' :animation="animation"></cover-view>
				</camera>
		</view>
	</view>
</template>

js部分

<script>
	let animation = uni.createAnimation({});
	let innerAudioContext = uni.createInnerAudioContext()
	innerAudioContext.src = 'http://m10.music.126.net/20210818125423/bd0d08e6b203b714d5484b5c953c1a02/ymusic/a9c1/47f7/e72a/eeca0e403e1aa21dc60ca590be3db3f0.mp3'
	export default {
		data() {
			return {
				animation
			}
		},
		onShow() {
			this.donghua()
		},
		methods: {
			donghua() {
				let that = this;
				let scode = true
				setInterval(function() {
					if (scode) {
						animation.translateY(250).step({
							duration: 3000
						})
						scode = !scode;
					} else {
						animation.translateY(-10).step({
							duration: 3000
						})
						scode = !scode;
					}
						that.animation = animation.export()
					
				}.bind(this), 3000)
			},
			scancode(e){
			    innerAudioContext.play()
			    // 扫描结果
			    let res = e.detail.result
				console.log(res);
			  }
		}
	
	}
</script>

这里有点需要注意，二维码扫码的 “嘀”的声音不支持本路路径的，这里我没有找到类似的，暂时放了一首歌的地址，扫描二维码就会放歌。这里的声源自行寻找。

css部分

<style>
	.scanCode_box {
		width: 100%;
		height: 80%;
		display: flex;
		flex-direction: column;
		background-color: #333333;
		position: fixed;
		align-items: center;
		justify-content: space-around;
	}
	.camera {
		width: 433rpx;
		height: 434rpx;
		border-radius: 6rpx;
		margin: 30rpx;
	}
	.animation {
		position: absolute;
		top: 10rpx;
		left: 10rpx;
		width: 480rpx;
		height: 2rpx;
		background-color: #4CD964;
		border-radius: 50%;
	}
</style>