uni-app App端半屏连续扫码（不花钱）

本文主要是介绍uni-app App端半屏连续扫码（不花钱），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

<template><view class="page"><view class="title">扫码结果</view><view class="result_list"><view v-for="item in list" :key="item" class="result_li">{{ item }}</view></view></view>
</template><script setup>
import { onReady } from '@dcloudio/uni-app'
import { ref } from 'vue'let webView = null // webview容器
let barcode = null // 扫码框const list = ref([]) // 扫码结果 - 列表// 扫码成功回调
function onmarked(type, result) {// 【步骤4】将扫码结果添加到 list 里list.value.push(result)// 【步骤5】1秒后再重新开启扫码setTimeout(() => {barcode.start()}, 1000)
}// 创建窗口和扫码控件
function createBarcode() {// 【步骤1】判断有没有创建过 webview 容器，如果没有就执行创建操作if (!webView) {webView = plus.webview.open('','barCodeBox',{top: '60px',width: '100%',height: '200px'})}// 【步骤2】判断有没有创建过 扫码框，如果没有就执行创建操作if(!barcode){barcode = plus.barcode.create('barcode',[plus.barcode.QR], // 只扫二维码{top:'0px',left:'0px',width: '100%',height: '200px',position: 'static',scanbarColor: '#f1c01f',frameColor: '#c0ff01'})barcode.onmarked = onmarked // 扫码结果回调函数// 【步骤3】将扫码框添加到 webview 里plus.webview.getWebviewById('barCodeBox').append(barcode)}barcode.start() // 开始扫码
}// 在页面加载时，延迟300毫秒执行创建扫码框函数
onReady(() => {setTimeout(() => {createBarcode()}, 300)
})
</script><style>
.page {height: 100vh;display: flex;flex-direction: column;box-sizing: border-box;padding: 200px 20rpx 0;
}.title {font-size: 50rpx;color: #333;
}.result_list {flex: 1;overflow-y: auto;box-sizing: border-box;padding-top: 20rpx;
}.result_li {box-sizing: border-box;margin-bottom: 20rpx;padding: 10rpx 20rpx;border: 1px solid #7298c8;border-radius: 10rpx;font-size: 40rpx;
}
</style>

uni-app App端半屏连续扫码 - 掘金前端佬使用 uni-app 自定义扫码窗口，实现连续扫码功能。除了 uni-app ，我们还会用到 html5+ 的能力去蚕食安卓佬的蛋糕。https://juejin.cn/post/7072621583939928077#heading-8