零基础转行・AI 赋能实战｜个人管理小程序：习惯打卡模块实战踩坑分享（上・基础篇）

在完成健康管理小程序全流程开发落地后，我继续深耕个人工具类项目，开启了逻辑复杂度更高的个人管理小程序开发。项目分工上，我主要负责页面设计、功能定义、逻辑架构、需求梳理、功能测试与多模块联动；代码编写、代码补全、问题修复等重复性开发工作，由 AI 辅助完成，全程迭代打磨。

本系列为个人管理小程序实战复盘，第一篇聚焦首个核心模块 ——习惯打卡，从开发初衷、整体架构、页面功能设计展开讲解。因模块逻辑较复杂，分为上下两篇，本文为上篇基础篇，下篇将分享踩坑问题与优化方案。

一、开发初衷
我本身是规划意识较强的人，日常有大量习惯养成、日常打卡的刚需。此前长期使用 Excel 做打卡记录，虽然数据完整、可追溯，但存在明显短板：操作繁琐、智能化不足，且无法和小程序内其他模块实现数据联动。

同时在完成健康管理项目后，我对小程序全链路开发流程更加熟悉，因此决定自研一款自用型习惯打卡小程序，贴合自身真实使用场景，实现模块内闭环联动。

二、整体功能架构
习惯打卡模块整体划分为四大核心页面：打卡首页、新建打卡页、打卡详情页、统计页，覆盖习惯创建、日常打卡、多场景记录、数据复盘全流程，下面对各页面功能做详细拆解。

1. 打卡首页
   首页作为习惯打卡总览页，用于展示整体打卡进度、完成情况，聚合全部打卡标签。每个习惯标签卡片包含多维度信息：时间维度完成进度、连续打卡天数、累计打卡天数、目标时间、习惯名称，以及进行中、已完成、中途放弃等状态标识。支持按标签筛选任务，可快速查看健身、进行中、已完成、中途放弃等分类下的习惯。

首页内置习惯管理弹窗，提供两类核心管理能力：

标签分类管理：支持自定义添加打卡标签；
习惯任务管理：可修改习惯状态为「进行中」「中途放弃」；已完成、中途放弃的任务直接完结，不可回退为进行中继续打卡；支持跳转编辑页修改习惯名称等信息，同时提供批量删除功能。
2. 新建打卡页
页面结构简洁轻量化，用于快速创建打卡习惯。内置常用习惯模板可一键选择，也支持自定义习惯名称、自定义图标（可选择不设置图标）；标签颜色可自定义，颜色会同步映射至首页标签卡片展示。可配置打卡时间段，系统自动根据起止时间计算目标打卡天数，同时可选择所属分类，完成习惯创建。

3. 打卡详情页
   针对不同使用场景，设计3 种差异化打卡模式，兼顾通用性与生活化需求：

常规打卡模式基础通用打卡入口，点击即可完成打卡，系统自动计算打卡时间、连续打卡次数、累计打卡次数、目标天数；支持填写打卡备注、上传图片记录打卡心得。

排便打卡模式采用专属 UI 风格，点击打卡弹出弹窗，可记录排便时间、形状、颜色、时长，支持填写备注；考虑到使用体验，该模块不支持图片上传。支持当日多次记录，但当日仅统计 1 次有效打卡，连续打卡、累计打卡只计数一次。

喝水打卡模式水杯主题可视化 UI，支持快捷加水操作；下方展示喝水记录，可删除单条记录；支持自定义每日喝水目标，目标达成后水杯视觉上呈现加满效果。与排便打卡逻辑一致，当日多次加水记录，仅统计一次有效打卡。

4. 统计页
   统计模块提供按日、按周、按月多维度数据可视化，方便复盘习惯执行情况：

按日统计：展示每日打卡历史，包含打卡状态、打卡时间，支持点击查看详情（可查看备注、上传图片），底部展示当日整体统计；
按周统计：陈列本周各习惯打卡数据，自动分析最佳打卡习惯、待加强习惯，同时展示本周总打卡次数与整体完成率；
按月统计：以每日为单位，将状态划分为已完成、部分完成、未开始、未完成，通过勾、叉等标识直观展示月度整体执行情况，附带总打卡次数、完美打卡天数。
额外做了逻辑优化：未开始、已结束的打卡任务，不在日、周统计中展示；对应时间段无任务时，周统计对应区域空白，不展示无效状态标识。

三、本篇小结
习惯打卡模块从习惯创建、日常打卡、特殊场景记录到多维度数据统计，形成完整闭环。整体基于个人真实使用场景设计，兼顾常规习惯与喝水、排便等生活化细节记录，同时在打卡计数、状态流转、数据隐藏等细节做了精细化逻辑处理。

下篇将重点分享该模块开发过程中遇到的实战踩坑、Bug 问题、交互细节优化方案，欢迎持续关注。