uniapp - 实现 App 端 “半屏幕“ 连续扫码功能，页面只有半个屏幕是扫码框并且可持续连续扫码获取数据（不使用官方 uni.scanCode API，因为无法连续扫码！）详细示例源码插件教程

已于 2024-02-03 17:46:05 修改
阅读量1w 收藏 6
点赞数 4
分类专栏： 前端组件与功能(开箱即用) 文章标签： uni-app uniapp半连屏扫码功能 uniapp 一半屏幕连续扫码 uniapp 自定义扫码样式界 uniapp APP安卓苹果端
于 2023-02-21 12:10:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50545213/article/details/129139948
版权

介绍

网上全部都是全屏扫码（并且只能扫一次），对于半屏连续扫码的需求根本无法满足。

本文实现了 uniapp App 平台下，页面半屏幕 “连续” 扫码获取数据结果功能，非全屏扫码噢~

你可以直接复制示例源码，运行起来稍微改改样式就能用了。

如下图真机测试所示，半个屏幕激活扫码框，并且可持续进行扫码：

仅完成了核心功能，没有任何乱七八糟的乱代码，注释详细！

在这里插入图片描述

准备阶段

为了

了解本专栏 订阅专栏 解锁全文
街尾杂货店&
关注
  • 4
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
订阅专栏
uniapp开发小程序生成和扫描二维码
故里2130
03-31 324
真机调试的话，就可以把刚才的二维码的内容扫出来。在微信开发者工具里面，扫码是打开文件夹的操作。安装了cnpm后，使用cnpm命令也行。uniapp中生成二维码和扫码二维码。3. 安装成功后，在这里就能看到了。5.使用微信开发者工具运行效果。1.首先建立一个可运行的小程序。2. 安装uqrcodejs。7.二维码生成了，下面说扫码。6.使用真机调试运行。
uni-app调用摄像头扫码功能示例（支持前置和后置摄像头）
03-07
uni-app调用摄像头扫码功能示例，拿来即用；
uni-app App端半屏连续扫码 （不花钱）
小菜儿前端的博客
05-18 586
uni-app 连续扫码
uniapp实现扫码功能H5+APP+wx小程序
03-08
实现uniapp在H5端(仅支持vue2)的扫码识别；APP端的扫码识别；微信小程序端的扫码识别功能。 1.下载后记得要先安装依赖包：npm install --save vue-qrcode-reader 2.有问题欢迎评论。
二维码连续扫描
07-12
使用android studio开发工具，自定义扫描界面，扫描成功之后弹出自定义对话框，点击取消，继续扫描。
uniapp 扫码原生插件 - 组件版（毫秒级、连续扫码、多码）Ba-ScanView
三杯五岳
05-10 1470
Ba-ScanView 是一款毫秒级扫码插件，采用component组件模式，可直接在uniapp界面直接引用，高宽可随意设置。
uniapp之小程序扫码（条形码、二维码）,支持连续扫码， 同时返回扫码图片
iamzhizhang的博客
07-19 4552
ws-carema 本扫码功能支持连续扫码，获取图片 使用方式 // 在js中引用 import WsCarema from "@/components/ws-carema/index.vue" components:{ WsCarema }, // 在界面中引用 <view class="container"> <ws-carema ref="carema" :get-photo="false" @scanResult="scanResult"></ws-carema&g
uniapp自定义扫码页面
05-17
uniapp自定义扫码页面
uniapp 扫码识别（一维码、二维码）
NM86876788的博客
05-19 1万+
uniapp 扫码识别（一维码、二维码）
uni-app实现扫码功能
Moon Star
08-16 1万+
自己实现uni-app的扫码功能
uniapp 自定义扫码界面 连续扫码
weixin_35749786的博客
01-08 1664
在 uni-app 中使用自定义扫码界面并进行连续扫码，你需要使用 uni-app 提供的原生扫码接口。 首先，你需要在 uni-app 项目的 manifest.json 文件中启用对应的平台的原生扫码能力： "permission": { "camera": { "desc": "相机权限" } }, "platforms": { "android": ...
uniapp进入页面输入框自动获取焦点，并实现连续扫码
m0_60504233的博客
04-12 4171
2.扫描完第一个输入框，第二个输入框自动获取焦点进行扫描。注：自动获取焦点的同时，要隐藏软键盘，用户点击输入框，软键盘才可以出来。1.进入页面输入框自动获取焦点，可以直接扫描。页面进入输入框自动获取焦点，并且隐藏软键盘的代码。第一个输入框扫描完成，第二个输入框自动获取焦点的代码。focus：获取焦点。
uniapp的pda扫码组件完整代码
10-11
基于uniapp的组件，稍加改造vue即可通用，pda扫码组件，Honeywell
HTML5+MUI实现手机app扫码功能
03-31
HTML5+MUI实现手机app扫码功能
uniapp 扫码原生插件 - 新版（支持连续扫码模式；支持设置格式；可任意自定义界面）Ba-Scanner
三杯五岳
10-08 4213
Ba-Scanner 是一款毫秒级扫码插件，同时支持多码、相册、闪光灯、焦距缩放、提示音、震动等等。新增支持自定义任意界面、任意点击事件，可以让扫码界面和您的应用更加匹配、美观。
uniapp小程序自定义扫码页面创建及其完善
weixin_43746402的博客
02-28 2288
其中应用到图片选择、cover-image、cover-view实现动画扫码功能。中博主的分享，再进行个人更改去改善为自己所需的自定义扫码页面。同页面插入一个camera组件。
uni-app实现扫码的几种方式
热门推荐
sinat_41772813的博客
10-29 1万+
如果使用小程序，默认就是微信扫码，非常的好用，在安卓和ios，个人倾向推荐华为，但是88的收费，并且只能用在一个程序上，也劝退不少个人开发者。优点：uni.scanCode(OBJECT)就可以直接调用，方便快捷，支持安卓、ios，如果制作小程序，便可以直接转换成微信等官方扫码api。缺点：需要配置阿里云控制台，而且阿里在控制台有初始埋点，第一次使用如果没有关闭，会直接短信通知欠费，不能离线扫码，数据安全性不详。缺点：安卓、ios端识别率非常差，并且扫码耗时很长，很多条件下，无法识别二维码。
uniapp实现扫一扫功能，扫码成功后跳转页面
最新发布
Quentin0823的博客
10-10 5058
uniapp官方有提供的相关api实现跳转到web网页（h5）的功能，在开发小程序中，是一项很常见的功能开发。该功能使用到的api。
uniapp实现扫码功能
03-31
要使用uniapp实现扫码功能，你需要使用uni-app插件，可以使用uni.scanCode API实现。下面是一个简单的示例代码： ``` <template> <view class="container"> <button @click="scanCode">扫码</button> <view class="result">{{result}}</view> </view> </template> <script> export default { data() { return { result: '' } }, methods: { scanCode() { uni.scanCode({ success: (res) => { this.result = res.result } }) } } } </script> ``` 在这个示例代码中，我们首先在模板中添加了一个按钮和一个展示扫描结果的视图。然后，在methods中，我们定义了一个scanCode方法，它使用uni.scanCode API来启动扫码功能。当扫码成功时，我们将扫描结果保存到result数据属性中，并在视图中展示它。 需要注意的是，为了使用uni.scanCode API，你需要在manifest.json文件中给应用添加相应的权限： ``` { "uni-app": { "name": "demo", "version": "1.0.0", "description": "", "appid": "wx1234567890", "permission": { "scope.userLocation": { "desc": "获取用户位置信息" }, "scope.camera": { "desc": "获取摄像头权限用于扫码" } } } } ``` 在这个示例中，我们添加了scope.camera权限，以便让应用访问摄像头并启动扫码功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

街尾杂货店&

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值