半路自学微信小程序开发的新手,一直在稳步迭代个人健康管理全栈项目。继饮食记录模块完成落地后,我耗时两天,顺利完成并上线「运动记录」模块。
目前模块运行稳定,无核心功能报错,整体可以正常使用。
我的开发模式一直很固定:页面原创设计、功能模块规划、交互逻辑梳理、项目整体骨架全部自己搭建,复杂逻辑与细节代码借助 AI 辅助完善,用这种互补方式慢慢打磨完整产品。
本身是半路入行非科班,完全从零硬做设计很容易消耗大量精力。所以这次运动模块,合理参考了苹果运动圆环的设计思路,适当借鉴成熟产品的视觉与交互逻辑。合理对标优质产品不算偷懒,反而能少走弯路、减少无效内耗,把精力更多放在功能落地和逻辑打磨上。
一、三大核心功能设计
整个运动记录模块拆分为三大板块,贴合日常健身长期使用需求:
1. 今日运动总览
顶部数据展示区,直观展示当日运动时长、热量消耗,搭配仪表盘可视化呈现,同时支持自定义设置每日运动目标,实时查看进度。
2. 自定义添加运动(核心)
区别于自带固定运动选项的工具,我在项目里内置了一百多种运动类型。只需填写运动分钟数,系统自动换算对应卡路里;同时开放手动修改热量数值,灵活适配个人身体情况与运动强度。
3. 运动数据分析 + 历史记录
这是和苹果原生运动工具差异最大的部分。自带目标完成情况统计、周期筛选、运动类型分类统计,完整留存每日运动历史;支持单条记录手动编辑、删除,方便日常纠错、整理数据,为后续全局数据汇总做铺垫。
二、开发过程踩坑与问题优化
很自豪的说,这是目前所有开发模块里 Bug 最少、落地最快的一个,只遇到三处小问题,全部顺利优化解决:
1. 移动端样式适配错位
微信开发者工具内调试时,样式完全正常、布局规整;但真机预览发现:运动时长、卡路里输入框整体偏小,数字文字无法居中、出现错位偏移。属于典型的真机适配问题,后期针对性微调样式,完成兼容优化。
2. 日期格式不统一,引发数据汇总异常
为了后续全局数据看板、多模块数据汇总联动,日期格式必须统一规范。开发初期没有做统一处理,日期有的补零、有的不补零,例如:2026-4-24 / 2026-04-24小程序端对日期格式校验严格,缺零会引发展示异常、汇总统计乱码、匹配失败等问题。后期统一做日期补零处理,标准化为 yyyy-MM-dd 格式,彻底规避后续数据联动隐患。
3. 运动类型过多,纠结筛选方案设计
考虑到长期使用,不局限于健身房常规训练,一次性内置了上百种运动类目,覆盖全场景。但品类过多就面临一个问题:是否需要增加筛选功能?综合权衡后暂时放弃:一方面额外筛选组件会破坏页面整体美观度,强行加入会打乱视觉节奏;另一方面参考手环、运动类 App 横向滑动浏览的交互,横向滑动翻阅完全够用,不影响日常使用。
目前先保留现有展示方案,筛选功能列入后期迭代计划,后续再优化兼顾美观与实用性的展示形式。
三、个人开发小结
从饮食模块到运动模块,一步步独立拆解需求、画页面、写逻辑、修兼容、踩坑复盘,半路自学小程序虽然进度慢一点,但每做完一个模块,实战理解都会扎实很多。后续继续稳步迭代剩余功能,持续记录开发全过程,沉淀实战经验与项目作品集。