更新记录

1.0.0（2026-10-19） 下载此版本

• 摄像头支持缩放功能；
• 拍照功能；
• 分屏补光功能
• 支持左右/上下分屏模式
• 每个区域可独立选择色卡颜色
• 分屏比例可调节（10%-90%）
• 分屏模式下禁用滑动切换色卡
• 初始版本发布
• 基础色卡管理功能
• HSL 颜色调节
• 镜子功能
• 手势操作
• 微信分享

平台兼容性

云端兼容性

uni-app(3.8.6)

云函数类插件通用教程

使用云函数类插件的前提是：使用HBuilderX 2.9+

补光灯助手

专业的色卡补光工具 - 基于微信小程序

一个简单易用的补光灯助手小程序，提供自定义色卡、实时预览、镜子功能、分屏补光等实用特性。

功能特性

• 🎨 色卡管理 - 支持添加、编辑、删除自定义色卡
• 🌈 HSL 颜色调节 - 精确控制色调、饱和度、明度
• 🪞 镜子功能 - 内置前置摄像头，方便补光时查看效果
• 👆 手势操作 - 上滑打开控制面板，左右滑动切换色卡
• 📱 全屏预览 - 沉浸式全屏颜色预览体验
• 🔀 分屏补光 - 支持左右/上下分屏，每区域独立颜色，可调节比例
• 📤 微信分享 - 支持分享给好友和朋友圈
• 📝 反馈功能 - 内置反馈页面，收集用户建议

技术栈

• 框架: uni-app (Vue 3)
• 状态管理: Vuex
• 开发语言: JavaScript
• 样式: SCSS

项目结构

Fill_light/
├── components/          # 组件目录
│   ├── ColorCard.vue   # 色卡组件
│   ├── ControlPanel.vue # 控制面板组件
│   ├── GradientSlider.vue # 渐变滑块组件
│   └── FloatingButton.vue # 浮动按钮组件
├── pages/              # 页面目录
│   ├── index/          # 首页
│   │   └── index.vue
│   └── feedback/       # 反馈页
│       └── feedback.vue
├── store/              # Vuex 状态管理
│   ├── index.js
│   └── modules/
│       ├── colorCards.js    # 色卡状态
│       └── settings.js     # 设置状态（含分屏配置）
├── utils/              # 工具函数
│   ├── color.js        # 颜色转换工具
│   ├── gesture.js      # 手势识别工具
│   └── storage.js      # 本地存储工具
├── static/             # 静态资源
│   ├── logo.png
│   └── weixinshare.jpg
├── App.vue             # 应用入口
├── main.js             # 主入口文件
├── manifest.json       # 应用配置
├── pages.json          # 页面配置
└── uni.scss            # 全局样式变量

核心功能说明

色卡管理

使用 Vuex 管理色卡数据，支持持久化存储到本地。

// 色卡数据结构
{
  id: 'unique-id',
  name: '色卡名称',
  hue: 180,        // 色调 0-360
  saturation: 50,  // 饱和度 0-100
  lightness: 50    // 明度 0-100
}

分屏补光

支持三种分屏模式，每个区域可独立设置不同颜色，分屏比例可调节。

• 全屏模式：纯色全屏补光
• 左右分屏：屏幕分为左右两个区域，可调节宽度比例
• 上下分屏：屏幕分为上下两个区域，可调节高度比例

分屏模式下：

• 每个区域独立选择色卡颜色
• 通过滑块调节分屏比例（10%-90%）
• 禁用左右滑动切换色卡的手势，避免冲突

颜色转换

支持 HSL 到 RGB 的颜色格式转换，用于实时渲染背景色。

手势识别

自定义手势识别器，支持以下操作：

• 上滑：打开控制面板
• 左滑：切换到下一个色卡（全屏模式）
• 右滑：切换到上一个色卡（全屏模式）

镜子功能

调用小程序原生 camera 组件，提供前置摄像头预览。

配置说明

微信小程序配置

在 manifest.json 中配置微信小程序相关参数：

{
  "mp-weixin": {
    "appid": "your-appid",
    "setting": {
      "urlCheck": false
    }
  }
}

权限配置

项目需要以下权限：

• 相机权限（镜子功能）
• 屏幕亮度控制（补光功能）

注意事项

1. 分享功能：分享到朋友圈需要小程序已发布或配置测试白名单
2. 相机权限：首次使用镜子功能需要用户授权相机权限
3. 数据存储：色卡数据存储在本地，清除缓存后会丢失
4. 性能优化：页面使用硬件加速提升渲染性能
5. 分屏模式：分屏模式下禁用左右滑动切换色卡功能

版本信息

• 当前版本: 1.1.0
• uni-app 版本: 3.x
• Vue 版本: 3.x