uni-app怎么实现扫码识别功能 uni-app调用相机扫描二维码

轻丽姑娘_4615

轻丽姑娘_4615

2026-05-14

692人浏览

原创

uni.scanCode仅在微信小程序和App端可用,H5端静默失败;小程序需配置mp-weixin.permission.scope.userCamera权限,App端需原生相机模块支持及对应系统权限,H5必须改用vue-qrcode-reader等第三方库。

uni-app怎么实现扫码识别功能 uni-app调用相机扫描二维码

uni.scanCode 在 H5 端根本不可用,别试了;微信小程序和 App 端能用,但配置和写法必须分平台处理。

uni.scanCode 在哪些平台真正可用

它不是“跨平台即开即用”的 API,而是平台能力的封装代理:

  • H5 端:uni.scanCode 调用后静默失败,控制台无报错,只触发 fail 回调——这是最常被忽略的“假失败”场景,本质是浏览器无权访问摄像头
  • 微信小程序:可用,但需在 manifest.json 中显式声明相机权限:{"mp-weixin": {"permission": {"scope.userCamera": {"desc": "用于扫码"}}}}
  • App 端(iOS/Android):可用,但依赖原生层是否集成 ZXing 或系统相机模块;iOS 需在 Info.plist 加 NSCameraUsageDescription,Android 6.0+ 需动态申请 android.permission.CAMERA

微信小程序扫码必须配 permission 字段

不配这个,uni.scanCode 在真机上点不动、没反应、也不报错,开发工具里却可能“看起来正常”——这是线上灰度发布后才发现问题的高发点。

  • 配置位置:项目根目录 manifest.json 的 mp-weixin 节点下
  • 必须写全字段结构,不能只写 "scope.userCamera": true,否则无效
  • 用户首次点击扫码按钮时,会弹系统级授权弹窗;拒绝后再次调用仍走 fail,且 err.errMsg 是 authorize:fail auth deny
  • 若需引导重授,得先调 uni.openSetting() 跳设置页,不能靠重试

App 端扫码识别率低?先关自动对焦

部分低端 Android 机型(尤其是联发科芯片 + 安卓 9~10)调用 uni.scanCode 后卡顿、模糊、反复失焦,不是算法问题,而是 DCloud 默认启用的自动对焦和闪光灯检测拖累了帧率。

uni-app
uni-app

uni-app 是基于 Vue 的跨端开发框架,适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载
  • 加参数禁用:{ scanType: ['qrCode'], onlyFromCamera: true, needResult: true, autoDecode: false }
  • autoDecode: false 表示不自动解析,交由你手动处理 raw 图像(极少需要),但能显著减少卡顿
  • 环境光不足时,识别失败的 err.errMsg 常是 scanCode:fail system error,而非明确提示“光线弱”,需结合 UI 提示用户补光
  • 扫码结果中 res.result 是纯字符串,条形码不含协议头,拼接跳转链接时得手动补 https://,否则 uni.navigateTo({ url: res.result }) 会静默失败

H5 端必须换方案:vue-qrcode-reader + HTTPS

硬用 uni.scanCode 在 H5 上注定失败。真实可行路径只有一条:用 vue-qrcode-reader(Vue2)或 @zxing/browser(Vue3),并确保运行在 HTTPS 环境。

  • 本地开发必须启用 HTTPS:manifest.json 中设 "h5": { "devServer": { "https": true } };Vite 项目还需加 @vitejs/plugin-basic-ssl
  • Chrome / Safari / Edge 可用,但部分安卓自带浏览器(如 UC 内核旧版)因 WebRTC 支持不全而白屏,需降级 fallback 提示
  • 扫码页面建议独立路由(如 /pages/scan/index.vue),避免嵌在复杂 scroll 容器里导致 canvas 渲染异常
  • 不要在 onLoad 里直接启动摄像头,等 DOM 挂载完成(onReady 或 nextTick)再调 start(),否则报 NotAllowedError

真正麻烦的不是写几行代码,而是每个平台的失败表现都不一样:H5 不报错、小程序不弹窗、App 卡在黑屏——调试时得盯着各端的 fail 和 complete 回调,而不是只信 success。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

uni-app

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

2743

5

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

2023.10.09

5963

6

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

6910

13

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

2024.03.22

6678

10

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

2024.05.22

943

5

json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

2023.08.07

2215

5

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.23

3502

1

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

2023.10.13

1176

3

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

2025.09.10

4039

7

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
uni-app从入门到实战教程
uni-app从入门到实战教程

共0课时 | 0人学习

uni-app x harmony开发指南
uni-app x harmony开发指南

共0课时 | 0人学习

uni-app鸿蒙运行和发行
uni-app鸿蒙运行和发行

共0课时 | 0人学习