鸿蒙 API 17 健身打卡 App

项目概述

这是一个基于鸿蒙 API 17 + Node.js 后端的健身打卡应用。应用提供了完整的健身打卡功能，包括打卡记录管理、运动数据统计、运动计划制定等核心功能。

技术栈

前端（鸿蒙 API 17）

• 框架: HarmonyOS Stage 模型（基于 ArkTS 语言）
• 核心能力:
  • @State 状态管理
  • TextInput/Select 组件
  • List 组件
  • 关系型数据库（鸿蒙内置 relationalStore）

后端（Node.js）

• 框架: Express（轻量 Web 框架）
• 数据库: MySQL（关系型数据库，与前端数据模型对齐）
• 交互方式: HTTP 接口（前端通过 fetch 调用后端接口）

功能特性

1. 核心功能

• 打卡记录管理: 添加打卡、查看打卡列表
• 运动数据统计: 按周/月统计运动时长，可视化图表展示
• 运动计划制定: 创建/编辑运动计划（预留功能）
• 个人信息管理: 修改头像/昵称
• 打卡提醒设置: 开启/关闭定时提醒（预留功能）

2. 页面结构

• 首页: 包含"打卡""统计""计划"等入口
• 打卡添加页: TextInput（时长）+ Select（运动类型）+ 提交按钮
• 打卡列表页: List 组件展示所有打卡记录
• 统计页: 展示运动数据可视化图表

项目结构

entry/src/main/ets/
├── model/
│   └── UserProfile.ets          # 数据模型定义
├── pages/
│   ├── HomePage.ets            # 首页
│   ├── CheckInAddPage.ets      # 打卡添加页
│   ├── CheckInListPage.ets     # 打卡列表页
│   ├── StatisticsPage.ets      # 统计页面
│   ├── MainPage.ets            # 主页面（导航）
│   └── ProfilePage.ets         # 个人页面
├── utils/
│   ├── StorageUtil.ets         # 存储工具
│   └── DatabaseTest.ets        # 数据库测试工具
└── entryability/
    └── EntryAbility.ets        # 入口能力

数据模型

CheckIn 接口

export interface CheckIn {
  id: number;           // 主键
  sportType: string;    // 运动类型（如跑步、健身）
  duration: number;     // 运动时长（分钟）
  checkInTime: string;  // 打卡时间（格式：YYYY-MM-DD HH:mm:ss）
}

数据库设计

打卡表 (check_in)

CREATE TABLE check_in (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  sportType TEXT,
  duration INTEGER,
  checkInTime TEXT
)

性能优化措施

1. 代码优化

• 异步任务处理: 数据库操作使用异步处理，避免阻塞 UI 线程
• LazyForEach: 列表页用 LazyForEach 替代 ForEach，按需渲染列表项，减少内存占用

2. 资源管理

• 分页查询: 数据库查询时限制单次读取数量（如分页查询）
• 全局复用: 避免重复初始化数据库实例（全局复用 rdbStore）

3. 内存优化

• 内存缓存: 打卡数据写入后，通过内存缓存更新列表（无需重新全量查询数据库）
• 图片压缩: 图片资源（若有）使用压缩格式（如 WebP），并预加载常用图片

核心功能实现

1. 打卡添加功能

• 运动类型选择（跑步、健身、游泳、骑行、瑜伽、篮球、足球、网球）
• 运动时长输入（数字输入框）
• 数据验证和错误提示
• 数据库写入和成功反馈

2. 打卡列表功能

• 列表展示所有打卡记录
• 统计信息显示（总次数、总时长、平均时长）
• 运动类型图标显示
• 时间倒序排列

3. 统计功能

• 总体统计（总次数、总时长、平均时长）
• 运动类型分布（饼图展示）
• 时间段统计（本周/本月）
• 可视化图表（柱状图）

使用说明

1. 启动应用

# 使用 DevEco Studio 打开项目
# 选择设备或模拟器
# 点击运行按钮

2. 使用流程

1. 打开应用，进入首页
2. 点击"打卡"按钮，进入打卡添加页
3. 选择运动类型，输入运动时长
4. 点击"提交打卡"，数据保存到数据库
5. 自动跳转到打卡列表页查看记录
6. 点击"统计"按钮，查看运动数据统计

3. 测试数据库功能

// 在代码中调用数据库测试
import { DatabaseTest } from '../utils/DatabaseTest'

// 测试数据库连接
const success = await DatabaseTest.testDatabase(this.context)
if (success) {
  console.info('数据库测试成功')
}

扩展功能

预留功能

• 运动计划制定: 创建和编辑个人运动计划
• 打卡提醒设置: 设置定时提醒功能
• 计划分享: 分享运动计划给其他用户
• 个人设置: 修改个人信息和偏好设置

后端集成

• 用户认证: 用户登录注册功能
• 数据同步: 前后端数据同步
• 云端存储: 数据备份和恢复
• 社交功能: 好友系统和运动分享

开发规范

1. 代码规范

• 使用 TypeScript 严格模式
• 遵循鸿蒙开发最佳实践
• 组件化开发，模块化设计

2. 性能规范

• 异步处理耗时操作
• 合理使用内存缓存
• 优化列表渲染性能
• 数据库操作分页处理

3. UI 规范

• 遵循鸿蒙设计规范
• 响应式布局设计
• 统一的颜色和字体规范
• 良好的用户体验

常见问题

1. 数据库连接失败

• 检查数据库名称是否正确
• 确认安全级别设置
• 查看日志输出

2. 页面跳转异常

• 检查路由配置是否正确
• 确认页面名称拼写
• 查看页面生命周期

3. 性能问题

• 使用 LazyForEach 优化列表
• 合理使用内存缓存
• 异步处理数据库操作

版本历史

v1.0.0 (当前版本)

• ✅ 基础打卡功能
• ✅ 打卡列表展示
• ✅ 数据统计功能
• ✅ 性能优化实现
• 🔄 运动计划功能（预留）
• 🔄 提醒设置功能（预留）

贡献指南

欢迎提交 Issue 和 Pull Request 来改进这个项目。

许可证

本项目基于 MIT 许可证开源。