微信记账本小程序（代码+功能介绍）

这是一款具有记账功能的小程序-记账本，简单分为五个模块：消费一览、记一笔、，消费明细，消费报表、个人。

源代码连接：https://gitee.com/yersmola/bit-by-bit-bookkeeping/blob/master/diandier.zip
小程序二维码，欢迎扫码体验

1、软件结构

对本系统的相关功能的实现主要有:

实现分类记账，统计每日消费总额
设置可消费总金额，如有超额，做出提醒
绘制月消费，年消费总账单饼图，更好了解各支出所再比重。
可对消费记录进行删除操作
功能分解图如下图所示：

操作流程图如下图所示：

2．功能及界面描述

【逐个模块给出以下的说明：】

2.1消费一览模块

进入消费一览模块，首先可以设置本月的消费预算，根据本月的消费预算和本月的具体消费，输出日消费金额和月消费金额，输出扇形图，显示已消费的比例。输出显示人均消费，剩余余额和本月剩余天数。

参考界面：

2.2记一笔模块

进入记一笔模块，输入记账的金额，选择记账的类别，添加备注（可以不添加），选择日期（日期默认为当天），点击确认。完成记账

参考界面：

2.3消费明细模块

进入消费明细模块此时默认的是本月今日起到月初的每一笔消费记录。还可以选择显示消费明细的月份和日期，根据具体的选择内容得到不同的显示明细。

参考界面：

2.4消费报表模块

点击进入消费报表模块，此时默认的是本月的每一个类别的总体消费金额和具体的消费明细，以及根据消费类别的总金额画出一个消费扇形图，记录每一个类别的消费比例。同时也可根据需要选择不同的月份和年份查看自己的消费记录。

参考界面：

2.5个人模块

显示用户头像和微信名，还有一个汇率计算器和一个分享功能等。

3、交互细化要求

从整体来看，本产品UI设计美观精致，从图标到界面的设计都是有团队精心选着和设计的，所有的界面设计都是使用的CSS模式来进行设计，一部分界面设计用到了vant-weapp插件。

3.1图片图标

对于不同的账单的类型，系统将展示不同的图标来帮助用户更好的区分。同时多采用的扇形图圆环来进行表示，界面清晰明了。

界面设计：

3.2失败或成功的提示

对于每一次输入和保存，都会有相应的成功或失败的提示，比如在记一笔模块进行保存的时候会输出保存中的提示。在输入的金额不符合日常规制的时候也会进行提醒，备注太长也会进行提醒。

界面设计：

## 3.3账单排序：

对于在消费明细中输出的账单，都会进行从今天的账单，向前进行输出展示，这样就防止用户需要再去找今天的账单，同时还可以选着输出一天的账单来进行查看，方便用户查看不同日期的当日消费。

4、技术开发方案

本系统使用了云开中的云函数，云数据库，云存储。将所有的用户信息都保存在与数据库中。对于某些频繁使用的功能，编写云函数，在需要的地方调用即可。

云数据库设计：

用户没记录一笔账单之后，将相关数据上传到云数据库中（allCost库），同时从云数据库中按相关条件查询数据进行输出。在消费一览模块，还有一个预算的的读取（monBudget库），预算也是一个数据库。在对这个数据库进行操作的时候，需要查看该用户是否在数据库中，如果在就进行更新操作，不在就把该用户添加进数据库，在进行更新操作。

以上就是整个项目的大概框架，代码部分已上传代码库，可以下载查看。

代码连接：https://gitee.com/yersmola/bit-by-bit-bookkeeping/blob/master/diandier.zip