基于JS卡片開發的代碼示例工程JsFACard與StepsCard的解析
本文引言
近期服務卡片大熱，起于服務卡片的征文，然后從《一文看懂HarmonyOS服務卡片運行原理和開發方法》到《鴻蒙卡片開發超細致總結》，再到7.31日開發者日的推送，最后昨日張二龍老師的《HarmonyOS新特性-服務卡片應用實戰演練》直播課。對于服務卡片這種減少服務層級的體驗模式，與開發方法，我覺得是非常值得去掌握的。故對代碼示例工程的兩個JS開發的實例進行完全剖析。
一、JS開發和Java開發
綜上所述，JS卡片比Java卡片支持的控件和能力都更豐富：
- Java卡片：適合作為一個直達入口，沒有復雜的頁面和事件。
- JS卡片：適合有復雜界面的卡片。
做個預告下一山海經系列就是對Java卡片開發的實例進行解析。
二、代碼示例工程介紹
- JsFACard
本示例展示了服務卡片功能，通過服務卡片將用戶應用程序的重要信息展示在桌面，用戶可通過快捷手勢使用卡片，以達到服務直達、減少層級跳轉的目的。
- JS計步器卡片
基于HarmonyOS JS UI，實現桌面卡片數據的可視化。
三、JsFACard
(一)效果演示
(二)頁面分析
1. 應用界面(default)
就是簡單自帶的Helloworld
2. 服務卡片界面4X4(jscardtemplate)
需要注意的是源工程的設計有五個item-div，但頁面只能容納三個，多的兩個不知道是啥作用。
3. 服務卡片2X4(jsmusictemplate)
同樣的對于hml上顯示不出來的部分，不知道是不是有其他設計。
4.服務卡片2X4(card)
同樣的有一部分沒有顯示出來，感覺應該是預留著的。
(三)工程目錄分析
(四)MainAbility的解析
其中有些需要注意MainAbility中這些方法：
- **onTriggerFormEvent()**卡片相關回調函數，JS卡片click事件
- **ZSONObject()**提供處理JSON結構化數據對象的方法。該類基于標準JSON數據結構，封裝了一系列不同數據類型的讀寫方法，例如，int和float等基本數據類型以及一些自定義數據類型。它還提供了字符串和對象之間轉換的方法。使用這些方法，您可以輕松地處理JSON結構化數據。
- **FormBindingData()**表示JS表單的數據結構。此類用于承載創建和更新JS表單時要傳遞的數據。
- **updateForm()**Ability extends AbilityContext implements ILifecycle下Ability的方法。用于更新卡片數據。
四、StepsCard
(一)效果展示
(二)頁面分析
1. 服務卡片2X2(card2X2)
2. 服務卡片2X4(card2X4)
3. 應用頁面(MainAbilitySlice)
(三)工程目錄分析
(四)權限聲明
該應用用到的兩個權限均是SystemPermission里的權限，其中獲取步數是敏感權限需要用戶同意。
關于后臺運行的權限設置：
手機管家> 應用啟動管理> 計步器服務卡片> 點擊右側滑塊> 選擇開啟"允許后臺活動"開啟后臺運行權限
在config中添加
對于權限部分，整個工程涉及：
彈窗截圖：
獲取權限后會拉起計步器service。
(五)數據庫(FormDatabase)
(六)StepSensorService接收、存儲數據和更新卡片
1. 總體分析
2. onStart的解析
(七)關于卡片中那個折線圖的繪制(ChartDataUtils)
組件是：src/main/js/card2X4/pages/index/index.hml中的chart組件
入口：updateForms更新卡片信息中的
- ZSONObject result = ChartDataUtils.getZsonObject(value, form.getDimension(), connect);
數據說明：
- datasets：線型圖點集;
- options：線型圖X軸，Y軸顯示;
- steps：步數;
- percent：步數進度百分比，為方便演示，本篇codelab以1000步為目標步數;mileage：里程(米)，計算方式為steps*0.6。
具體實現示例代碼都有注釋，為了本文的完整度在此貼一下：
獲取chart線型圖點集
根據步數獲取某一點數據：
Json數據處理(組裝)
(八)StepFormAbility
五、補充
開發JS卡片事件和action。
JS卡片支持為組件設置action，包括router事件和message事件，其中router事件用于應用跳轉，message事件用于卡片開發人員自定義點擊事件。關鍵步驟說明如下：
在hml中為組件設置onclick屬性，其值對應到json文件的actions字段中。
若設置router事件，則
- action屬性值為"router";
- abilityName為卡片提供方應用的跳轉目標Ability名;
- params中的值按需填寫，其值在使用時通過intent.getStringParam(“params”)獲取即可;
若設置message事件，則action屬性值為"message"，params為json格式的值。
本文總結：
- 有一個問題：在JsFACard中，js里hml里會多一些組件，是示例文檔另有用意，還是就是單純的多余?不是很懂
- hml+css+json開發JS卡片頁面,配合數據庫和Java進整體應用的開發
- 兩個卡片解析完畢，自己也準備著手開發一些富有想法的卡片了!!
- 之后還會對開發Java卡片的兩個示例進行解析。
- 解析雖然很累，但不管是對其中各種API的理解、還是對整個工程項目的搭建、JS頁面中hml+css+json的應用、Java封裝繼承的思想都很有提升!
文章相關附件可以點擊下面的原文鏈接前往下載
