KunSpace
返回作品
每日花光光(记账小程序)
微信小程序TypeScript记账本地存储

每日花光光(记账小程序)

日常开销记账微信小程序:一键登录、分类记账、每日明细、近 7/30 天统计与预算进度;数据本地存储,不上传个人隐私。

2026年4月20日源码

项目简介

「每日花光光」是一款简洁易用的 日常开销记账微信小程序:支持一键登录、本地安全存储、分类记账、每日明细、近 7 / 30 天统计与预算进度展示。

源码见 GitHub — Bookkeeping

功能

  • 一键登录 — 使用 wx.login 创建本地安全账号;可获取微信头像昵称显示
  • 分类记账 — 点击分类快速记一笔(支持自定义分类)
    • 常用图标库(40+ emoji)
    • 自定义图标:上传图片作分类图标,自动转 base64,大小自适应
  • 每日明细 — 查看某日账单、删除记录
  • 统计 — 近 7 / 30 天每日支出、折线趋势、分类占比饼图
  • 预算卡片 — 预算使用率(环形进度)、已消费 / 剩余、日均消费、剩余每日可花

隐私与安全

当前版本完全使用本地存储(wx.setStorageSync),不依赖服务器,不上传任何个人数据
未来若接入云开发 / 自有后端,将通过 wx.login 换取 openId,在后端安全存储并加密传输。

目录结构

miniprogram/
├── pages/index/     # 首页:快速记账、今日汇总
├── pages/day/       # 某日明细
├── pages/summary/   # 统计
├── utils/storage.ts # 本地存储与数据模型
├── utils/auth.ts    # 登录与本地资料
└── components/navigation-bar/

数据结构(摘要)

// icon:emoji 字符串,或 data:image/...;base64,...
type ExpenseCategory = { id: string; name: string; icon: string; color: string }
type ExpenseEntry = {
  id: string; categoryId: string; amount: number
  note?: string; timestamp: number; date: string
}
type UserProfile = { id: string; nickName?: string; avatarUrl?: string; createdAt: number }

核心 API:addEntrygetEntriesByDategetDailyTotalsgetSummary

使用说明

  1. 用微信开发者工具打开本项目
  2. 首页「微信一键登录」后,点分类快速记账
  3. 分类管理:新增 / 删除分类,选 emoji 或自定义图片
  4. 从首页进入今日 / 任意日明细;统计页切换近 7 / 近 30 天
  5. 「我的 → 预算计划」维护计划后,首页展示预算进度

路线图(可选)

云开发同步、记账备注与票据图、预算周期可配置、CSV / Excel 导出等。

每日花光光(记账小程序) — KunSpace · KunSpace