文章内 功能实现 所用到的技术包括：uniapp（小程序开发）、node（后端语言，后面条件允许的情况下将会改成 Java）、MySQL（数据存储）、vue3（后台管理），图片存储使用的是 七牛云。
初衷
三四年前，我是没有记账习惯的，直到谈了女朋友。
开销慢慢的就上去了，但是每次一想，钱好像也没乱花。
为了搞清每个月的钱到底干了啥，我们在某一天夜里开始在各个应用市场、app 上搜寻靠谱的记账软件。
下载了很多，其中受我们青睐的有：鲨鱼记账、随手记。鲨鱼功能较简洁，个人现在都还比较喜欢，但是没有多人记账，不合适情侣；随手记最开始也是很好的，我们用了很长时间，但后面还是没有坚持下来，去年再想去用的时候，发现贼多的广告，最烦的：在消费列表，有一个广告你关闭了，然后点击消费详情，返回到消费列表，广告又出来了。
其次，它们都不止记账和广告，还有一些理财、复杂的界面定制等。
所以，再结合自己的需求，我就想做一个简单一点的、界面看不到任何广告的 app 出来。
不奢望多少人用，只要我身边的人用我就会一直维护下去。
动手
从有这个想法，到最后的线上，历时一年之久。
现在想想，这个小程序功能并不复杂，耽误时间的主要是前期拖延症，还有过程中的界面布局思路、用户交互、错误监控、埋点、后端逻辑等，也因为之前没有画流程图的习惯，导致在建库、前后端进行联调的时候走了很多弯路。
小程序端使用的技术有：uniapp、weex、echarts。这一个端我认为比较可说的就是做了用户埋点 + 错误监控，先用埋点收集了用户的行为路径，在发生错误的时候，会连同错误信息一并发送到后端，且邮件通知到我。再加上我微信和 QQ 都开通了邮件提醒，也能第一时间收到。当然这只是初步的实现方案，还未实现可视化管理和其他细节。
后台管理：vue3、pinia、ant-design-vue 和 vite，封装了 echarts、动态表单等。动态表单是通过 model（数据对象） 和 configs（数据对象的配置信息）一起生成的：
<template>
<zeng-form layout="inline" :model="query" :configs="formConfigs" />
</template>
<script setup>
const query = reactive({
searchKey: ''
})
const formConfigs = [
{
prop: 'searchKey',
label: '关键字',
dom: 'Input',
domProps: {
placeholder: '请输入查询的关键字'
}
}
]
</script>
还有存在动态删减项、需要验证的表单：
在 vue2 的时候，接到了一个 BI 的需求，使用到了动态表单，但那个时候还欠考虑，vue3 的时候在原来的基础上继续优化了，3 封装起来则更简单，因为 props、attrs、listener 都平铺了。
element-ui 上的表单案例都可以出来，尤其是动态追加数据项。（开始实现的版本就是参考的 element-ui form）
前期的思维图：
还有流程图：
在一个大功能开始前，我会先用思维导图把数据库对象可能存在的字段列出来、表与表之间的关系关联起来，再通过流程图把流程线弄出来，后再进行代码开发。
还有一些与技术无关的还有友情👇👇👇
那些素未谋面的设计师朋友又是帮我审查界面中的样式问题，给出专业性的建议，又是充当着测试工程师的角色，很感激她们。（还有一枚热心、人美性格好的 22 岁设计小姐姐单身着，目前居住在深圳，有想法的男同学们可以加我微信 zengchen97，申请备注是自己的一些基本情况，如果她觉得可以我会通过并推送🤗）。
从前一起的后端朋友，创业的老板（后端）、老板娘（设计师）也都提供了贼多的帮助。
上线效果
好像录制成 gif 画面看着有点不舒服，要是感兴趣可以直接去小程序看看。
未来
大家如果去体验了就会知道，从 进入小程序 到第一笔账单记录完成，你是不需要做任何与之无关的事情，也不会看到除了记账必要信息之外的其他信息，没有登录弹窗、没有权限授权的弹窗（除开要上传小票啥的图片需要授权外）、界面内无任何广告。换了手机，同一个微信的记录还是一样存在。
界面简单、纯净，是我想的、要的效果，以后也会这么下去。
现在核心的记账和统计功能已经上线，已经排期的功能主要包括：
- 多人记账（已经实现，但未发生产）
- 导入/导出
- 消费海报
- 账单搜索
- 周期记账
你还有什么期待的吗？
