更新记录

1.0.0（2025-12-22） 下载此版本

平台兼容性

uni-app(4.87)

lf-scan 扫码组件

高性能条形码/二维码扫描 uni-app 组件，支持多平台。

平台兼容性

Vue 版本支持

功能特性

• 🚀 高性能扫描 - App 端使用原生能力，小程序使用系统 API
• 📱 多码识别 - 支持 QR 码、EAN13、EAN8、Code128、Code39 等多种格式
• 💾 保存图片 - 可选将扫描结果图片保存到相册
• 🔦 闪光灯控制 - 暗光环境可开启闪光灯
• 🖼️ 相册识别 - 支持从相册选择图片识别
• 🎨 自定义样式 - 可配置扫描框、扫描线颜色
• 🔄 自动放大 - Android 端支持自动放大优化识别

安装使用

1. 复制组件

将 components/lf-scan 文件夹复制到你的项目 components 目录下。

2. 配置 manifest.json

在 App 端使用需要配置模块：

{
  "app-plus": {
    "modules": {
      "Barcode": {},
      "Camera": {}
    }
  }
}

3. 引入组件

<script>
import fScan from "@/components/lf-scan/lf-scan.vue";

export default {
  components: { fScan },
};
</script>

API

Props

Events

Methods

通过 ref 调用：

使用示例

基础用法

<template>
  <lf-scan @success="onSuccess" @fail="onFail" />
</template>

<script>
import fScan from "@/components/lf-scan/lf-scan.vue";

export default {
  components: { fScan },
  methods: {
    onSuccess(result) {
      console.log("扫描结果:", result.result);
    },
    onFail(error) {
      console.log("扫描失败:", error.errMsg);
    },
  },
};
</script>

自定义触发按钮

<template>
  <lf-scan @success="onSuccess">
    <template #trigger="{ startScan }">
      <button @click="startScan">自定义扫码按钮</button>
    </template>
  </lf-scan>
</template>

保存扫描图片

<template>
  <lf-scan :saveImage="true" @success="onSuccess" />
</template>

<script>
export default {
  methods: {
    onSuccess(result) {
      if (result.imageSaved) {
        console.log("图片已保存到相册");
      }
    },
  },
};
</script>

仅扫描二维码

<template>
  <lf-scan
    :scanType="['qrCode']"
    frameColor="#2196F3"
    scanbarColor="#2196F3"
    @success="onSuccess"
  />
</template>

支持的码类型

注意事项

1. 权限配置：App 端需要摄像头权限，manifest.json 中已包含必要权限配置
2. 真机测试：扫码功能需要在真机上测试，模拟器通常无法使用摄像头
3. H5 限制：H5 平台因浏览器安全限制无法直接调用摄像头扫码
4. 小程序审核：使用扫码功能的小程序需要在后台配置相关接口权限

许可证

MIT License