ws_health/xui/wxapp/PROJECT_GUIDE.md

值班助手小程序 - 使用说明

项目介绍

值班助手是一个基于微信小程序的值班管理应用，使用 TDesign 组件库构建。

技术栈

• 微信小程序原生框架
• TDesign 微信小程序组件库

安装步骤

1. 安装依赖

npm install

2. 在微信开发者工具中配置

1. 打开微信开发者工具
2. 导入项目（选择本项目目录）
3. 在工具栏点击 工具 -> 构建 npm
4. 构建成功后，勾选 将 JS 编译成 ES5

3. 添加底部导航图标

需要在 images 目录下添加以下图标文件（PNG格式）：

• home.png - 首页图标（未选中）
• home-active.png - 首页图标（选中）
• mine.png - 我的图标（未选中）
• mine-active.png - 我的图标（选中）

4. 添加默认头像

在 images 目录下添加 default-avatar.png 作为默认头像图片

项目结构

attendant-wechat/
├── app.js                 # 小程序主入口
├── app.json              # 小程序全局配置
├── app.wxss              # 小程序全局样式
├── sitemap.json          # 站点地图配置
├── package.json          # 项目依赖配置
├── project.config.json   # 项目配置文件
├── pages/                # 页面目录
│   ├── index/           # 首页
│   │   ├── index.wxml   # 页面结构
│   │   ├── index.wxss   # 页面样式
│   │   ├── index.js     # 页面逻辑
│   │   └── index.json   # 页面配置
│   └── mine/            # 我的页面
│       ├── mine.wxml    # 页面结构
│       ├── mine.wxss    # 页面样式
│       ├── mine.js      # 页面逻辑
│       └── mine.json    # 页面配置
└── images/              # 图片资源目录
    ├── home.png         # 首页图标
    ├── home-active.png  # 首页图标（选中）
    ├── mine.png         # 我的图标
    ├── mine-active.png  # 我的图标（选中）
    └── default-avatar.png # 默认头像

页面说明

首页 (pages/index)

• 欢迎卡片：显示应用名称和欢迎语
• 快捷功能：今日值班、值班表、值班记录
• 统计信息：显示值班相关统计数据

我的 (pages/mine)

• 用户信息卡片：显示用户头像和昵称
• 功能菜单：个人信息、我的值班、值班统计、设置、帮助与反馈、关于
• 退出登录：退出当前账号

使用的 TDesign 组件

• t-button: 按钮组件
• t-cell: 单元格组件
• t-cell-group: 单元格组组件
• t-icon: 图标组件
• t-avatar: 头像组件
• t-card: 卡片组件
• t-divider: 分割线组件
• t-badge: 徽标组件

注意事项

1. 确保微信开发者工具的基础库版本 >= 2.12.0
2. 安装依赖后必须执行"构建 npm"操作
3. 建议在真机上测试，部分功能可能与模拟器有差异
4. 图标文件尺寸建议：未选中状态 81x81px，选中状态 81x81px

下一步开发建议

1. 实现用户登录功能
2. 对接后端 API，获取真实的值班数据
3. 添加数据缓存机制，提升用户体验
4. 实现消息通知功能
5. 添加数据导出功能