更新记录

1.0.0（2026-03-30）

1.更新持续扫码场景app端插件，可自定义

平台兼容性

uni-app(3.7.3)

Vue2 Vue2插件版本 Vue3 Vue3插件版本 Chrome Safari app-vue app-vue插件版本 app-nvue app-nvue插件版本 Android Android插件版本 iOS iOS插件版本 鸿蒙
√ 1.0.0 √ 1.0.0 - - √ 1.0.0 √ 1.0.0 √ 1.0.0 √ 1.0.0 -
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 小红书小程序 快应用-华为 快应用-联盟
× × × × × × × × × × × ×

uni-app x(3.7.2)

Chrome Safari Android iOS 鸿蒙 微信小程序
- - - - - -

yx-curstomAppScan

微信小程序端需要 持续扫码（原生 camera + scanCode 等）时，请使用 DCloud 插件 yx-customScan，详见：持续扫码和独立扫码封装 - yx-customScan。
本文档 yx-curstomAppScan 仅面向 App nvue（原生 barcode），与小程序插件互为独立方案。

uni-app App 端 nvue 持续扫码容器：布局与业务页 pages-qr/qrcode/qr.nvue 一致（上：插槽头 / 中：原生 barcode / 下：插槽底），内置 ScanBarcode（与历史 components/ScanBarcode.nvue 行为一致）。

插件市场上架与 easycom（含「可设置价格」）

DCloud 要求：若插件在市场中设置售价，主包须符合 easycom 组件规范，即路径为：

uni_modules/插件ID/components/组件名称/组件名称.(vue|uvue)

仅有 .nvue 时，上传会提示：仅 easycom 规范的前端组件插件可设置价格。

本插件已额外提供与 .nvue 逻辑一致的 yx-curstomAppScan.vue、ScanBarcode.vue，用于通过上述校验；页面侧仍可继续 import .nvue（与历史一致），或使用 easycom 标签 yx-curstom-app-scan（将解析到 .vue）。真机能力仍以 App nvue + 原生 barcode 为准，请勿在非 App nvue 场景依赖本组件。

Vue 2 / Vue 3

组件均为 Options API，未使用 defineProps / defineEmits 等仅组合式或 Vue 3 专用写法，uni-app 的 Vue 2 与 Vue 3 工程均可引用。

  • 插槽：Vue 3 必须使用 <template #header> / <template #footer>（或 v-slot:header）。Vue 2 可用 <template slot="header">。勿在 Vue 3 里写 slot="header"，否则具名插槽不会传入，头、底会空白。
  • 事件：仍使用 this.$emit('success', e)，两端一致。

职责划分

内容 位置
整页布局、扫码区、start / stop / setFlash 本插件 yx-curstomAppScan.nvue 或 yx-curstomAppScan.vue（二选一 import / easycom）
扫码列表、防抖去重、业务校验、successScan、onLoad 等 业务 mixin（如 qrNvueMixins.ts），仍在页面

插件 不包含 @/utils/scanCodeValidator、QR_GLOBAL_SUCCESS_SCAN_EVENT 等业务依赖，保证可复用。

引用

仅在 nvue 页面 使用（需真机 App 能力）。

手动引用（任选其一，逻辑一致）：

import YxCurstomAppScan from '@/uni_modules/yx-curstomAppScan/components/yx-curstomAppScan/yx-curstomAppScan.nvue'
// 或通过 easycom 自动引入 .vue 版本：
// import YxCurstomAppScan from '@/uni_modules/yx-curstomAppScan/components/yx-curstomAppScan/yx-curstomAppScan.vue'

也可不配 import，在 nvue 模板中写 <yx-curstom-app-scan>（依赖 yx-curstomAppScan.vue 的 easycom）。

与 qrNvueMixins 的衔接

页面根组件 ref 建议仍为 scanBarcode，则 mixin 内 startScan / stopScan / toggleFlash 无需修改：

  • this.$refs.scanBarcode.start() → 插件转调内层 ScanBarcode.start()
  • this.$refs.scanBarcode.stop() → ScanBarcode.stop()
  • this.$refs.scanBarcode.setFlash(flag) → ScanBarcode.setFlash(flag)
  • @success="onMarked"、 @error="onError" 绑在插件上即可（与原先绑在 ScanBarcode 相同）

Props（根组件 yx-curstomAppScan.nvue）

属性 类型 默认 说明
filters Array [0, 1] 条码类型过滤，含义见内层 ScanBarcode.nvue 注释
autostart Boolean true 是否自动启动（等价原 ScanBarcode）
frameColor String #1C86EE 取景框颜色
scanbarColor String #1C86EE 扫描线颜色
barcodeWidth String 750rpx 内层原生 barcode 宽度（可 rpx / px / % 等）
barcodeHeight String '' 内层高度；留空时纵向 flex: 1 填满扫码区（与历史行为一致）；有值时 flex: 0 并固定高度
scanAreaStyle Object {} 扫码区外层（scan-area）额外样式，与默认 flex 合并，如 { maxHeight: '400px' }
scanAreaFlex Number / String 1 扫码区在竖向布局中的 flex

内层 ScanBarcode.nvue 具有同名能力与注释，若不经过根组件而是单独使用（一般不推荐），规则相同。

事件

事件 说明
success 解码成功，载荷与原 ScanBarcode @marked 转成的 success 一致（供 onMarked 使用）
error 解码失败等

插槽

插槽 说明
header 如 ScanHeader（返回、手电筒）
footer 如 ScanFooter；单列页可无此插槽

实例方法

方法 说明
start() 开始扫描
stop() 停止扫描
setFlash(on) 闪光灯开关
getScanBarcodeRef() 内层 ScanBarcode 实例（高级用法）

文件结构

uni_modules/yx-curstomAppScan/
├── components/yx-curstomAppScan/
│   ├── yx-curstomAppScan.vue     # 与 nvue 同逻辑；满足 easycom + 上架定价校验
│   ├── yx-curstomAppScan.nvue    # 对外入口（与 .vue 二选一）
│   └── components/
│       ├── ScanBarcode.vue       # 同上，easycom 子组件
│       └── ScanBarcode.nvue      # 原生 barcode 封装
├── package.json
└── readme.md

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

插件不采集任何数据

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

评论列表 撰写评论 向官方投诉

暂无用户评论。