更新记录

1.0.0（2026-11-06） 下载此版本

首次发布：支持二维码/条形码扫码识别，二维码/条形码生成，扫码历史记录

平台兼容性

uni-app(5.08)

青檬二维码 - 扫码与生成工具模板（插件使用说明）

一个开箱即用的 uni-app 二维码 / 条形码工具类前端页面模板。包含完整的扫码识别、码图生成、历史记录页面与逻辑代码，可直接运行，也可以把页面复制进你自己的项目中使用。

• 技术栈：uni-app（Vue 3）+ Vite + Pinia
• 已验证平台：微信小程序
• 无后端依赖、无网络请求，全部数据存储在本地

一、功能特性

1. 扫码识别

• 调用 uni.scanCode 原生扫码，支持二维码（QR Code）与条形码（BarCode）两种类型
• 扫码前自动检查并引导申请相机权限，权限被拒时给出友好提示
• 扫码结果自动识别内容类型（网址、WiFi 信息、纯文本等），扫描结果页按类型提供不同操作（如打开链接、一键连接 WiFi 说明）
• 扫描结果自动写入历史记录

2. 码图生成

• 输入任意文本 / 链接，生成二维码（基于 @uqrcode/js 渲染到 Canvas）
• 生成条形码（Code128，自研 Canvas 组件渲染）
• 生成的码图可保存到本地相册

3. 历史记录

• 本地存储（uni.setStorage）保存扫码 / 生成记录，无需登录与后端
• 记录展示内容、码类型、来源、时间，支持清空管理

4. 其他

• 自定义 TabBar 组件（非原生 tabBar，页面切换动效更灵活）
• 首页跑马灯风险提示组件（WarningMarquee）
• 内容安全过滤工具（content-filter）
• "我的"页面含使用统计（扫码次数、生成次数）
• 关于与隐私声明页面

二、目录结构

├── src
│   ├── pages
│   │   ├── index/        # 首页（入口，发起扫码）
│   │   ├── generate/     # 生成码（二维码/条形码）
│   │   ├── result/       # 扫描结果页
│   │   ├── history/      # 历史记录
│   │   ├── me/           # 我的（统计信息）
│   │   └── about/        # 关于与隐私
│   ├── components
│   │   ├── QrCanvas.vue       # 二维码 Canvas 渲染组件
│   │   ├── BarCanvas.vue      # 条形码 Canvas 渲染组件
│   │   ├── CustomTabBar.vue   # 自定义底部导航
│   │   └── WarningMarquee.vue # 跑马灯提示
│   ├── utils
│   │   ├── scan.js             # 扫码封装（权限检查 + 结果分发）
│   │   ├── code-detect.js      # 扫码内容类型识别
│   │   ├── wifi-format.js      # WiFi 信息格式解析
│   │   ├── barcode.js          # 条形码（Code128）绘制
│   │   ├── camera-permission.js# 相机权限管理
│   │   ├── content-filter.js   # 内容过滤
│   │   ├── storage.js          # 本地存储封装
│   │   ├── tab-nav.js          # 自定义 TabBar 导航逻辑
│   │   └── time.js             # 时间格式化
│   ├── store/qrcode.js         # Pinia 全局状态（历史记录、统计）
│   ├── styles/                 # 公共样式与主题变量（绿色主题）
│   ├── pages.json              # 页面路由配置
│   ├── manifest.json           # 应用配置
│   ├── main.js                 # 应用入口（注册 Pinia）
│   └── App.vue
├── package.json
└── vite.config.js

三、快速开始（完整运行）

1. 解压后进入项目根目录，安装依赖：

npm install

2. 启动微信小程序开发模式：

npm run dev:mp-weixin

3. 打开微信开发者工具，导入目录：dist/dev/mp-weixin，填入你自己的小程序 AppID 即可预览。

也可以用 HBuilderX 直接导入本项目（HBuilderX 会识别为 CLI 工程，按提示执行 npm 脚本运行）。 正式发布请将 src/manifest.json 中的 mp-weixin.appid 替换为你自己的小程序 AppID。

四、集成到已有项目

如果只想把功能页面复制进你自己的 uni-app 项目：

1. 复制代码：把 src/pages 下的 6 个页面目录、src/components、src/utils、src/store、src/styles 复制到你的项目对应目录（CLI 项目在 src/ 下，HBuilderX 项目在根目录下）。
2. 安装依赖：

npm install @uqrcode/js pinia

3. 注册页面：把 src/pages.json 中 6 个页面的 pages 配置合并到你的 pages.json。
4. 注册 Pinia：参考 src/main.js，在创建应用实例时 app.use(createPinia())。
5. 引入样式：在 App.vue 或 uni.scss 中按需引入 styles/variables.scss、styles/common.scss。

五、隐私与安全声明

• 本模板不采集、不上传任何用户数据，不发送任何网络请求
• 历史记录等数据仅保存在用户设备本地（uni.setStorage）
• 需要的权限仅为小程序框架自身的相机（扫码）与相册（保存图片）权限，均在使用对应功能时由微信官方弹窗授权
• 模板代码本身不包含任何广告组件

六、常见问题

Q：扫码后没反应？ A：请确认已授权相机权限。微信开发者工具中扫码功能支持有限，建议真机预览测试。

Q：生成二维码报错？ A：确认已安装 @uqrcode/js 依赖（npm install @uqrcode/js），CLI 项目安装后需重新编译。

Q：保存图片失败？ A：保存到相册需要用户授权 scope.writePhotosAlbum，拒绝后可在小程序设置中重新开启。

七、版本记录

• v1.0.0（首次发布）：支持二维码 / 条形码扫码识别、码图生成、历史记录、使用统计