CoinNote:从零做一个家庭记账微信小程序

前言

家里一直有记账的需求，用过不少记账软件：要么功能太重塞满了社交和理财，要么"家庭账本"要收费，要么数据全在别人服务器上让人不放心。作为一个开发者，标准结局就是——自己做。

CoinNote 就是这样诞生的：一款温暖治愈风格的家庭记账微信小程序，支持多人协作、离线优先、实时同步。

技术选型

选择这套组合的理由很直接：家庭应用的用户量就几个人，免费额度绰绰有余，而且没有任何一台服务器要维护。微信小程序的后端要求 HTTPS 域名，Workers 上绑个域名就能满足。

核心设计

1. 家庭协作模型

数据模型围绕"家庭"组织：一个 Family 下有多个成员，每笔消费记录归属家庭而不是个人，同时记录操作者。这样每个人都能看到全家的账本，统计时又能按人、按类别、按时间、按标签多维分析。

邀请家人加入用的是邀请码机制：管理员生成一个短期有效的邀请码，家人在小程序里输入即可加入，全程不需要对方注册任何东西。

2. 离线优先

地铁里、电梯里、地下室，没网的时候也想记账。所以 CoinNote 的记账流程是先写本地、后同步：

• 本地用小程序的 storage 维护一份未同步队列
• 每笔记录先入队列、立即反馈成功(体验上"3 秒记完一笔”)
• 网络可用时批量同步，按时间戳解决冲突

离线优先做起来比想象中麻烦的地方在于统计口径：本地未同步的记录也要参与本页面的统计展示，同步回来之后要做合并，否则会出现"记了一笔但列表里没有"的诡异体验。

3. 实时同步

家人记了一笔，我这边要不要立刻看到?用的是小程序端的定时拉取 + 记录版本号的增量同步策略。对家庭场景来说，秒级实时没有必要，分钟级"大家都看得到"就够了，换来的是实现复杂度大幅下降。

4. 设计系统:温暖治愈风

工具类应用很容易做成冷冰冰的表格，CoinNote 在设计上花了心思：

• 米白色背景 + 珊瑚橘主色，大圆角的"鹅卵石"质感
• 记账成功有弹性的动效和表情反馈
• 空状态用手绘风格的插画，让第一次打开的人不觉得这是个"系统”

记账这个事情，贵在坚持，而坚持很大程度靠"打开它不觉得烦”。设计上的投入是值得的。

踩过的坑

1. 微信登录与开发调试：微信登录链路在开发工具和真机上的行为不完全一致，单独做了一个开发登录通道，联调效率高了很多。
2. D1 的限制：D1 单库容量和并发有限制，家庭应用完全没问题，但要做好请求合并，别把每次点击都变成一次数据库往返。
3. 离线冲突：两个人同时离线记同一笔"家庭支出”，同步时要按业务主键(而不是自增 id)去重，这条教训记住就不会再踩。

小结

从立项到上线用了一个多月，全部基础设施成本为零。这个项目做完最大的感受是：Serverless 时代，一个想法到产品的距离，从来没有这么短过。

后端仓库:https://github.com/Silencehuliang/CoinNote-Backend · 小程序仓库:https://github.com/Silencehuliang/CoinNote-MiniProgram