github源码

写在前面

不知道是不是到年纪了，最近迷上了做菜，点个外卖得20多一份，菜市场买个菜10元就能炒两个菜给全家吃，突发奇想给自己做一个小程序，用来记录自己的拿手菜，也方便以后过年过节让亲戚朋友来点菜。本着简约风格，实用功能为主

准备工作

工具：TRAE CN && 微信小程序官方助手 && 激昂的做饭热情

开始作业

第一步：PRD起手

让Ai开始敲代码之前，先准备一份PRD是很好的习惯，可以让Ai能更加了解项目的整体需求，那么小伙伴们就要说了“PRD是产品的任务，我们程序员不会写啊”，这个搁以前确实难度比较大，还费时费力，但现在是2026年了，我们可以让Ai帮我们先写一个PRD。

我选择的是deepseek，直接把我们的需求简单描述一下

我准备在微信小程序中做一个小工具：“拿手菜” 功能，我给你一个描述：该功能主要是能本地记录自己菜谱，要求功能包括新增菜谱（字段包括：名称，材料，做法描述，图片），查看菜谱（布局按照一行4个元素的列表排序，每个元素包含名称和小icon，点击弹出详细内容），每个元素长按可以出现（修改或者删除）修改界面复用新增弹框，删除就直接删除并且刷新当前列表。整体界面风格简单为主，功能实现最主要，请给我一份PRD

ok，先准备一份简单描述，然后让AI帮我们生成一份PRD看看

产品需求文档（PRD）：拿手菜
文档版本	修改日期	修改内容	作者
V1.0	2026-08-13	初始版本创建	AI 助手
1. 项目概述
1.1 产品背景
用户需要一个私人的、本地的菜谱记录工具，用于随时记录和查看自己的“拿手菜”。该工具的核心价值在于数据本地化（无需网络同步，保证隐私和速度）和操作轻量化。

1.2 产品目标
提供一个极简的菜谱管理工具，核心功能为 增（新增）、查（查看）、改（修改）、删（删除）。

所有数据存储在微信小程序的本地缓存（wx.setStorageSync）中，不涉及后端服务。

界面风格清爽、简单，以功能实现为第一优先级。

2. 用户角色
普通用户：使用该工具记录和管理自己制作过的菜谱。

3. 功能需求详述
3.1 菜谱列表页（首页）
功能描述：作为应用主界面，展示所有已记录的菜谱。

布局：采用网格布局，每行固定显示 4 个菜谱元素。

元素展示：

每个元素包含一个小图标（建议使用食材或厨师帽的默认SVG图标）和菜谱名称。

图标在上，名称在下，居中显示。

数据排序：按创建时间倒序排列（最新添加的显示在最前面）。

长按交互：用户长按任意菜谱元素，需触发操作菜单。

操作菜单：弹出底部动作菜单（ActionSheet）或对话框，提供 “修改” 和 “删除” 两个选项。

删除逻辑：点击“删除”后，需弹出二次确认弹窗（避免误触），确认后删除该条数据并立即刷新当前列表。

新增入口：页面右下角提供一个悬浮的 “+”号按钮（FAB），点击后跳转至新增菜谱页。

3.2 新增/编辑菜谱页（复用弹框/页面）
功能描述：用于录入或修改菜谱的详细信息。

触发方式：

新增：点击首页的“+”号按钮，弹出空白的录入表单。

修改：在首页长按元素选择“修改”，弹出带有当前数据的录入表单（数据回填）。

表单字段：

菜谱名称（必填）：单行文本输入框，最大长度20字。

主要材料（必填）：多行文本输入框，用于记录食材和用量。

做法描述（必填）：多行文本输入框，用于记录烹饪步骤。

成品图片（选填）：点击上传按钮，调用系统相机拍照或从相册选择一张图片。

图片处理：

选择图片后，在表单内显示缩略图预览。

图片转为 Base64 字符串 存储（便于本地缓存，无需处理文件路径）。

如果用户未上传图片，使用默认的菜品占位图（或纯色背景）。

保存与校验：

