96 lines
3.2 KiB
Markdown
96 lines
3.2 KiB
Markdown
# 值班助手小程序 - 使用说明
|
||
|
||
## 项目介绍
|
||
值班助手是一个基于微信小程序的值班管理应用，使用 TDesign 组件库构建。
|
||
|
||
## 技术栈
|
||
- 微信小程序原生框架
|
||
- TDesign 微信小程序组件库
|
||
|
||
## 安装步骤
|
||
|
||
### 1. 安装依赖
|
||
```bash
|
||
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. 添加数据导出功能
|