# HzLamp_SJ

**Repository Path**: xiaozh/hz-lamp_-sj

## Basic Information

- **Project Name**: HzLamp_SJ
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-06-03
- **Last Updated**: 2026-01-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 智能灯光控制系统小程序

<p align="center">
  <img src="images/001.png" width="400" alt="智能灯光控制系统">
</p>

智能灯光控制系统小程序是一款高性能的灯光控制微信小程序，支持多种智能灯具设备的搜索、连接和控制功能。通过该小程序，用户可以实现灯光颜色、亮度的调节，设置定时任务，创建自定义灯光场景，以及设备编组管理等功能。

## 主要功能

- **设备管理**：搜索、添加、删除和编辑设备
- **设备控制**：调节灯光RGBW通道、亮度、温度等参数
- **灯光模式**：支持手动模式和自动模式
- **定时任务**：设置灯光定时开关和场景切换
- **设备分组**：将多台设备加入同一分组，统一控制
- **高级曲线**：设置复杂的灯光渐变曲线
- **快捷场景**：预设多种灯光场景，一键切换

## 技术特点

- **蓝牙通信**：稳定的BLE蓝牙通信，支持自动重连
- **本地存储**：采用分层存储架构，支持复杂数据管理
- **组件化开发**：高度组件化，便于扩展和维护
- **多设备支持**：可扩展的设备类型系统架构
- **自动化构建**：完善的开发、测试、构建流程

## 快速开始

### 开发环境准备

- 安装 [Node.js](https://nodejs.org/) (>=12.0.0)
- 安装 [微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)

### 安装与运行

```bash
# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 使用微信开发者工具打开项目目录
```

### 构建生产版本

```bash
# 构建生产环境代码
npm run build
```

## 项目结构

项目采用分层架构设计：

```
├── pages/          # 页面文件
├── components/     # 组件文件
├── services/       # 服务层
├── utils/          # 工具函数
├── config/         # 配置文件
├── src/            # 设备相关实现
└── assets/         # 静态资源
```

详细的项目结构和开发文档请参考 [开发文档](docs/README.md)。

## 开发指南

参见 [开发指南](docs/guides/development.md) 了解详细的开发流程和规范。

## 贡献指南

我们欢迎各种形式的贡献，无论是新功能、文档改进还是bug修复。请遵循以下步骤：

1. Fork 本仓库
2. 创建你的特性分支 (`git checkout -b feature/amazing-feature`)
3. 提交你的更改 (`git commit -m 'Add some amazing feature'`)
4. 推送到分支 (`git push origin feature/amazing-feature`)
5. 提交 Pull Request

## 版权信息

Copyright © 2023-present YuGang Team.

## 联系我们

如有任何问题或建议，请 [提交Issue](https://github.com/yourusername/yugang/issues) 或发送邮件至 example@example.com。

## 关于警告消息处理

### 关于 SharedArrayBuffer 警告

在开发者工具中可能会看到如下警告：
```
[Deprecation] SharedArrayBuffer will require cross-origin isolation as of M92, around July 2021. See https://developer.chrome.com/blog/enabling-shared-array-buffer/ for more details.
```

这是因为 Chrome 浏览器的安全策略导致的警告。由于微信小程序运行在 WebView 环境中，而部分 WebView 会触发这个警告。**这个警告不会影响小程序的功能和使用**，可以安全忽略。

### 关于 wx.getSystemInfoSync 已弃用

我们已将项目中的 `wx.getSystemInfoSync()` 替换为推荐的新 API：
- `wx.getDeviceInfo()`：获取设备信息
- `wx.getWindowInfo()`：获取窗口信息
- `wx.getAppBaseInfo()`：获取基础应用信息

## 使用须知

1. 本项目最低基础库版本要求：2.15.0
2. 使用网络相关功能时，请确保已正确配置服务器域名
3. 如需在真机上调试且连接本地服务器时，请在开发者工具中开启"不校验合法域名"选项

## 其他说明

详情请参考官方文档：
- [微信小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/framework/)
- [网络相关文档](https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html)

## 设备类型独立模块重构

本项目完成了淡水设备和海水设备的完全独立模块化设计，解决了之前共享页面和逻辑带来的问题。

### 设计目标

- 将淡水设备和海水设备作为完全独立的两个模块
- 基本逻辑功能相同但可独立调整
- 便于后期针对不同设备类型进行单独的调整和更新
- 避免修改一种设备类型代码影响另一种设备

### 目录结构

```
src/
  └── device_types/
      ├── freshwater_lamp/  # 淡水设备模块
      │   ├── components/   # 淡水设备组件
      │   ├── pages/        # 淡水设备页面
      │   ├── services/     # 淡水设备服务
      │   └── utils/        # 淡水设备工具函数
      │
      └── seawater_lamp/    # 海水设备模块
          ├── components/   # 海水设备组件
          ├── pages/        # 海水设备页面
          ├── services/     # 海水设备服务
          └── utils/        # 海水设备工具函数
```

### 重构内容

1. **设备类型标识**：
   - 每个设备增加`deviceType`属性，用于区分淡水设备(`freshwater_lamp`)和海水设备(`seawater_lamp`)
   - 在设备搜索和配置过程中，根据设备ID前缀(`ds_`或`hs_`)判断设备类型

2. **独立页面模块**：
   - 模式设置页(`mode_setting`)
   - 快捷模式页(`shortcut_mode`)
   - 玩家模式页(`player_mode`) 
   - 高阶模式页(`advanced_mode`)

3. **路由导航**：
   - 首页根据设备类型动态选择不同的页面路径
   - 各模式页面间的导航也保持在同一设备类型的路径中

4. **UI样式差异**：
   - 淡水设备：绿色主题
   - 海水设备：蓝色主题
   - 独立的CSS样式和标识

5. **数据存储**：
   - 存储服务增加`deviceType`参数
   - 确保不同设备类型的数据相互隔离

### 设计亮点

1. **完全独立**：修改一个设备类型的代码不会影响另一个设备类型
2. **相同逻辑复用**：两种设备类型具有相同的基本功能和结构
3. **差异化UI**：不同设备类型拥有独特的UI主题和视觉识别
4. **数据隔离**：不同设备类型的数据完全分离存储

### 后续维护

- 针对特定设备类型的功能可以只修改对应模块
- 共享功能的更新需要同步修改两个模块
- 可考虑未来引入更多设备类型而不影响现有功能 

# 小程序图片优化工具

## 图片优化工具套件

本项目包含一套完整的图片优化工具，用于优化微信小程序中的图片资源，提升加载速度和用户体验。

### 工具列表

1. **图片分析工具** - 扫描项目中的图片使用情况
   ```bash
   npm run image:analyze
   ```

2. **图片优化工具** - 将图片转换为WebP格式并优化
   ```bash
   npm run image:optimize
   ```

3. **自适应图片处理工具** - 为不同设备生成不同尺寸图片
   ```bash
   npm run image:adaptive
   ```

4. **延迟加载图片组件** - 创建延迟加载图片组件
   ```bash
   npm run image:component
   ```

5. **一键优化** - 执行所有优化步骤
   ```bash
   npm run image:all
   ```

### 详细说明

请参考 [图片优化完全指南](./docs/guides/image_optimization_guide.md) 了解详细用法。

## 优化效果

- 减少60-80%的图片体积
- 根据设备提供合适尺寸图片
- 大图片使用延迟加载提升体验
- 自动检测和处理重复图片

## 使用流程

1. 分析图片资源状况
2. 优化大体积图片
3. 生成自适应图片
4. 使用延迟加载组件