uniapp微信扫码(附样式)

续上上篇

camera扫码模式+获取高度使其全屏

<camera mode="scanCode" device-position="back" flash="off" :style="'width:100%;height:' + windowHeight + 'px;'" @scancode="scancode"></camera>

扫出内容触发方法

		methods: {
			scancode(e) {
				if (e.detail.type == "barcode" && !this.isOK) {
						uni.setStorageSync("test", e.detail.result)
						uni.navigateTo({
							url: '../test/test'
						})

                                                this.isOK=true
				}
			},
		}

e.detail.type为码类型，e.detail.result为扫出的结果

isOK用于状态，使方法核心代码只触发一次。因为此组件会触发多次，不符合需求

扫码页面+样式

    <view :style="'width:100%;position: fixed;z-index: 999;' + windowHeight + 'px;top:'+ windowHeight/2.25+'px;'">
        <view class="qr-scanner">
            <view class="box">
                <view class="line"></view>
                <view class="angle"></view>
            </view>
        </view>
    </view>

<style>
	.qr-scanner {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.qr-scanner .box {
		width: 75vw;
		height: 75vw;
		max-height: 75vh;
		max-width: 75vh;
		position: relative;
		left: 50%;
		transform: translate(-50%, -50%);
		overflow: hidden;
		border: 0.1rem solid rgba(0, 255, 51, 0.2);
	}

	.qr-scanner .line {
		height: calc(100% - 2px);
		width: 100%;
		background: linear-gradient(180deg, rgba(0, 255, 51, 0) 43%, #00ff33 211%);
		border-bottom: 3px solid #00ff33;
		transform: translateY(-100%);
		animation: radar-beam 2s infinite;
		animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.99);
		animation-delay: 1.4s;
	}

	.qr-scanner .box:after,
	.qr-scanner .box:before,
	.qr-scanner .angle:after,
	.qr-scanner .angle:before {
		content: '';
		display: block;
		position: absolute;
		width: 3vw;
		height: 3vw;
		border: 0.2rem solid transparent;
	}

	.qr-scanner .box:after,
	.qr-scanner .box:before {
		top: 0;
		border-top-color: #00ff33;
	}

	.qr-scanner .angle:after,
	.qr-scanner .angle:before {
		bottom: 0;
		border-bottom-color: #00ff33;
	}

	.qr-scanner .box:before,
	.qr-scanner .angle:before {
		left: 0;
		border-left-color: #00ff33;
	}

	.qr-scanner .box:after,
	.qr-scanner .angle:after {
		right: 0;
		border-right-color: #00ff33;
	}

	@keyframes radar-beam {
		0% {
			transform: translateY(-100%);
		}

		100% {
			transform: translateY(0);
		}
	}
</style>