【Code With SOLO】用 SOLO 从零开发账单分析(支持支付宝和微信账单)微信小程序

【More than Coding】用 SOLO 从零开发微信账单分析小程序,解决"钱花哪了"的灵魂拷问


1. 摘要

用 TRAE SOLO 在 1 小时内从零完成了「微信支付宝账单分析小程序」的基础开发,支持双平台账单合并导入、智能分类、多维度统计分析、Canvas 图表可视化,所有数据本地存储不上传服务器。最打动人的是——真正解决了普通人"不知道钱花哪了"的痛点,同时100%保护用户隐私


2. 背景

每个月工资到账,还没怎么花就没了。打开微信账单、支付宝账单分开看,根本看不出整体消费情况。想找个工具合并分析,发现市面上的要么要上传数据到服务器(隐私堪忧),要么功能太复杂(理财小白用不来)。

作为一个有理财需求但技术能力有限的普通人,我只想知道:

  • 这个月到底花了多少钱?
  • 钱都花在哪些地方了?
  • 哪些消费可以优化?

于是我尝试用 SOLO 来解决这个问题,没想到它真的帮我从零完成了整个小程序的开发。


3. 需求沟通

我向 SOLO 描述了我的需求:

“我想开发一个微信账单分析小程序,支持支付宝和微信账单合并分析,分析功能全放在本地进行,不进行数据远端存储”

SOLO 先通过几个问题确认了我的具体需求:

  • 应用类型:微信原生小程序
  • 核心功能:基础统计分析(收支概览、分类饼图、趋势图表)
  • 数据存储:全部本地存储
  • 交付物:完整可运行的项目代码

4. 开发过程

4.1 任务分解

SOLO 先把整个项目拆解成了清晰的子任务:

序号 任务 状态
1 搭建项目结构(app.js/json/wxss + 配置文件) :white_check_mark:
2 创建工具模块(billParser + storage + statistics + charts) :white_check_mark:
3 创建首页(本月概览 + 快捷入口) :white_check_mark:
4 创建导入页(CSV解析 + 预览确认) :white_check_mark:
5 创建分析页(饼图 + 柱状图 + 趋势) :white_check_mark:
6 创建明细页(列表 + 筛选 + 搜索) :white_check_mark:
7 创建设置页(数据管理 + 关于) :white_check_mark:
8 验证项目完整性 :white_check_mark:

4.2 核心模块开发

账单解析模块(billParser.js)

这是整个项目最核心的部分,SOLO 帮我实现了:

  • 自动识别账单来源(微信/支付宝)
  • 解析两种不同的 CSV 格式
  • 智能分类:根据交易描述自动归类到"餐饮、交通、购物"等 14 个预设类别
  • CSV 解析引擎:处理引号内含逗号的复杂情况

图表绘制模块(Echarts)

使用微信原生 Echarts实现了:

  • 环形图/饼图:分类支出占比
  • 柱状图:月度/日度收支对比
  • 折线图:支出趋势变化
  • 水平柱状图:分类排行

4.3 页面开发

SOLO 帮我创建了 5 个完整页面:

首页 - 收支概览

导入页 - 三步引导式流程

分析页 - 多维度图表

明细页 - 筛选搜索

设置页 - 数据管理

4.4 项目验证

SOLO 自动验证了项目完整性:

  • :white_check_mark: 5 个页面目录均包含完整的 4 个文件
  • :white_check_mark: 4 个工具模块齐全
  • :white_check_mark: 8 个 Tab 图标齐全
  • :white_check_mark: app.json 配置正确

5. 成果展示

5.1 项目结构

bill-analyzer/
├── app.js / app.json / app.wxss    # 小程序入口
├── project.config.json              # 开发者工具配置
├── images/                          # 8 个 Tab 图标
├── utils/                           # 4 个核心模块
│   ├── billParser.js               # CSV 解析、智能分类
│   ├── storage.js                  # 本地存储管理
│   ├── statistics.js               # 统计分析
│   └── charts.js                   # Canvas 图表绘制
└── pages/                           # 5 个页面
    ├── index/   # 首页概览
    ├── import/  # 账单导入
    ├── analysis/ # 图表分析
    ├── detail/  # 明细查询
    └── settings/ # 设置

共计 33 个文件,开箱即用!

5.2 核心功能

功能 说明
:inbox_tray: 账单导入 支持微信/支付宝 CSV,自动识别来源,智能去重
:label: 智能分类 根据交易描述自动归类到 14 个预设类别
:bar_chart: 统计分析 按月/年/日统计,分类汇总,收支趋势
:chart_increasing: 可视化图表 echarts 绘制饼图、柱状图、折线图
:magnifying_glass_tilted_left: 明细查询 多维筛选(来源/收支/分类)+ 关键词搜索
:locked_with_key: 数据安全 全部本地存储,不上传服务器

6. 亮点总结

6.1 技术亮点

  • 第三方依赖:图表使用echarts,精美
  • 智能解析:自动识别微信/支付宝 Excel 格式,兼容多种列顺序
  • 智能分类:关键词映射 + 模糊匹配,准确率高
  • 数据安全:100% 本地存储,零隐私泄露风险

6.2 SOLO 的价值

作为一个专业开发者,我用 SOLO 完成了:

传统开发 用 SOLO
需要学习小程序开发文档 直接描述需求即可
需要自己设计数据结构 SOLO 自动设计并实现
需要手写所有代码 SOLO 生成完整代码
需要自己调试验证 SOLO 自动验证完整性
预计耗时 3-5 天 实际耗时 两天

6.3 社会价值

这个小程序真正解决了普通人的痛点:

  • 理财入门:让不会记账的人也能看清消费情况
  • 隐私保护:不上传任何数据,消除用户顾虑
  • 简单易用:三步导入,一目了然的分析结果

一句话总结:用 SOLO,让"我有个想法"变成"我有个产品",只需要一次对话。