# aiots-wxapp

**Repository Path**: aiots_projects/aiots

## Basic Information

- **Project Name**: aiots-wxapp
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-18
- **Last Updated**: 2026-03-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# aiots-wxapp

IoT 加热设备控制与监控微信小程序

## 项目介绍

这是一个用于智能加热设备远程控制和实时监控的微信小程序。通过该应用，用户可以：

- 实时监控加热设备的温度、功率等运行数据
- 查看历史数据曲线图，支持温度和功率双轴显示
- 管理多个设备，方便切换不同设备进行监控
- 接收设备实时状态更新（通过 MQTT 推送）
- 自定义应用主题色，提供多种配色方案
- 账号管理和个人信息设置

## 技术栈

- **前端框架**: 微信小程序原生开发
- **状态管理**: 自定义响应式状态管理系统（基于 Vue3 风格 watch）
- **图表组件**: ECharts for WeChat
- **样式框架**: ColorUI
- **实时通信**: MQTT (EMQX Broker)
- **日期处理**: dayjs
- **包管理**: pnpm

## 项目架构

### 核心模块

- **全局状态管理**: 基于 `app.globalData` 的集中式状态系统，支持响应式监听
- **网络请求**: 统一的 API 请求层，自动处理 token 和错误
- **MQTT 实时通信**: 设备数据实时推送和订阅管理
- **主题系统**: 15 种预设主题，支持纯色和渐变色切换

### 目录结构

```
aiots-wxapp/
├── app.js                 # 应用入口，全局状态和生命周期
├── app.json              # 应用配置
├── app.scss              # 全局样式
├── components/           # 全局组件
│   ├── custom-nav/       # 自定义导航栏
│   ├── tab-bar/          # 自定义标签栏
│   ├── ec-canvas/        # ECharts 图表组件
│   ├── timeline/         # 时间轴组件
│   └── info/             # 信息展示组件
├── pages/                # 页面
│   ├── index/            # 设备监控主页
│   └── me/               # 个人中心
│       ├── theme/        # 主题选择
│       └── info/         # 账号管理
├── utils/                # 工具模块
│   ├── request.js        # API 请求封装
│   ├── api.js            # API 接口定义
│   ├── watch1.js         # 响应式 watch 系统
│   └── mqtt.js           # MQTT 客户端
└── colorui/              # ColorUI 样式库
```

## 安装教程

1. 克隆仓库到本地
   ```bash
   git clone <repository-url>
   cd aiots-wxapp
   ```

2. 安装依赖
   ```bash
   pnpm install
   ```

3. 使用微信开发者工具打开项目目录

4. 在 `project.config.json` 中配置正确的 `appid`

5. 配置后端 API 地址
   - 修改 `utils/api.js` 中的 `global.host` 为实际后端地址
   - 修改 `global.wsUrl` 为 MQTT Broker 地址

## 使用说明

### 开发调试

1. 打开微信开发者工具
2. 导入项目目录
3. **重要：点击菜单"工具" → "构建 npm"**，等待构建完成（首次打开项目必须执行此步骤）
4. 点击"编译"按钮运行项目
5. 在模拟器或真机上测试

### 功能说明

1. **登录**: 使用微信授权登录，获取用户信息
2. **设备监控**: 
   - 切换不同设备查看实时数据
   - 查看温度曲线（进管、出管温度）
   - 查看功率曲线和历史数据
3. **主题切换**: 在"我的"页面进入主题选择，切换应用配色
4. **账号管理**: 修改个人信息，查看账号状态

### API 接口

所有 API 接口定义在 `utils/api.js` 中，包括：
- 用户登录/信息获取
- 设备列表/详情
- 设备历史数据
- 设备操作日志
- 设备控制指令

## 参与贡献

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

## 版本历史

### v3.1.0 (2026-03-18)
- ✅ 初始版本发布
- ✅ 实现设备实时监控功能
- ✅ 集成 MQTT 实时数据推送
- ✅ 实现温度和功率双轴图表展示
- ✅ 完成主题系统（15种预设配色）
- ✅ 用户登录和账号管理
- ✅ 多设备管理和切换
- ✅ 项目构建和编译测试通过

## 注意事项

- 本项目依赖微信小程序环境，无法在普通浏览器中运行
- MQTT 连接需要网络支持，确保设备可访问 MQTT Broker
- 所有 API 请求需要有效的 token，token 存储在本地 storage 中
- 图表组件依赖微信基础库版本 >= 1.9.91，建议 >= 2.9.0

## 许可证

ISC