[[417812]]

想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com

本文引言

近期服務(wù)卡片大熱，起于服務(wù)卡片的征文，然后從《一文看懂HarmonyOS服務(wù)卡片運(yùn)行原理和開(kāi)發(fā)方法》到《鴻蒙卡片開(kāi)發(fā)超細(xì)致總結(jié)》，再到7.31日開(kāi)發(fā)者日的推送，最后昨日張二龍老師的《HarmonyOS新特性-服務(wù)卡片應(yīng)用實(shí)戰(zhàn)演練》直播課。對(duì)于服務(wù)卡片這種減少服務(wù)層級(jí)的體驗(yàn)?zāi)Ｊ?，與開(kāi)發(fā)方法，我覺(jué)得是非常值得去掌握的。故對(duì)代碼示例工程的兩個(gè)JS開(kāi)發(fā)的實(shí)例進(jìn)行完全剖析。

一、JS開(kāi)發(fā)和Java開(kāi)發(fā)

綜上所述，JS卡片比Java卡片支持的控件和能力都更豐富：

• Java卡片：適合作為一個(gè)直達(dá)入口，沒(méi)有復(fù)雜的頁(yè)面和事件。
• JS卡片：適合有復(fù)雜界面的卡片。

做個(gè)預(yù)告下一山海經(jīng)系列就是對(duì)Java卡片開(kāi)發(fā)的實(shí)例進(jìn)行解析。

二、代碼示例工程介紹

• JsFACard

本示例展示了服務(wù)卡片功能，通過(guò)服務(wù)卡片將用戶應(yīng)用程序的重要信息展示在桌面，用戶可通過(guò)快捷手勢(shì)使用卡片，以達(dá)到服務(wù)直達(dá)、減少層級(jí)跳轉(zhuǎn)的目的。

• JS計(jì)步器卡片

基于HarmonyOS JS UI，實(shí)現(xiàn)桌面卡片數(shù)據(jù)的可視化。

三、JsFACard

(一)效果演示

(二)頁(yè)面分析

1. 應(yīng)用界面(default)

​ 就是簡(jiǎn)單自帶的Helloworld

2. 服務(wù)卡片界面4X4(jscardtemplate)

需要注意的是源工程的設(shè)計(jì)有五個(gè)item-div，但頁(yè)面只能容納三個(gè)，多的兩個(gè)不知道是啥作用。

3. 服務(wù)卡片2X4(jsmusictemplate)

同樣的對(duì)于hml上顯示不出來(lái)的部分，不知道是不是有其他設(shè)計(jì)。

4.服務(wù)卡片2X4(card)

同樣的有一部分沒(méi)有顯示出來(lái)，感覺(jué)應(yīng)該是預(yù)留著的。

(三)工程目錄分析

(四)MainAbility的解析

其中有些需要注意MainAbility中這些方法：

• **onTriggerFormEvent()**卡片相關(guān)回調(diào)函數(shù)，JS卡片click事件
• **ZSONObject()**提供處理JSON結(jié)構(gòu)化數(shù)據(jù)對(duì)象的方法。該類(lèi)基于標(biāo)準(zhǔn)JSON數(shù)據(jù)結(jié)構(gòu)，封裝了一系列不同數(shù)據(jù)類(lèi)型的讀寫(xiě)方法，例如，int和float等基本數(shù)據(jù)類(lèi)型以及一些自定義數(shù)據(jù)類(lèi)型。它還提供了字符串和對(duì)象之間轉(zhuǎn)換的方法。使用這些方法，您可以輕松地處理JSON結(jié)構(gòu)化數(shù)據(jù)。
• **FormBindingData()**表示JS表單的數(shù)據(jù)結(jié)構(gòu)。此類(lèi)用于承載創(chuàng)建和更新JS表單時(shí)要傳遞的數(shù)據(jù)。
• **updateForm()**Ability extends AbilityContext implements ILifecycle下Ability的方法。用于更新卡片數(shù)據(jù)。

四、StepsCard

(一)效果展示

(二)頁(yè)面分析

1. 服務(wù)卡片2X2(card2X2)

