第21课：记账本小程序
进度 0/30
💰
记账本小程序
项目一：管好每一分零花钱
📖知识引入
🎯需求分析
记账本三件事：记一笔（金额+名称）、看列表、算总计。把需求写下来再做，比边做边想快一倍。
📐页面规划
两个页面搞定：首页=账目列表+底部加号；记一笔页=金额输入+名称输入+保存按钮。简单但完整！
💾数据设计
每笔账是一个对象{名称, 金额, 时间}，装进数组存Storage。数据结构定了，代码就成功了一半。
➕核心逻辑
点加号→跳记一笔页→保存时push进数组→setStorage→返回首页onShow里重新读取渲染。闭环！
🤖AI协作要点
求和函数、按日期排序这类逻辑让AI写；你负责描述清楚数据结构：bills数组里每项有name和money字段。
💡
做项目先画页面草图、定数据结构，代码是最后一步！
🔍记账本项目蓝图
// 核心数据结构
bills = [
{ name: '冰淇淋', money: 8, time: '9月1日' },
{ name: '漫画书', money: 35, time: '9月1日' }
]
// 求和：让AI帮你写
const total = bills.reduce(
(sum, b) => sum + b.money, 0
)页面设计草图：
首页： ┌────────────────┐ │ 我的账本 │ │ 本月支出：¥128 │ │ ──────────── │ │ 🍦 冰淇淋 -8 │ │ 📚 漫画书 -35 │ │ 🚌 公交卡 -20 │ │ (＋) │ └────────────────┘
记一笔页： ┌────────────────┐ │ 名称：[冰淇淋 ] │ │ 金额：[ 8 ] │ │ [保存] [取消] │ └────────────────┘
分工： 🧑 你：画草图、定数据 🤖 AI：写列表渲染+求和 🧑 你：测试、调样式
🎯小测验
第1题：记账本的核心数据结构是？
第2题：记的账存在哪里重启不丢？
第3题：做项目的第一步应该是？
📝本课知识点
- ✓需求三件事：记一笔、看列表、算总计
- ✓两个页面就够第一版
- ✓数据结构定好，代码成功一半
- ✓保存→存储→返回刷新是闭环
- ✓求和排序等逻辑交给AI
第21课完成！继续探索下一课吧 🚀