作品十：简易记账小程序

​

做一个记账小程序，可以学习小程序的基本开发流程，包括数据存储 、页面跳转 、组件使用等。​

​

这个记账小程序要实现基本的记账功能 ​

•

用户可以添加收支记录，包括金额 、类型（ 收入/支出）、分类（餐饮 、交通 、工资等）、备注 、 日期 ​

•

首页显示记录列表和统计数据（本月收入 、支出 、结余）​

•

支持按日期筛选记录 ​

•

数据存储在本地，使用微信的本地存储 API​

​

​

​

​

28%

​

​

​

​

45%

​

​

​

​

27%

​

​

​

🔷

使用小程序原生开发，不使用任何框架 ​

数据存储使用wx.setStorageSync和wx.getStorageSync ​

​

开发步骤​

1）第一步是注册小程序账号 ​

去 公众平台 注册一个小程序账号 。选择个人类型，填写基本信息，完成注册 。注册后会得到一个 AppID ，开发时需要用到。​

2）第二步是下载开发者工具 ​

去 VX开放文档 下载微信开发者工具，安装后用VX扫码登录。​

3）第三步是创建项目 ​

打开开发者工具，点击新建项目 ，填写项目名称，选择项目目录，填入 AppID ，选择不使用云服务 。点击确定，会自动生成一个小程序项目模板。​

4）第四步是了解项目结构 ​

小程序项目的基本结构包括：​

•

pages 目录：存放页面 ，每个页面有 wxml（ 页面结构）、wxss（ 页面样式）、js（ 页面逻辑）、json （页面配置） 四个文件​

•

utils 目录：存放工具函数​

•

app.js：小程序逻辑​

•

app.json：小程序配置​

•

app.wxss：全局样式​

5）现在可以用 Cursor 打开项目目录，开始和 AI 对话开发。​

首先设计数据结构：​

​

代码块​

Plain Text

我要开发一个记账小程序，请帮我设计数据结构。​

​

需要存储的信息：​

- 金额​

- 类型（ 收入/支出）​

- 分类（餐饮 、交通 、购物 、工资等）​

- 备注​

- 日期​

​

​

AI 会帮你设计合理的数据结构，包括每个字段的类型和说明。然后创建首页：​

​

代码块​

Plain Text

请用微信小程序原生语法创建首页（ pages/index/index）：​

​

顶部显示统计卡片：​

- 本月收入（ 绿色）​

- 本月支出（ 红色）​

- 本月结余（ 蓝色）​

​

中间显示记录列表：​

- 按日期分组显示​

- 每条记录显示：分类图标 、分类名称 、备注 、金额​

- 收入显示绿色 ，支出显示红色​

​

底部有一个大的"+"按钮，点击跳转到添加页面。​

​

使用 Flex 布局，界面要美观。​

​

这个提示词详细说明了首页的布局和样式 。AI 会生成完整的 WXML 、WXSS 和 JS 代码。接着实现数据存储：​

​

代码块​

Plain Text

创建 utils/storage.js 工具文件，封装数据存储操作：​

​

1. saveRecord(record)：保存一条记录​

2. getRecords()：获取所有记录​

3. deleteRecord(id)：删除一条记录​

4. getMonthRecords(year, month)：获取指定月份的记录​

​

使用 wx.setStorageSync 和 wx.getStorageSync 存储数据。记录要有唯一 ID（ 可以用时间戳）。​

​

这样就把数据存储逻辑封装好了，后面用起来很方便。然后创建添加页面：​

​

代码块​

Markdown

顶部有两个 Tab：收入 、支出​

​

​

接着实现统计功能：​

​

代码块​

Plain Text

在首页实现统计功能：​

​

1. 计算本月总收入：筛选本月的收入记录，求和​

2. 计算本月总支出：筛选本月的支出记录，求和​

3. 计算本月结余：收入 - 支出​

​

在页面加载时和返回时刷新统计数据。​

​

最后实现记录列表：​

​

代码块​

Plain Text

在首页实现记录列表：​

​

1. 获取所有记录，按日期倒序排列​

2. 按日期分组显示（今天 、昨天 、更早）​

3. 每条记录显示分类图标 、名称 、备注 、金额​

​

开发技巧​

在开发小程序时，有几个技巧可以提高效率 。​

首先，要利用好微信开发者工具的调试功能 。可以在模拟器中预览效果，也可以在真机上预览 。真机预览需要用VX扫码，可以看到真实的运行效果。​

其次，小程序的数据存储是同步的，使用 wx.setStorageSync 和 wx.getStorageSync 。如果数据量大 ，建议使用异步版本 wx.setStorage 和 wx.getStorage ，避免阻塞主线程。​

另外，小程序的页面跳转有几种方式： ​

​

🔷

•

wx.navigateTo （保留当前页面 ，可以返回）​

•

wx.redirectTo （ 关闭当前页面，不能返回）​

•

wx.switchTab （ 跳转到 tabBar 页面）​

•

wx.navigateBack （ 返回上一页）。要根据场景选择合适的方式。​

​

最后，小程序有一些限制， 比如包大小不能超过 2MB（ 分包后每个包不超过 2MB），要注意控制图片大小和代码体积 。可以使用图片压缩工具压缩图片 ，使用代码分包功能拆分代码。​

扩展思路​

基础版完成后，可以继续扩展功能 。​

比如添加预算设置，设置每月预算，超支时提醒；​

添加图表展示，用图表显示收支趋势；​

支持分类管理，用户可以自定义分类；​

添加账单导出，导出为 Excel 文件；​

支持多账本，可以创建工作账本 、生活账本等；​

集成云同步，使用微信云开发实现多设备同步。​

​

​

​