微信記賬本小程序（代碼+設計）

項目說明

這是一款具有記賬功能的小程序-記賬本，簡單分為五個模塊：消費一覽、記一筆、，消費明細，消費報表、個人。

 源代碼連接：https://gitee.com/yersmola/bit-by-bit-bookkeeping/blob/master/diandier.zip

 

小程序二維碼，歡迎掃碼體驗

 

 

 

 

1、軟件結構

對本系統的相關功能的實現主要有:

1. 實現分類記賬，統計每日消費總額
2. 設置可消費總金額，如有超額，做出提醒
3. 繪制月消費，年消費總賬單餅圖，更好了解各支出所再比重。
4. 可對消費記錄進行刪除操作

功能分解圖如下圖3-1所示：

 

 

 

圖1-1功能分解圖

操作流程圖如下圖1-2所示：

 

 

 

 

 

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