新生儿喂养记录微信小程序：本地存储、四套主题，以及一份可改期的疫苗体检日程
夜里喂完一顿奶，手里经常同时占着宝宝和奶瓶，再去翻聊天记录找「上一顿是几点」很不顺手。这个小程序把喂养、尿布、睡眠、成长和补充剂收成一条时间线，数据写在手机本地，换机时导出 JSON。疫苗和体检单独做日程，不跟喂养记录混在同一张表里。
协议 Apache-2.0。源码：
- GitHub：https://github.com/XH-fenger/newborn-feed-tracker
- Gitee：https://gitee.com/fengger1102/newborn-feed-tracker
一、它适合放在手边打开
对象是正在记新生儿作息的家庭，以及想看一个原生小程序怎么把自定义导航、主题和本地数据放在一起的开发者。
用起来就四件事：
- 打开首页，看今天喂了几次、一共多少毫升、尿布和睡眠，以及离上次喂养过了多久。
- 到底部「记录」记一笔。再次进入这个 Tab 时，表单回到当前时间的空白记录；只有从历史点进某一条，才会带出那条继续改。
- 在统计里看近 7 天的奶量、尿布、睡眠和体重。
- 在待办里放体检和疫苗。可以按出生日生成一份常见日程，右侧日期能直接改。
底部只有首页、记录、统计、我的。待办从首页预览和「我的」进入，避免再加第五个 Tab。
二、界面
首页四张今日卡片点进去，会打开全部记录并选中对应筛选：喂养次数和总奶量都落到「喂养」，尿布、睡眠各自对应。主题可以换成晨雾青这一类配色，深色开关在右上角胶囊左侧。间隔到了会进入全屏提醒，可以稍后提醒或停止。
| 首页 | 晨雾青 | 深色首页 | 记一笔 | 统计 |
|---|---|---|---|---|
| 待办 | 全部记录 | 我的 | 宝宝资料 | 提醒 |
|---|---|---|---|---|
待办按「已逾期 / 即将到来」分组，首页最多预览两件未完成事项。全部记录按天分组，左滑删除。「我的」里改昵称、性别、出生日，头像随性别切换，并集中放间隔、主题、导出和导入。
三、功能分块
| 模块 | 页面上能做什么 |
|---|---|
| 首页 | 今日次数、奶量、尿布、睡眠；距上次喂养的圆环按分钟刷新；最近记录；待办预览。四张卡片分别带上喂养 / 尿布 / 睡眠筛选 |
| 记一笔 | 母乳按解冻后实际喂下的毫升填；奶粉填毫升；混合保留左右侧和计时。另有尿布、睡眠、成长，以及维生素 K1、维生素 D、维生素 AD、铁剂等补充 |
| 统计 | 近 7 天喂养柱状图，点某一天看明细；尿布、睡眠、成长同一套分段；最高、平均、最低 |
| 全部记录 | 喂养 / 尿布 / 睡眠 / 补充筛选，按日分组，左滑删除，点进编辑 |
| 待办 | 疫苗、体检、其它。可按出生日生成日程，点右侧日期改期，也可改名称和备注 |
| 提醒 | 超过设定的喂养间隔后，打开小程序回到首页会进入全屏提醒，可贪睡约 9 分钟，或停下后静默约 1 小时。间隔可在 1.5 到 4 小时之间选 |
| 我的 | 宝宝资料、四套主题、深色模式、导出 / 导入、清空喂养记录（待办保留） |
生成日程对齐的是《国家免疫规划疫苗儿童免疫程序及说明（2021年版）》里的常规剂次，乙脑和甲肝取减毒活疫苗那一套，并带上 42 天、满月到 6 岁的常见体检。这是一份提醒草稿，方便对照预防接种证，实际针次以接种门诊为准。同一标题不会重复生成。
四、技术选型
| 层面 | 选择 | 原因 |
|---|---|---|
| 框架 | 微信小程序原生 | 页面不多，自定义导航和 Tab 用原生更直接 |
| 数据 | wx.setStorageSync，单键newborn_feed_v1 | 奶量和作息留在设备上，不先注册再上传 |
| 图表 | utils/charts.js里 canvas 2d 手绘 | 柱状图和折线不引入图表库 |
| 图标 | utils/icons.js生成 SVG data URI | 颜色、尺寸随主题变，无图标字体 |
| 导航 | 自定义navigationStyle，度量集中在utils/nav.js | 右上角胶囊位置每台机器不一样 |
| Tab | custom-tab-bar | 毛玻璃底栏，选中项随主题色变化 |
| 主题 | theme.wxss的 CSS 变量，四套主题和深色正交 | 换主题只改变量，页面 class 挂t-{{theme}} |
四套主题是靛蓝、晨雾青、暖阳橘、莓果粉。深色模式把内容区压暗，首页顶部渐变仍保持浅色文字能读清。主题和深色记在本机设置里，导入备份时不覆盖这台设备的外观。
五、几处实现
1. 一个存储键里的四段数据
宝宝资料、喂养记录、待办、设置放在一起，读的时候缺哪段就补哪段，旧数据没有todos也不会坏。
varKEY='newborn_feed_v1';functiondefaultDb(){return{baby:{name:'宝宝',gender:'M',birthday:'',birthWeight:''},records:[],todos:[],settings:{theme:'indigo',dark:false,reminderEnabled:true,feedInterval:180}};}记录 id 用r_前缀，待办用t_。喂养按时间倒序插入，首页取最近几条不用每次全表重排。导出的 JSON 带上待办；导入可以按 id 合并，也可以覆盖。覆盖前先留一份当前数据的快照。清空喂养记录时只动records，todos原样留下。
返回给页面的记录列表是数组副本。若把内部数组的引用交出去，后续删除再导入时，旧引用可能把已经删掉的记录又写回来。
2. 出生日加 N 个月，要处理月末
2026-01-31加 1 个月，不能得到 3 月 2 日或 3 日。做法是先落到目标月的 1 号，查出该月最后一天，再把出生日的「日」夹到这个月末。1 月 31 日加 1 个月得到 2 月 28 日；42 天体检则直接按天加。
functionaddMonths(ymd,months){varp=ymd.split('-');vary=parseInt(p[0],10);varm=parseInt(p[1],10)-1;vard=parseInt(p[2],10);varfirst=newDate(y,m+months,1);varlast=newDate(first.getFullYear(),first.getMonth()+1,0).getDate();returnnewDate(first.getFullYear(),first.getMonth(),Math.min(d,last)).getTime();}列表很长时，改期不必滚回页面顶部的表单。每一行右侧就是日期选择器，改完写回due。
3. 顶栏让开胶囊
自定义导航若写死状态栏高度，刘海机和右上角胶囊之间会空出一条，或者文字钻进胶囊。utils/nav.js用statusBarHeight和getMenuButtonBoundingClientRect算出四个数：状态栏高度、胶囊那一行的高度、这一行的底边、内容距屏幕右缘要留出的宽度。首页的日期和深色开关、我的页的资料头，都停在胶囊左侧。
4. 提醒发生在小程序被打开的时候
间隔到了以后，进入首页会打开全屏页：脉冲时钟、铃铛动效，真机上循环wx.vibrateLong。贪睡和停止都会写下一次允许再响的时间，避免同一次超时反复弹。小程序退到后台后，平台不会让它再拉起页面，所以它适合随手打开看，系统闹钟仍要另外设。开发者工具里转发文件和部分震动接口不可用，导出会退回剪贴板，震动需要真机看。
六、目录
newborn-feed-tracker/ ├── app.js / app.json / app.wxss # 入口、4 个 Tab、公共样式 ├── theme.wxss # 四套主题 + 深色变量 ├── custom-tab-bar/ # 自定义底栏 ├── components/ # 轻提示、左滑删除行 ├── assets/ # 男宝 / 女宝头像 ├── utils/ │ ├── storage.js # 本地 CRUD、导入、清空 │ ├── schedule.js # 疫苗与体检草稿 │ ├── stats.js / charts.js # 聚合与 canvas │ ├── export.js # 导出、校验、导入 │ ├── theme.js / icons.js / nav.js │ └── time.js └── pages/ ├── index/ record/ stats/ mine/ # 四个 Tab ├── history/ baby/ alarm/ todo/ # 记录、资料、提醒、待办 └── ...七、导入运行
- 安装微信开发者工具，导入文首仓库。
- AppID 可先用测试号；要发布时再改
project.config.json里的appid。 - 编译后从首页记一笔喂养，再看统计和待办是否出现。
- 真机预览用来确认震动，以及把 JSON 转发给文件传输助手。导入走聊天文件，单文件大约 2MB 以内，并先做结构校验。
八、边界
- 提醒依赖用户打开小程序，后台没有推送。
- 日程是对照用的草稿，接种以门诊和接种证为准。
- 导入不改本机当前的主题和深色。
- 模拟器里
shareFileMessage常常不可用，导出会走剪贴板。
克隆文首仓库，用微信开发者工具打开即可。间隔、主题和日程都可以按自己的习惯改。
点个 Star
用着顺手的话，给仓库点个 Star，之后更新也更好找。
- 给 GitHub 仓库点 Star