点击“保存”按钮时，校验“名称”、“材料”、“做法”是否为空，若为空则提示“请完善信息”。

校验通过后，保存数据并返回列表页，列表自动刷新。

3.3 菜谱详情查看页
功能描述：查看菜谱的完整信息。

触发方式：在首页单击任意菜谱元素。

展示形式：建议使用底部弹出半屏弹窗（Half Sheet） 或新页面（根据开发复杂度自选，推荐半屏弹窗体验更连贯）。

内容展示：

顶部显示菜品大图（若用户未上传，显示默认图）。

菜谱名称（大标题）。

材料清单（带项目符号或分段显示）。

做法描述（分段显示）。

关闭方式：点击弹窗外部空白区域或点击右上角关闭图标。

4. 数据结构设计
存储在本地缓存 storage 中的 Key 为 my_recipes，Value 为对象数组。

json
[
  {
    "id": "1702456789012",        // 唯一标识：使用时间戳或uuid
    "name": "红烧肉",              // 菜名
    "ingredients": "五花肉 500g\n老抽 2勺\n冰糖 适量", // 材料
    "steps": "1. 五花肉切块焯水\n2. 炒糖色\n3. 炖煮40分钟", // 做法
    "image": "data:image/jpeg;base64,/9j/4AAQ...", // Base64图片数据 或 空字符串
    "createTime": 1702456789012    // 用于排序
  }
]
5. 交互与UI规范
整体风格：纯白色背景，圆角卡片元素（圆角 12rpx），字体使用系统默认字体。

列表元素：尺寸建议 (160rpx * 160rpx)，背景为浅灰色 #F7F7F7 或白色带微阴影。

图标：使用微信小程序内置的 icon 组件，或使用简单的 emoji（如 🍳）作为默认图标。

反馈：

点击按钮或元素时，有 opacity 变暗的点击态。

操作成功或失败时，使用 wx.showToast 提示（如“保存成功”、“已删除”）。

6. 非功能需求
性能：列表加载速度需快，因全部为本地数据，需确保渲染 setData 的数据量在可控范围（支持至少500条数据不卡顿，不过个人使用一般远小于此）。

兼容性：适配微信小程序基础库 2.0+ 版本，兼容不同尺寸的手机屏幕。

数据安全：用户卸载小程序时，本地缓存会被清除，建议在关于页面提示用户数据存储在本地。

7. 异常场景处理
存储空间不足：微信小程序本地缓存有大小限制（通常为 10MB）。当保存图片过大时，前端需进行压缩（将图片宽度压缩至 750px 以内）再转 Base64。

空状态：当列表无数据时，显示一个友好的空状态插图及提示文字：“还没有拿手菜，点击 + 号添加一道吧！”。

整体上生成的还不错，那么我们也不废话直接下一步

第二步：给我敲代码

先把上一步生成的PRD保存成文件，放到对应项目中，然后在TRAE中输入：

现在给我开发 拿手菜这个界面的功能，你按照dishes文件夹下面的PRD文件给我开发

等待一会功能就做好了，对照微信官方助手的实时工具就能看到完成度很高。不过还有部分细节需要优化

1：新增菜谱的时候 除了图片和名称，其他都不是必选（对于我这种懒人只想拍照上传，不想写太多）

2：新增菜谱按钮旁边加一个类型相似的分享按钮，点击可以将我当前的所有菜谱通过海报的形式分享给我的好友，要求分享中的每一个菜谱包含名称和图片对应

3：在分享按钮的上面在加一个提示按钮，点击在出现弹框，提示用户可以分享菜单给好友进行点菜。

在以此和AI沟通几轮，基本一个简单的产品就完成了，大致主要界面如下。

第三步：操作炫耀

既然工具做好了，那么就得用一下。将自己拿手菜记录下来分享给老婆，让她点菜。

她会收到如右图这样的菜单。

总结：

界面整体偏简单，没有过多的优化，基本功能实现了，后续觉得有必要在修正了。主要是为了能记录自己日常的拿手好菜，最后还是要感叹AI写代码的厉害。

我的小程序：蚕宝宝的小工具