2. 服務(wù)卡片2X4(card2X4)

3. 應(yīng)用頁(yè)面(MainAbilitySlice)

(三)工程目錄分析

(四)權(quán)限聲明

該應(yīng)用用到的兩個(gè)權(quán)限均是SystemPermission里的權(quán)限，其中獲取步數(shù)是敏感權(quán)限需要用戶同意。

關(guān)于后臺(tái)運(yùn)行的權(quán)限設(shè)置：

手機(jī)管家> 應(yīng)用啟動(dòng)管理> 計(jì)步器服務(wù)卡片> 點(diǎn)擊右側(cè)滑塊> 選擇開(kāi)啟"允許后臺(tái)活動(dòng)"開(kāi)啟后臺(tái)運(yùn)行權(quán)限

在config中添加

對(duì)于權(quán)限部分，整個(gè)工程涉及：

彈窗截圖：

獲取權(quán)限后會(huì)拉起計(jì)步器service。

(五)數(shù)據(jù)庫(kù)(FormDatabase)

(六)StepSensorService接收、存儲(chǔ)數(shù)據(jù)和更新卡片

1. 總體分析

2. onStart的解析

(七)關(guān)于卡片中那個(gè)折線圖的繪制(ChartDataUtils)

組件是：src/main/js/card2X4/pages/index/index.hml中的chart組件

入口：updateForms更新卡片信息中的

ZSONObject result = ChartDataUtils.getZsonObject(value, form.getDimension(), connect); 

數(shù)據(jù)說(shuō)明：

• datasets：線型圖點(diǎn)集;
• options：線型圖X軸，Y軸顯示;
• steps：步數(shù);
• percent：步數(shù)進(jìn)度百分比，為方便演示，本篇codelab以1000步為目標(biāo)步數(shù);mileage：里程(米)，計(jì)算方式為steps*0.6。

具體實(shí)現(xiàn)示例代碼都有注釋?zhuān)瑸榱吮疚牡耐暾仍诖速N一下：

獲取chart線型圖點(diǎn)集

根據(jù)步數(shù)獲取某一點(diǎn)數(shù)據(jù)：

Json數(shù)據(jù)處理(組裝)

(八)StepFormAbility

五、補(bǔ)充

開(kāi)發(fā)JS卡片事件和action。

JS卡片支持為組件設(shè)置action，包括router事件和message事件，其中router事件用于應(yīng)用跳轉(zhuǎn)，message事件用于卡片開(kāi)發(fā)人員自定義點(diǎn)擊事件。關(guān)鍵步驟說(shuō)明如下：

在hml中為組件設(shè)置onclick屬性，其值對(duì)應(yīng)到j(luò)son文件的actions字段中。

若設(shè)置router事件，則

• action屬性值為"router";
• abilityName為卡片提供方應(yīng)用的跳轉(zhuǎn)目標(biāo)Ability名;
• params中的值按需填寫(xiě)，其值在使用時(shí)通過(guò)intent.getStringParam(“params”)獲取即可;

若設(shè)置message事件，則action屬性值為"message"，params為json格式的值。

本文總結(jié)：

• 有一個(gè)問(wèn)題：在JsFACard中，js里hml里會(huì)多一些組件，是示例文檔另有用意，還是就是單純的多余?不是很懂
• hml+css+json開(kāi)發(fā)JS卡片頁(yè)面,配合數(shù)據(jù)庫(kù)和Java進(jìn)整體應(yīng)用的開(kāi)發(fā)
• 兩個(gè)卡片解析完畢，自己也準(zhǔn)備著手開(kāi)發(fā)一些富有想法的卡片了!!
• 之后還會(huì)對(duì)開(kāi)發(fā)Java卡片的兩個(gè)示例進(jìn)行解析。
• 解析雖然很累，但不管是對(duì)其中各種API的理解、還是對(duì)整個(gè)工程項(xiàng)目的搭建、JS頁(yè)面中hml+css+json的應(yīng)用、Java封裝繼承的思想都很有提升!
  

文章相關(guān)附件可以點(diǎn)擊下面的原文鏈接前往下載

JsFACard.

StepsCard.

想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com