7.3 KiB

Raw Permalink Blame History

快速开始指南

🎯 项目已完成的工作

✅ 已完成

项目结构搭建
- 清理了所有 TDesign 示例页面
- 创建了核心功能页面结构
- 配置了底部导航栏（TabBar）
核心页面开发
- ✅ 首页（工作台）- 设备统计、预警提醒、快捷入口
- ✅ 设备列表 - 搜索、筛选、状态标识
- ✅ 设备详情 - 完整信息展示、编辑、删除
- ✅ 添加/编辑设备 - 表单录入、日期选择
- ✅ 统计分析 - 数据统计（图表待开发）
- ✅ 预警中心 - 预警列表、时间筛选
- ✅ 预警设置 - 预警天数设置
- ✅ 个人中心 - 用户信息、功能入口
工具函数
- ✅ utils/deviceUtils.js - 设备数据处理、日期计算、预警判断
- ✅ utils/mockData.js - 模拟数据生成
UI组件
- ✅ 全局注册 TDesign 常用组件
- ✅ 统一的样式风格
- ✅ 响应式布局

🚀 如何运行项目

步骤 1：打开项目

启动微信开发者工具
选择"导入项目"
选择项目目录：/Users/syruan/WeChatProjects/miniprogram-1
AppID 使用：wx9d08fb2788d95136（或使用测试号）

步骤 2：构建 npm

在微信开发者工具中，点击菜单栏：工具 -> 构建 npm
等待构建完成（会生成 miniprogram_npm 目录）

步骤 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：数据持久化

// 方案一：使用本地存储（最简单）
// 在 utils/storage.js 中封装存储方法
function saveDevices(devices) {
  wx.setStorageSync('devices', devices);
}

function getDevices() {
  return wx.getStorageSync('devices') || [];
}

// 方案二：使用微信云开发（推荐）
// 1. 在微信开发者工具中开通云开发
// 2. 创建数据库集合 'devices'
// 3. 使用云数据库 API 进行 CRUD 操作

优先级 2：用户登录

// 使用微信登录
wx.login({
  success: res => {
    // 发送 res.code 到后端换取 openId, sessionKey, unionId
  }
});

// 获取用户信息
wx.getUserProfile({
  desc: '用于完善用户资料',
  success: res => {
    console.log(res.userInfo);
  }
});

优先级 3：消息推送

// 订阅消息
wx.requestSubscribeMessage({
  tmplIds: ['模板ID'],
  success: res => {
    // 订阅成功，可以发送模板消息
  }
});

优先级 4：统计图表

# 安装 echarts-for-weixin
npm install echarts-for-weixin --save

# 在页面中引入
import * as echarts from 'echarts-for-weixin';

🎨 自定义配置

修改主题色

编辑 app.wxss，修改以下变量：

--td-brand-color: #0052D9;  /* 主题色 */
--td-warning-color: #FF6B00; /* 预警色 */
--td-error-color: #E34D59;   /* 错误色 */

修改预警天数阈值

编辑 utils/deviceUtils.js，修改 getDeviceStatus 函数的默认参数：

function getDeviceStatus(daysLeft, warningDays = 30) {
  // warningDays 默认为 30 天，可以修改为其他值
}

添加新的设备类型

编辑 utils/mockData.js，在 getDeviceTypes 函数中添加：

function getDeviceTypes() {
  return ['全部', '安全帽', '安全带', '新设备类型', ...];
}

📞 技术支持

如遇到问题，请检查：

微信开发者工具版本是否最新
是否已执行"构建 npm"
基础库版本是否符合要求（>= 3.0.0）
查看控制台是否有错误信息

📚 相关文档

祝开发顺利！ 🎉

7.3 KiB Raw Permalink Blame History Unescape Escape