這是一款具有記賬功能的小程式-記賬本，簡單分為五個子產品：消費一覽、記一筆、，消費明細，消費報表、個人。
源代碼連結
小程式二維碼，歡迎掃碼體驗
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
————————————————
版權聲明：本文為CSDN部落客「小尾巴0808」的原創文章，遵循CC 4.0 BY-SA版權協定，轉載請附上原文出處連結及本聲明。
原文連結：https://blog.csdn.net/m0_51056207/article/details/118087352