之前買了我的第一支amzfit智慧型手錶(雖然是中國牌但也只能用了)，想說要記錄睡眠運動讓我睡得更多運動得更好，但是發現沒有督促我喝水的功能。於是我從零開始，使用 Zepp OS 開發了一款名為「Water Tracker (喝水)」的 App。
1. 專案架構概覽
Zepp OS 底層支援使用 JavaScript (ES6) 進行開發，專案主要結構如下：
2. 畫面設計與 UI 實作
手錶螢幕空間有限，設計哲學為：「一眼看懂進度，一鍵完成記錄」。主要切分五個核心區塊：
- 進度文字提示：顯示 當前水量 / 每日目標。視覺化水瓶 (Bottle Area)：透過程式動態繪製水瓶填滿比例。快速加水按鈕 (Quick Buttons)：提供常用容量（如 +100, +200）。重置按鈕 (Reset)：方便清空數據。飲水紀錄清單 (Scroll List)：列出今日紀錄，並支援左滑刪除手勢。
UI 佈局定義片段（快速加水按鈕）：
3. 核心技術點：本地化資料存儲 (FS)
利用 @zos/fs 模組進行 JSON 檔案讀寫，確保 App 關閉或手錶重啟後數據不遺失，並透過時間戳記自動過濾過期紀錄。
檔案讀寫封裝：
4. 串接與生命週期管理
在 index.page.js 中使用 onInit, build, onDestroy 管理。策略是減少 Flash 讀寫次數以省電：
- onInit：讀取檔案，計算總量，並透過 @zos/user 取得體重換算每日目標。互動時：更新 State 並同步覆寫檔案。onDestroy：退出時進行最後保底寫入。
5. 編譯與佈署測試
使用 Zeus CLI 工具鏈進行佈署：
- 安裝依賴：npm install啟動模擬器：執行 zeus dev，確認圓形與方形螢幕的佈建適配。實機預覽：執行 zeus preview 產生 QR Code，使用手機 Zepp App 掃描即可透過藍牙安裝至手錶。
6. 結語
利用 JavaScript 就能開發出流暢的手錶原生 App 是非常有成就感的事。如果你對穿戴式裝置感興趣，Zepp OS 是極佳的切入點。接下來計畫將 App 推上 Zepp App Store，歡迎交流！
