我用 AI 辅助做了个记账本小程序：从 0 到上线的真实复盘

最近把一个微信小程序「我的生活记账本」整理上线了。

它不是一个复杂的大项目，但很适合拿来复盘：AI 能在一个真实小程序里帮我们做什么？一个轻量记账产品又该怎么设计，才不会变成“打开一次就吃灰”的工具？

这篇文章就从产品和实现两个角度聊聊这个小项目。

先说结论

这个小程序的目标很简单：

用尽量少的操作，把日常收入和支出记下来，再用图表帮助用户看懂自己的消费趋势。

我没有把它做成一个功能堆满的财务系统，而是更偏“生活记账”：

• 打开首页就看到本月支出、收入、预计剩余
• 一键新增支出/收入
• 常见分类快速选择
• 金额支持加减计算
• 可以补备注、改日期
• 支持月账单、年账单、趋势图、分类占比
• 支持按分类搜索历史账单
• 支持隐藏金额，保护隐私

对个人记账来说，最重要的不是功能多，而是记录阻力足够低。

为什么选择做记账本？

AI 现在很擅长总结、规划和生成内容，但它要真正帮到个人生活，前提是你得有自己的数据。

记账就是一种很典型的个人数据沉淀。

如果你持续记录一段时间，就可以回答很多平时只靠感觉的问题：

• 这个月外食是不是变多了？
• 交通支出有没有异常？
• 收入和支出的节奏是否健康？
• 哪些分类最值得优化？

这些问题以后完全可以继续接 AI：比如做月度消费总结、预算建议、异常支出提醒、消费习惯分析。

所以这个项目的定位不是“做一个炫技 Demo”，而是先把一个真实可用的数据入口做出来。

技术栈

项目是一个 uni-app 小程序项目，主要结构如下：

• 前端：uni-app / Vue
• 状态管理：Vuex
• 云端：uniCloud 阿里云空间
• 数据表：账单、分类、用户
• 图表：uCharts
• 运行端：微信小程序

核心页面包括：

• 首页：本月汇总、今日活动、账单列表
• 记账页：收入/支出切换、分类选择、金额输入、备注、日期
• 账单详情：单笔账单查看、编辑、删除
• 统计页：月/年账单、趋势图、分类占比、按日记录
• 搜索页：按分类搜索账单，并保留最近搜索

下面这些截图是当前小程序的主要页面，先把产品形态放出来，后面再拆每个页面的设计取舍。

首页：先给用户一个“当前状态”

首页最重要的不是列表，而是状态感。

所以我把顶部做成了一个本月汇总卡片：

• 本月支出
• 本月收入
• 预计剩余
• 金额隐藏/显示
• 入口：查看图表分析

这样用户打开小程序时，第一眼看到的是“这个月我大概处在什么状态”，而不是一堆零散账单。

这里有一个很小但挺实用的设计：金额隐藏。

记账应用经常会在地铁、办公室、饭桌上打开，金额属于比较私人的信息。所以我在首页做了一个眼睛按钮，用户可以把金额切成 ******。

这个功能技术上不复杂，但体验上很有必要。

记账页：减少输入成本

记账页的设计重点是“快”。

用户进入页面后可以直接完成这些操作：

1. 选择支出或收入
2. 选择分类
3. 输入金额
4. 可选备注
5. 可选日期
6. 确认保存

分类内置了一批高频场景：

餐饮、交通、购物、服饰、日用品、娱乐、食材、零食、烟酒茶、
学习、医疗、住房、水电煤、通讯、人情往来

收入分类也做了区分：

薪资、奖金、借入、收债、利息收入、投资回收、投资收益、意外所得

金额键盘里我还加了 + 和 -。

这个设计来自真实使用场景：很多时候你不是只记一笔固定金额，而是临时把几样东西加起来，比如：

12.5 + 8 + 6

直接在记账页算完再保存，比切到计算器舒服很多。

统计页：让账单不只是“存档”

只记账不复盘，长期看很容易失去动力。

所以统计页做了几个维度：

• 月账单 / 年账单切换
• 总支出、总收入、结余
• 支出/收入趋势
• 分类占比
• 按日期查看账单记录

趋势图支持近 7 天、近 30 天和本月视图。

分类占比则用环形图展示，让用户能快速看到主要支出集中在哪些类别。

这个页面的意义是把“流水记录”变成“消费反馈”。

数据设计

核心数据其实很简单。

账单表主要包含：

{
  id,
  user_id,
  category_id,
  remarks,
  create_time,
  type,
  money
}

分类表主要包含：

{
  id,
  name,
  icon,
  type,
  sort
}

其中 type 用来区分收入和支出。

前端展示时会把账单和分类关联起来，这样列表、详情、统计都可以直接拿到分类名称和图标。

云函数做了什么？

云函数主要负责账单的增删改查：

• 新增账单
• 按用户查询账单
• 按 ID 查询账单
• 删除账单
• 更新账单
• 按分类名称搜索账单

查询月账单、日账单、年账单时，会根据选择的时间范围构造起止时间。

按分类搜索时，我做了一个细节处理：先用正则缩小分类范围，再用 JS 做一次包含校验，避免模糊匹配误命中。

这种项目里不需要一上来就做很复杂的后端架构，先把数据边界和查询场景理顺更重要。

AI 在这个项目里适合做什么？

这类小程序很适合让 AI 参与，但不是让 AI “替你写完整项目”，而是把它放在几个具体环节里：

1. 帮助梳理功能边界

一开始很容易想做很多东西，比如预算、资产、多人账本、导出、订阅提醒。

AI 可以帮你把功能拆成 MVP：

• 先完成记账闭环
• 再做统计复盘
• 最后再考虑智能分析

2. 辅助生成页面状态

比如空状态、账单为空、搜索无结果、隐藏金额、保存成功、删除成功，这些状态很容易漏。

AI 可以帮你列 checklist。

3. 辅助优化交互文案

记账工具的文案不需要很花，但要明确：

• “今日活动”
• “预计剩余”
• “查看图表分析”
• “当日暂无账单”

这些小文案会影响用户是否看得懂。

4. 后续可以做智能复盘

当账单数据积累起来后，AI 才真正有用：

• 本月消费总结
• 异常支出提醒
• 分类预算建议
• 消费习惯变化
• 自动生成月度报告

这也是我觉得记账产品和 AI 结合比较自然的地方。

一些踩坑和取舍

不要一开始就做太重

记账 App 很容易越做越像财务软件。

但个人生活记账最重要的是坚持，所以我优先保证：

• 新增账单路径短
• 首页信息直观
• 统计页能看懂

分类不要太细

分类太少，分析没意义；分类太多，用户选择困难。

现在这版先覆盖高频生活场景，后续可以再加自定义分类。

图表不要只为了好看

图表不是装饰，必须回答问题：

• 最近花得多不多？
• 哪一类花得最多？
• 收入和支出差多少？

如果图表回答不了问题，就该删掉或换一种表达。

后续计划

后面我想继续加几类能力：

• 自定义分类
• 月度预算
• AI 月度消费总结
• 异常支出提示
• 数据导出
• 更细的图表维度

如果你也在做小程序、个人工具或 AI 辅助开发，记账本其实是一个很好的练手项目：

业务不复杂，但足够真实；页面不多，但状态不少；数据不大，但能自然接入 AI 分析。

体验入口

微信搜索小程序：

我的生活记账本

也可以扫描小程序码体验。

如果你对这个项目的实现细节感兴趣，我后面可以继续拆：

• uni-app 页面结构
• uniCloud 云函数设计
• uCharts 图表封装
• AI 月报功能怎么做
• 小程序体验优化清单