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

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 默认启用的自动对焦和闪光灯检测拖累了帧率。
- 加参数禁用:
{ 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。


















