共计 3242 个字符，预计需要花费 9 分钟才能阅读完成。
本文简介
点赞 + 关注 + 珍藏 = 学会了
本文用一个简略的 demo 解说 App 端 半屏间断扫码 的实现形式，包含（条形码、二维码等各种各样的码）。
我会从实现思路讲起，如果你比拟急能够间接跳到 入手实现 章节获取代码。
开发和运行环境
- 开发工具：HBuilderX
- 前端框架：uni-app 我用了 vue3 的模式开发
- 前端延长能力：HTML5+
- 运行环境：一加 8（安卓手机）
需要收集
看到论坛上有人想在 App 端 实现 间断扫码 性能。
认真看了下图，还是个 半屏 的扫码框。
只是看到提了下需要，并没搜到多少解决方案。
于是我去 uni-app 官网 看了下，找到相干的内容：
<camera>组件uni.scanCode扫码的 API
但 <camera> 组件不反对 App 端应用（至多在写本文时不反对）；
uni.scanCode 能够扫码，但会跳到另一个界面，并在全屏的模式下扫码，也不反对间断扫码。
当然，用 uni.scanCode 能够在扫码胜利后再从新执行一次，这样就能实现间断扫码的性能，但界面会跳来跳去（跳到扫码界面，胜利后又跳回 app 的界面，再执行又跳到扫码界面 ……）。
提炼需要
依据下面的信息，提炼出 3 个关键词：
- App 端
- 半屏
- 间断扫码
我采纳了 DCLOUD 社区《uni-app 怎么自定义扫码和间断扫》里的需要。粗略的写了下布局（我没有精密写款式）
最终实现的成果如下图所示
我用在线工具生成了 2 个二维码，内容别离为“雷猴”和“鲨鱼辣椒”。
通过扫描二维码，把内容增加到页面中。
实现思路
查文档
既然 uni-app 的组件和 API 都没有提供这方面的帮忙，我就去 插件市场 看了下，要么只反对小程序，要么是免费的。
免费的？🤔🤔🤔 算了，大家都是打工人。
当初 uni-app 官网文档 和 插件市场 两条路都走不通(次要是我穷)，那还有一条路：html5+
node.js 能够了解为前端向服务端的延展，html5+ 能够了解为前端向 App 的延展。
为了不节约大家工夫，我整顿出本文要用到的 API 和 模块。
关上 html5+ 能够找到 barcode 扫码模块，该模块有个 create 办法 用来创立扫码辨认控件。
但 plus.barcode.create() 办法又须要用到 plus.webview，也就是会波及到 webview 模块。
webview 模块 是用来治理利用窗口界面的，也就能够弄一个半屏的窗口进去。
整顿
相干办法都找到七七八八了，只需把逻辑整顿好就能够编码了。
- 【步骤 1】弄一个窗口进去（半屏，或者你本人定个尺寸和定位吧）
- 【步骤 2】弄一个扫码控件对象进去
- 【步骤 3】将扫码控件增加到窗口
- 【步骤 4】扫码胜利后将后果增加到页面上
- 【步骤 5】从新调用扫码办法
入手实现
我将下面 5 个步骤都在代码正文里标记进去了。
<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 端，倡议粗略过一遍 HTML5+ 文档，而后抽几个本人感兴趣的性能做个 demo 进去（这样能省钱，插件市场的货色也不便宜）。
扫码相干
barcode 模块文档
plus.barcode.create 的第二个参数是一个数组，外面能够设置须要辨认的条码类型，能够同时反对多种条码。
barcode 反对多种条码：
- QR: QR 二维码，数值为 0
- EAN13: EAN 条形码标准版，数值为 1
- EAN8: ENA 条形码简版，数值为 2
- AZTEC: Aztec 二维码，数值为 3
- DATAMATRIX: Data Matrix 二维码，数值为 4
- UPCA: UPC 条形码标准版，数值为 5
- UPCE: UPC 条形码缩短版，数值为 6
- CODABAR: Codabar 条形码，数值为 7
- CODE39: Code39 条形码，数值为 8
- CODE93: Code93 条形码，数值为 9
- CODE128: Code128 条形码，数值为 10
- ITF: ITF 条形码，数值为 11
- PDF417: PDF 417 二维条码，数值为 13
咱们在本例中次要用到 barcode.create 办法创立扫码控件。
本文只用了 扫码胜利的回调，在你的业务中可能还须要用到 扫码失败的回调。
更多的配置和款式设置，倡议自行查阅官网文档。本文的案例也有对扫码框做了色彩的调整（轻易选了个色彩）。
创立窗口
webview 模块文档
举荐浏览
👍《执行 vue create 时到底做了什么》
👍《Vue3 过 10 种组件通信形式》
👍《Vite 搭建 Vue2 我的项目（Vue2 + vue-router + vuex）》
👍《前端须要的收费在线 api 接口》
如果本文对你有帮忙，也心愿你能够 点赞 关注 珍藏 ~ 这对我很有用 ~
点赞 + 关注 + 珍藏 = 学会了
