【Code With SOLO】用 SOLO 30 分钟搭建一个【家庭食物小管家】

SOLO挑战赛专区
1

1. 摘要

作为一名微信小程序开发者，我使用 TRAE SOLO 在 10 分钟内完成了一个家庭食物管理小程序的核心功能开发。原本需要 2-3 天的开发工作量，通过 SOLO 的智能代码生成、实时错误修复和多轮迭代优化能力，仅用不到 2 小时就完成了从 0 到 1 的完整小程序开发，实现了食物添加、列表管理、过期提醒等核心功能，大幅提升了开发效率。

2. 背景

我是一名全栈开发工程师，专注于微信小程序开发。最近需要为家庭用户快速搭建一个食物管理小程序，用于记录食品信息、追踪保质期、提醒过期。

面临的具体挑战：

  • 项目周期紧张，需要在 2 天内完成从需求到上线的完整开发
  • 需要实现本地数据存储、分类筛选、过期计算等复杂业务逻辑
  • 小程序对数据敏感度要求高，过期判断逻辑容易出现边界问题
  • UI/UX 需要简洁易用，表单设计要符合用户习惯

3. 实践过程

任务拆解

我将小程序开发拆解为以下几个模块：

  1. 基础架构搭建 - 项目初始化、页面结构设计
  2. 数据层实现 - 本地存储方案设计、数据模型定义
  3. 首页开发 - 统计概览、分类导航、快速入口
  4. 食物管理功能 - 添加、编辑、列表展示
  5. 筛选与搜索 - 分类筛选、过期状态筛选、关键词搜索
  6. UI/UX 优化 - 表单布局优化、快速填充功能

SOLO 能力应用

我充分利用了 SOLO 的以下核心能力：

1. 智能代码生成

  • 使用自然语言描述功能需求，SOLO 自动生成完整的代码结构
  • 示例 Prompt：“创建一个添加食物的表单页面，包含食物名称、类别、购买日期、过期日期等字段，使用下拉选择器选择单位和存储位置”

2. 多轮迭代优化

  • 通过"修改"、“优化”、"修复"等指令快速迭代
  • 示例：初始表单较长，经过多轮优化将相关字段合并到一行，减少了 30% 的表单长度

3. 跨文件关联理解

  • SOLO 能理解项目结构，确保修改在不同文件间保持一致性
  • 示例：修改 app.js 的全局变量后，自动更新相关页面的引用逻辑

4. 实时 Bug 定位与修复

  • 通过错误提示快速定位问题，SOLO 提供具体的修复方案
  • 示例：点击食用按钮会触发详情页跳转，SOLO 识别出事件冒泡问题并使用 catchtap 解决

关键 Prompt 示例

Prompt 1：快速初始化项目

创建一个小程序项目，包含首页、食物列表、添加食物、食物详情、统计页面，使用本地存储而不是云开发

Prompt 2：添加筛选功能

在食物列表页面，添加按过期状态筛选的功能，支持"全部"、"即将过期"、"已过期"三个选项

Prompt 3：修复导航问题

点击首页分类后跳转到食物列表，需要正确筛选对应分类的食物。问题是 switchTab 跳转时参数传递失败。

踩过的坑

坑 1：switchTab 跳转参数丢失

  • 问题：使用 wx.switchTab 跳转到 tabBar 页面时，URL 参数无法传递
  • 解决：使用全局变量 app.globalData 传递参数，在目标页面的 onShow 中读取

坑 2：数据字段名不一致

  • 问题：从云开发迁移到本地存储后，字段名从 _id 变为 id，导致数据显示错误
  • 解决：统一在 wxml 模板中使用 item.id，并在数据操作时保持一致

坑 3：事件冒泡导致多次触发

  • 问题：点击食用按钮会同时触发列表项的点击事件
  • 解决：将按钮的 bindtap 改为 catchtap 阻止事件冒泡

4. 成果展示

核心功能展示

首页

  • 统计概览：总食物数、即将过期数量、已过期数量
  • 分类导航：8 个预设分类快速访问
  • 快速添加入口
    1
    1489×1054 28 KB

食物列表页

  • 三重筛选：过期状态 + 分类 + 排序
  • 实时搜索功能
  • 一键标记食用
    3
    3489×1055 21.9 KB

添加/编辑页面

  • 紧凑的表单布局（两列设计）
  • 下拉选择：常用单位、存储位置
  • 自动日期选择器
    2
    2489×1051 19.3 KB

数据管理

  • 本地存储方案（无需云开发）
  • 自动过期计算与提醒
  • 分类统计可视化

技术架构

├── app.js          # 全局配置、数据初始化
├── pages/
│   ├── index/      # 首页
│   ├── foodList/    # 食物列表
│   ├── addFood/     # 添加/编辑食物
│   ├── foodDetail/  # 食物详情
│   └── statistics/  # 统计页面
└── images/         # 静态资源

5. 效果与总结

提效数据

指标 传统方式 使用 SOLO 提效比例
页面开发 4 小时 30 分钟 87.5%
Bug 修复 2 小时 15 分钟 87.5%
UI 优化 3 小时 45 分钟 75%
总计 9 小时 1.5 小时 83%

SOLO 在开发流程中的角色

  1. 代码助手 - 自动生成标准化的页面结构和逻辑代码
  2. 调试伙伴 - 快速定位问题并提供修复方案
  3. 优化顾问 - 提供 UX/UI 改进建议和实现方案
  4. 架构参谋 - 帮助设计数据流和模块解耦

可复用的方法论

1. 渐进式开发

  • 先完成核心功能，再逐步优化细节
  • 每个功能模块独立开发测试，避免大规模返工

2. 明确的需求描述

  • 将模糊需求具体化：不说"做个筛选功能"，而说"添加按过期状态筛选的下拉选择器"
  • 提供具体的示例和预期效果

3. 迭代式优化

  • 接受初次实现的不足，通过多轮迭代达到理想效果
  • 优先解决核心 Bug，再处理体验优化

4. 善用 SOLO 的上下文理解

  • 保持对话连贯，让 SOLO 理解项目全貌
  • 提供错误信息而非抽象描述，便于 SOLO 准确定位问题

未来优化方向

  • 添加数据导出功能（Excel/CSV）
  • 实现消息推送提醒
  • 添加食物照片拍摄功能
  • 接入 AI 智能推荐（根据历史数据分析饮食偏好）

使用 SOLO 的最大感受：它不仅是一个代码生成工具，更像是一个经验丰富的开发伙伴。它能理解我的意图，主动识别潜在问题，并提供超出预期的优化建议。在时间紧迫的项目中，SOLO 帮助我专注于核心业务逻辑，而将重复性的编码工作交由它完成。