入坑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>

 实际效果图

 页面内容我就不弄完了，可以自己再另行敲写