新生儿喂养记录微信小程序本地存储、四套主题以及一份可改期的疫苗体检日程夜里喂完一顿奶手里经常同时占着宝宝和奶瓶再去翻聊天记录找「上一顿是几点」很不顺手。这个小程序把喂养、尿布、睡眠、成长和补充剂收成一条时间线数据写在手机本地换机时导出 JSON。疫苗和体检单独做日程不跟喂养记录混在同一张表里。协议 Apache-2.0。源码GitHubhttps://github.com/XH-fenger/newborn-feed-trackerGiteehttps://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右上角胶囊位置每台机器不一样Tabcustom-tab-bar毛玻璃底栏选中项随主题色变化主题theme.wxss的 CSS 变量四套主题和深色正交换主题只改变量页面 class 挂t-{{theme}}四套主题是靛蓝、晨雾青、暖阳橘、莓果粉。深色模式把内容区压暗首页顶部渐变仍保持浅色文字能读清。主题和深色记在本机设置里导入备份时不覆盖这台设备的外观。五、几处实现1. 一个存储键里的四段数据宝宝资料、喂养记录、待办、设置放在一起读的时候缺哪段就补哪段旧数据没有todos也不会坏。varKEYnewborn_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 合并也可以覆盖。覆盖前先留一份当前数据的快照。清空喂养记录时只动recordstodos原样留下。返回给页面的记录列表是数组副本。若把内部数组的引用交出去后续删除再导入时旧引用可能把已经删掉的记录又写回来。2. 出生日加 N 个月要处理月末2026-01-31加 1 个月不能得到 3 月 2 日或 3 日。做法是先落到目标月的 1 号查出该月最后一天再把出生日的「日」夹到这个月末。1 月 31 日加 1 个月得到 2 月 28 日42 天体检则直接按天加。functionaddMonths(ymd,months){varpymd.split(-);varyparseInt(p[0],10);varmparseInt(p[1],10)-1;vardparseInt(p[2],10);varfirstnewDate(y,mmonths,1);varlastnewDate(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