本文简介
点赞 关注 收藏 = 学会了
本文用一个简单的 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 都没有提供这方面的帮助，我就去 插件市场 看了下，要么只支持小程序，要么是收费的。
收费的？
