一、Demo 简介
是什么： 一款基于微信小程序的 AI 智能家庭饮食健康助手，聚焦食品保质期追踪与饮食决策辅助。
面向谁： 负责家庭采购和做饭的人——他们常常忘记冰箱里还有什么、东西什么时候过期、今天该做什么菜，什么东西该买。
差异：它不同于其他单纯管理保质期的小程序，它拥有“买，管，吃“完整的流程体系，更容易让用户养成习惯，配备家庭功能，实现多人管理
核心功能：
1. 智能保质期管理（厨房的"排爆专家"）
录入食品后自动计算到期时间，首页直观展示即将过期 TOP3、物品分布、本周动态等统计卡片，帮你在食物变质前处理掉它们。
2. 家庭时光机（拍照识别 + AI 预测保质期）
拍一张物品照片，AI 自动识别物品名称、生产日期、预估保质期，并推荐储存位置。识别过程中字段实时填充骨架屏动画，无需手动输入。
3. 成分党的"显微眼镜"（配料表 AI 健康分析）
拍下食品配料表，AI 生成专属健康报告：安全评分、成分逐项详解、人群适配建议、替代产品推荐。首次使用需观看广告解锁，之后可直接查看。
4. AI 每日建议 / 菜谱
基于当天日期和家中现有食材，AI 每日生成个性化饮食建议或菜谱推荐，每个家庭每天限 3 次手动刷新，保证建议新鲜感。
5. 多人家庭协作
支持创建/加入家庭、邀请码加入、管理员权限、成员贡献排行，全家人一起管理冰箱。
二、Demo 创作思路
灵感来源：
每次打开冰箱，总能翻出几盒"考古级"食材——买了什么忘了、放了多久不知道、还能不能吃全靠鼻子判断。这个问题几乎每个家庭都遇到过。
想解决的问题：
- 食品过期浪费：中国家庭每年因遗忘过期食品造成的浪费触目惊心，很多人不是不想节约，而是真的"忘了"；
- 做饭选择困难：每天站在冰箱前不知道做什么，其实食材就在手边，只是缺乏一个"帮你想"的工具；
- 配料表看不懂：普通消费者面对一长串化学名词毫无概念，不知道哪些成分对健康不友好。
为什么做这个方向：
市面上有记账的、有菜谱的，但把"保质期管理 + AI 饮食建议 + 成分分析"串成一条链的产品几乎没有。我希望做一个"厨房里的 AI 管家"——它知道你冰箱里有什么、什么时候过期、今天该吃什么、你吃的东西健不健康。
技术选型上，选择微信小程序是因为目标用户（家庭主妇/主夫、独居年轻人）几乎都有微信，零安装成本、打开即用。后端用微信云开发（Serverless），零运维、按量计费，对个人开发者非常友好。
三、Demo 体验地址
请扫描下方小程序码体验：
四、TRAE 实践过程
整体开发流程
整个项目从创意到可体验 Demo，全部使用 TRAE 完成开发。全程我使用最多的两个模型是：qwen3.7plus和deepseek v4pro，就在开发过程中，很开心遇到了微信开发者工具的skill配合trae ai实现了更多功能，真正实现了“vibecoding“以下是关键阶段：
第一阶段：架构设计与重构规划（7 月 2-5 日）
最初的项目代码比较粗糙，云函数是"单体式"的——所有逻辑堆在一个文件里。我用 TRAE 制定了四阶段重构计划：
- 提取公共工具库（
common/目录），统一权限校验、日期计算、图片处理； - 拆分单体云函数为模块化结构（
itemService、aiService、familyService各含独立路由和业务文件）； - 前端引入轻量 Store 替代 globalData；
- 修复零散问题。
TRAE 帮我生成了约 1180 行的 PROJECT_DOC.md 项目文档，涵盖 9 个章节：项目概览、技术栈、目录结构、页面说明、公共组件、工具模块、云函数 API（18 个 action 的参数/返回值/权限）、数据模型、外部 API。
Session ID1：
.279746644830944:d44d670f71342e03292b052d71526385_6a45ec891eb05d4e8ef8cdc3.6a4a469e10f3769b3cdbfb4c.6a4a469ddca8442a625f6bd7:Trae CN.T(2026/7/5 19:57:18)
Session ID2：
.279746644830944:665449bb5b59923d17d3f61fd79e4252_6a49fda810f3769b3cdbf6ca.6a4a6cfe10f3769b3cdc0013.6a4a6cfedca8442a625f6beb:Trae CN.T(2026/7/5 22:41:02)
第二阶段：UI 美化与数据治理（7 月5- 6 日）
用 TRAE 统一了全应用的设计规范：背景色 #F2F1F5、卡片圆角 40rpx、紫色主题色 #8b5cf6、全圆角按钮 999rpx，让首页、物品页、添加页、设置页视觉风格一致。
同时优化了数据清理云函数：设置 50 秒超时安全线、每次批量处理 100 条、已完成项自动跳过，可多次调用直到全部清理完毕。还实现了首页四大统计卡片（本周动态、物品分布、即将过期 TOP3、成员贡献），全部基于现有数据库字段计算，无需新增字段。
Session ID：
.279746644830944:be5652861f1e7b7893f420182968f65b_6a4b0e7410f3769b3cdc0054.6a4b517110f3769b3cdc0511.6a4b51713ee51ec390d794b0:Trae CN.T(2026/7/6 14:55:45)
第三阶段：AI 功能开发——时光机 + 成分分析（7 月 5-6 日）
这是最核心也最有挑战的一天。用 TRAE 完成了两大 AI 功能的完整开发：
- 家庭时光机： 拍照 → 上传云存储 → 云函数获取临时链接 → 调用智谱 GLM-4.6V-FlashX 识别 → 骨架屏实时填充 → 插屏广告等待期间展示。开发中遇到 128KB 数据限制，TRAE 帮我设计了"云存储中转"方案——前端上传图片到云存储，云函数拿临时链接传给 AI，识别完自动删除，彻底绕开了限制。
- 成分分析： 拍照 → 激励视频广告解锁 → AI 生成健康报告（安全评分、成分详解、人群适配、替代推荐）。同样采用云存储中转方案。TRAE 帮我处理了智谱 AI 的返回格式问题——清除
</think>标签、提取最后一个完整 JSON 对象。
Session ID：
.279746644830944:0a549070f54d27d834d9f5b7baafde8e_6a4b53b910f3769b3cdc0586.6a4b5da60aecc167b410c4d1.6a4b5da5ef90c352f75e5016:Trae CN.T(2026/7/6 15:47:50)加上第二阶段一部分
第四阶段：Bug 修复与性能优化（7 月 7 日）
最后一天用 TRAE 进行了系统性的质量打磨：
- Bug 修复： 解散家庭按钮重复显示（条件判断重叠）、openid 脱敏显示、join.js 竞态条件（改用
family._id替代inviteCode作查询条件）、表单数据残留（添加/编辑/补货后完整重置所有字段包括 emoji 状态）； - 性能优化： 频繁切换的 UI 元素改用
hidden属性替代wx:if减少 DOM 重建、骨架屏动画从background-position改为opacity脉动降低 GPU 负载、后端统计逻辑去重重构（删除 140 行重复代码）、所有页面完善onUnload清理（定时器、监听器、广告实例）防止内存泄漏； - 时区处理： 统一日期计算策略——前端使用本地时间方法，后端采用"先偏移 +8 小时再用 UTC 方法"，确保中国区一致性。
Session ID：
.279746644830944:a2045171175398734b93b63f2d4a800f_6a4c5810fa49e871da89726e.6a4ccc6b326929b888f0361d.6a4ccc6bcefe74699f1495cf:Trae CN.T(2026/7/7 17:52:43)
开发中的踩坑与解决
| 问题 | 原因 | TRAE 的解决方案 |
|---|---|---|
| AI 识别超时 / 失败 | 图片 base64 编码超过 128KB 限制 | 改用云存储中转：前端上传 → 云函数取临时链接 → 传给 AI → 完成后自动删除 |
| 智谱 AI 返回 JSON 解析失败 | 模型返回包含 </think> 思考标签 |
在响应处理中清除特殊标签，提取最后一个完整 JSON 对象 |
| DeepSeek API 返回异常 | 额度用完 / 频率超限 | 增加错误识别、日志打印和用户友好提示，异常时在云函数日志输出完整响应 |
| 骨架屏卡顿 | CSS background-position 动画 GPU 负载高 |
改用 opacity 脉动动画，视觉效果相近但性能大幅提升 |
| 表单数据残留 | 页面切换后状态未清理 | 在 save.js 清除编辑缓存 + onShow 中完整重置所有字段（含 emoji 分类状态） |
| 内存泄漏 | 广告实例、定时器、监听器未清理 | 所有页面在 onUnload 中统一清理，onHide 中标记页面不可见防止后台更新 UI |
技术架构总结
前端：微信小程序原生（WXML / WXSS / JS / WXS）
后端：微信云开发 CloudBase
├── 云函数：itemService（物品 CRUD + 统计）
│ familyService（家庭管理 + 权限）
│ aiService（DeepSeek 建议 + 智谱图像识别）
├── 云数据库：families 集合 + items 集合
└── 云存储：图片中转（AI 识别场景）
AI 能力：DeepSeek Chat API（饮食建议/菜谱）
智谱 GLM-4.6V-FlashX（图像识别/成分分析）
五、开发心得
这个项目从零到可体验 Demo，全程用 TRAE 完成。最大的感受是：TRAE 不只是"帮你写代码"，更重要的是帮你理清思路。
几个印象深刻的点：
- 重构规划——面对一团乱麻的初始代码，TRAE 帮我拆解成四个阶段，每个阶段独立可测试、可部署，让重构变得可控；
- 128KB 限制的解法——我一开始想动态压缩 base64，TRAE 直接建议改用云存储中转，方案更优雅也更稳定；
- 性能优化——TRAE 主动发现
wx:if频繁切换导致的 DOM 重建问题，建议改用hidden属性；骨架屏动画的 GPU 负载问题也是 TRAE 分析出来的； - 内存泄漏排查——广告实例、定时器、监听器的清理逻辑容易遗漏，TRAE 逐页检查并补全了所有生命周期清理代码。
当然也有踩坑的时候，比如智谱 AI 返回格式不稳定导致 JSON 解析失败，但 TRAE 帮我快速定位了问题并实现了容错处理。
总的来说，TRAE 让一个人完成一个包含 AI 能力的小程序成为可能。它不会替你思考产品方向，但会把你的想法高效、高质量地变成可运行的代码。