動手開發了一款鴻蒙餵奶卡片

樓主最近新晉為奶爸一枚，常常因餵奶問題困擾，而現有 app 記錄餵奶需要先打開應用，再去找對應功能，略感繁瑣，所以動手開發了一款餵奶卡片應用，以便日常使用。

該應用採用 API8 版本的 JS UI 組件開發，功能尚存不少缺陷，將在後文簡述。

效果展示：

卡片上滑

卡片詳情

首頁

通過以上效果圖我們可以看到，分別製作了數據錄入及統計圖表兩個卡片。

數據記錄卡片

在餵養小朋友時，我們常常回問自己，他上次是什麼時候吃的奶，上次吃奶距現在過去了多少時間；他今天總共吃了多少；他今天有沒排便；最近的排便是否都是正常等等問題。

數據記錄卡片提供記錄吃奶和排便情況的數據錄入及顯示。可以方便的快速錄入吃奶/排便情況以及提醒距上次吃奶/排便已過去時間。

通過卡片內容可以看到，卡片通過文本及按鈕組件進行簡單的排列組合，結合對應的事件處理完成記錄的任務。

統計卡片

僅僅記錄數據是不夠的，還不夠直觀展示當日餵養情況，故開發了統計卡片。

統計卡片通過 chart 組件對當日餵養數據進行折線圖演示，並以文本的形式在底部統計出當日總共吃奶總量。

首頁頁面

首頁頁面通過兩個chart組件，將當日餵養記錄及當日排便記錄進行展示。

PS：排版代碼將在後續文章中簡單介紹，使用到的組件僅有 text、div、chart、button。

有興趣的小夥伴可以先自行嘗試排版，數據的記錄採用 @ohos.data.storage（輕量級存儲）。

開發過程中的踩坑

①storage 存儲的 on(“change”) 事件不可用。

②storage 存儲文件的路徑最好通過 context 獲取當前 app 路徑，不過路徑獲取是異步過程，不想處理異步，可以調試時記錄下存儲文件路徑後定義為一個常量進行使用。

推斷路徑為：

"/data/user/0/{{bundleName}}/files/{{文件名}}";

③storage 存儲的 put 方法只是將內容推送到內存中，還需要調用 flush 方法將數據存儲到文件中。

④API8 的卡片 serverAbility 中 onCastToNormal 和 onVisibilityChange 未找到觸發方式。

根據官方文檔描述 onCastToNormal（卡片提供方接收臨時卡片轉常態卡片的通知接口）但將卡片固定到屏幕後未觸發。

⑤卡片不支持主動刷新，我嘗試用 setInterval 定時去主動刷新卡片，結果失敗。所以想做實時刷新的卡片，估計得退回 api6 的 Java 做 ServerAbility。

⑥chart 組件功能差強人意，三方庫也沒有好的統計圖表，希望早日能有和 echart 一樣強大的統計圖表。