五页 Tab 架构
首页、训练、计划、数据、我的五个底部 Tab，每个页面有独立的数据流和交互逻辑。
HoopLog 是一款面向篮球爱好者的微信小程序，帮助用户记录每次训练数据、制定训练计划、并通过可视化统计追踪成长轨迹。项目使用微信原生框架（WXML + WXSS + JavaScript）开发，包含首页仪表盘、训练记录、计划管理、数据统计和个人中心五个核心模块，采用深色主题配合橙色强调色的视觉风格。
双类型训练记录
支持篮球专项（投篮出手/命中/命中率）和体能训练（组数/次数）两种记录模式，实时计算命中率。
数据可视化
柱状图展示最近 7 天训练时长、进度条对比篮球 vs 体能、排行榜展示高频训练项目。
训练计划系统
支持创建自定义训练计划、模板复用、日任务拆解和完成度追踪。
2026WeChat Mini ProgramWXMLWXSSJavaScript本地存储数据可视化
Home Dashboard
首页：今日状态一目了然
打开小程序即看到今日训练概览——今日时长、命中率、连续训练天数三大核心指标。本周训练数据以四宫格呈现，训练计划中的当日任务直接展示在首页，智能建议引擎根据历史记录生成个性化指导。
- 今日状态卡片：训练时长、命中率、连续训练天数 + 已训练/待训练标签。
- 本周训练概览：训练次数、总时长、投篮出手、平均命中率四维数据。
- 今日任务模块 + 智能建议 + 最近记录列表，首页即可完成大部分操作。
今日训练状态
已训练
45
分钟
今日时长
72
%
命中率
5
天
连续训练
本周训练概览
3
训练次数
120
总时长(分)
210
投篮出手
68%
平均命中
基础投篮 · 今日任务
原地投篮50次
罚球线30次
三步上篮20次
🏀 篮球专项
💪 体能训练
训练项目 *
基础投篮
罚球线
三步上篮
训练时长（分钟）*
45
出手次数
100
命中次数
72
当前命中率：72%
训练强度
低中高
保存训练记录
Training Record
双模式训练记录，实时反馈
训练记录页按篮球专项和体能训练分类切换。篮球模式下输入出手次数和命中次数、实时计算命中率；体能模式下记录组数和每组次数。训练项目、时长、强度均可快速选择，备注字段支持记录训练感受。
- 篮球专项记录：投篮出手/命中 → 命中率实时计算，训练强度（低/中/高）可选。
- 体能训练记录：组数 × 每组次数，适配力量和有氧训练。
- 保存后自动添加到首页"最近记录"和历史列表，支持查看和编辑。
Stats & Plan
数据统计 + 训练计划
数据统计页用柱状图展示最近 7 天训练时长趋势，投篮统计、训练项目排行榜和本周报告多维度呈现训练成果。训练计划支持创建自定义周期计划、使用内置模板，每个计划拆分为每日任务，进度条实时反馈完成度。
- 7 天柱状图 + 投篮总出手/命中/命中率 + 项目频次排行榜。
- 计划创建：设置名称、目标、周期天数、每周训练次数，自动生成每日任务。
- 双重进度条：任务完成率 + 训练频率，让计划执行情况一目了然。
24
总训练次数
1080
总时长(分)
🏀 投篮统计
2400
总出手
1632
总命中
68%
整体命中率
🏆 训练项目排行
🥇 基础投篮18次
🥈 罚球线投篮12次
🥉 三步上篮8次
What I Practiced
从零构建一个小程序带来的能力训练
HoopLog 是我第一个微信小程序项目，从页面结构设计到数据流管理，完整覆盖了小程序的开发全流程。
小程序框架
掌握 WXML 数据绑定、WXSS rpx 适配、Page 生命周期和 TabBar 配置，理解微信小程序的运行机制和限制。
本地数据管理
使用 wx.getStorageSync / setStorageSync 实现离线数据持久化，封装 utils 模块分离存储、统计、建议和计划逻辑。
UI 设计系统
深色主题 + 橙色强调色的统一设计语言，卡片式布局和进度条、选择器、徽章等组件的风格一致性。
产品思维
围绕"帮用户坚持训练"这个核心目标设计功能链路：记录→统计→计划→建议，形成正向激励循环。