254 lines
7.3 KiB
Markdown
254 lines
7.3 KiB
Markdown
# 快速开始指南
|
||
|
||
## 🎯 项目已完成的工作
|
||
|
||
### ✅ 已完成
|
||
1. **项目结构搭建**
|
||
- 清理了所有 TDesign 示例页面
|
||
- 创建了核心功能页面结构
|
||
- 配置了底部导航栏（TabBar）
|
||
|
||
2. **核心页面开发**
|
||
- ✅ 首页（工作台）- 设备统计、预警提醒、快捷入口
|
||
- ✅ 设备列表 - 搜索、筛选、状态标识
|
||
- ✅ 设备详情 - 完整信息展示、编辑、删除
|
||
- ✅ 添加/编辑设备 - 表单录入、日期选择
|
||
- ✅ 统计分析 - 数据统计（图表待开发）
|
||
- ✅ 预警中心 - 预警列表、时间筛选
|
||
- ✅ 预警设置 - 预警天数设置
|
||
- ✅ 个人中心 - 用户信息、功能入口
|
||
|
||
3. **工具函数**
|
||
- ✅ `utils/deviceUtils.js` - 设备数据处理、日期计算、预警判断
|
||
- ✅ `utils/mockData.js` - 模拟数据生成
|
||
|
||
4. **UI组件**
|
||
- ✅ 全局注册 TDesign 常用组件
|
||
- ✅ 统一的样式风格
|
||
- ✅ 响应式布局
|
||
|
||
## 🚀 如何运行项目
|
||
|
||
### 步骤 1：打开项目
|
||
1. 启动**微信开发者工具**
|
||
2. 选择"导入项目"
|
||
3. 选择项目目录：`/Users/syruan/WeChatProjects/miniprogram-1`
|
||
4. AppID 使用：`wx9d08fb2788d95136`（或使用测试号）
|
||
|
||
### 步骤 2：构建 npm
|
||
1. 在微信开发者工具中，点击菜单栏：**工具 -> 构建 npm**
|
||
2. 等待构建完成（会生成 `miniprogram_npm` 目录）
|
||
|
||
### 步骤 3：编译运行
|
||
1. 点击工具栏的"编译"按钮
|
||
2. 在模拟器中查看效果
|
||
3. 或点击"预览"在真机上测试
|
||
|
||
## 📱 功能演示
|
||
|
||
### 首页（工作台）
|
||
- 查看设备总数、预警数、到期数
|
||
- 查看最新的预警提醒（前3条）
|
||
- 使用快捷入口：
|
||
- 点击"设备台账"进入设备列表
|
||
- 点击"添加设备"添加新设备
|
||
- 点击"统计分析"查看统计数据
|
||
- 点击"扫码查询"扫描设备二维码（功能待完善）
|
||
|
||
### 设备台账
|
||
- 使用搜索框搜索设备（支持名称、编号、型号）
|
||
- 点击顶部标签筛选状态（全部、正常、预警、已到期）
|
||
- 点击右侧筛选图标进行高级筛选（设备类型、使用单位）
|
||
- 点击设备卡片查看详情
|
||
- 点击右下角"+"按钮添加新设备
|
||
|
||
### 设备详情
|
||
- 查看设备完整信息
|
||
- 点击"编辑设备"修改信息
|
||
- 点击"删除设备"删除设备（会弹出确认对话框）
|
||
|
||
### 添加/编辑设备
|
||
- 填写设备基本信息（名称、编号、规格型号等）
|
||
- 选择使用单位
|
||
- 选择检验日期
|
||
- 填写备注信息（可选）
|
||
- 点击"添加"或"保存"提交
|
||
|
||
### 统计分析
|
||
- 查看设备总数和预警率
|
||
- 查看设备类型统计列表
|
||
- 图表功能待开发（可集成 echarts-for-weixin）
|
||
|
||
### 预警中心
|
||
- 切换标签查看不同时间范围的预警（全部、7天内、15天内、已到期）
|
||
- 点击预警项查看设备详情
|
||
|
||
### 预警设置
|
||
- 设置提前预警天数（7天、15天、30天、60天、90天）
|
||
|
||
### 个人中心
|
||
- 查看用户信息
|
||
- 访问预警设置
|
||
- 查看关于我们
|
||
|
||
## 🔧 当前使用的模拟数据
|
||
|
||
项目目前使用 `utils/mockData.js` 中的模拟数据，包含：
|
||
- 10 台设备的完整信息
|
||
- 不同状态的设备（正常、预警、已到期）
|
||
- 最近操作记录
|
||
- 设备类型和使用单位列表
|
||
|
||
**数据特点**：
|
||
- 设备 ID 1（绝缘手套）：即将到期（预警状态）
|
||
- 设备 ID 3（安全带）：已到期
|
||
- 其他设备：正常或预警状态
|
||
|
||
## ⚠️ 已知问题
|
||
|
||
### 1. TabBar 图标缺失
|
||
**现象**：底部导航栏只显示文字，没有图标
|
||
|
||
**原因**：图标文件未创建
|
||
|
||
**解决方案**：
|
||
- **临时方案**：当前已配置为纯文字 TabBar，可以正常使用
|
||
- **完整方案**：准备图标文件（81px * 81px，PNG格式），放入 `assets/icons/` 目录，然后在 `app.json` 中配置图标路径
|
||
|
||
所需图标：
|
||
```
|
||
assets/icons/
|
||
├── home.png # 首页图标（未选中）
|
||
├── home-active.png # 首页图标（选中）
|
||
├── device.png # 设备图标（未选中）
|
||
├── device-active.png # 设备图标（选中）
|
||
├── chart.png # 统计图标（未选中）
|
||
├── chart-active.png # 统计图标（选中）
|
||
├── warning.png # 预警图标（未选中）
|
||
├── warning-active.png # 预警图标（选中）
|
||
├── user.png # 我的图标（未选中）
|
||
└── user-active.png # 我的图标（选中）
|
||
```
|
||
|
||
### 2. 数据不持久化
|
||
**现象**：刷新页面后数据恢复到初始状态
|
||
|
||
**原因**：使用模拟数据，未实现数据持久化
|
||
|
||
**解决方案**：参考 `PROJECT_GUIDE.md` 中的"数据管理"章节，选择以下方案之一：
|
||
- 微信云开发（推荐）
|
||
- 本地存储（wx.setStorageSync）
|
||
- 后端 API
|
||
|
||
### 3. 部分功能待开发
|
||
以下功能显示"功能开发中"提示：
|
||
- 扫码查询（需要生成设备二维码）
|
||
- 统计图表（需要集成 echarts-for-weixin）
|
||
- 数据导出
|
||
- 单位管理
|
||
- 帮助中心
|
||
- 消息推送
|
||
|
||
## 📝 下一步开发建议
|
||
|
||
### 优先级 1：数据持久化
|
||
```javascript
|
||
// 方案一：使用本地存储（最简单）
|
||
// 在 utils/storage.js 中封装存储方法
|
||
function saveDevices(devices) {
|
||
wx.setStorageSync('devices', devices);
|
||
}
|
||
|
||
function getDevices() {
|
||
return wx.getStorageSync('devices') || [];
|
||
}
|
||
|
||
// 方案二：使用微信云开发（推荐）
|
||
// 1. 在微信开发者工具中开通云开发
|
||
// 2. 创建数据库集合 'devices'
|
||
// 3. 使用云数据库 API 进行 CRUD 操作
|
||
```
|
||
|
||
### 优先级 2：用户登录
|
||
```javascript
|
||
// 使用微信登录
|
||
wx.login({
|
||
success: res => {
|
||
// 发送 res.code 到后端换取 openId, sessionKey, unionId
|
||
}
|
||
});
|
||
|
||
// 获取用户信息
|
||
wx.getUserProfile({
|
||
desc: '用于完善用户资料',
|
||
success: res => {
|
||
console.log(res.userInfo);
|
||
}
|
||
});
|
||
```
|
||
|
||
### 优先级 3：消息推送
|
||
```javascript
|
||
// 订阅消息
|
||
wx.requestSubscribeMessage({
|
||
tmplIds: ['模板ID'],
|
||
success: res => {
|
||
// 订阅成功，可以发送模板消息
|
||
}
|
||
});
|
||
```
|
||
|
||
### 优先级 4：统计图表
|
||
```bash
|
||
# 安装 echarts-for-weixin
|
||
npm install echarts-for-weixin --save
|
||
|
||
# 在页面中引入
|
||
import * as echarts from 'echarts-for-weixin';
|
||
```
|
||
|
||
## 🎨 自定义配置
|
||
|
||
### 修改主题色
|
||
编辑 `app.wxss`，修改以下变量：
|
||
```css
|
||
--td-brand-color: #0052D9; /* 主题色 */
|
||
--td-warning-color: #FF6B00; /* 预警色 */
|
||
--td-error-color: #E34D59; /* 错误色 */
|
||
```
|
||
|
||
### 修改预警天数阈值
|
||
编辑 `utils/deviceUtils.js`，修改 `getDeviceStatus` 函数的默认参数：
|
||
```javascript
|
||
function getDeviceStatus(daysLeft, warningDays = 30) {
|
||
// warningDays 默认为 30 天，可以修改为其他值
|
||
}
|
||
```
|
||
|
||
### 添加新的设备类型
|
||
编辑 `utils/mockData.js`，在 `getDeviceTypes` 函数中添加：
|
||
```javascript
|
||
function getDeviceTypes() {
|
||
return ['全部', '安全帽', '安全带', '新设备类型', ...];
|
||
}
|
||
```
|
||
|
||
## 📞 技术支持
|
||
|
||
如遇到问题，请检查：
|
||
1. 微信开发者工具版本是否最新
|
||
2. 是否已执行"构建 npm"
|
||
3. 基础库版本是否符合要求（>= 3.0.0）
|
||
4. 查看控制台是否有错误信息
|
||
|
||
## 📚 相关文档
|
||
|
||
- [微信小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/framework/)
|
||
- [TDesign 小程序组件库](https://tdesign.tencent.com/miniprogram/overview)
|
||
- [微信云开发文档](https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html)
|
||
|
||
---
|
||
|
||
**祝开发顺利！** 🎉
|
||
|