偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

基于JS卡片開發(fā)的代碼示例工程JsFACard與StepsCard的解析

開發(fā) 前端
對于服務(wù)卡片這種減少服務(wù)層級的體驗?zāi)J?,與開發(fā)方法,我覺得是非常值得去掌握的。故對代碼示例工程的兩個JS開發(fā)的實例進行完全剖析。

[[417812]]

想了解更多內(nèi)容,請訪問:

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

https://harmonyos.51cto.com

本文引言

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

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

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

  • Java卡片:適合作為一個直達入口,沒有復(fù)雜的頁面和事件。
  • JS卡片:適合有復(fù)雜界面的卡片。

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

二、代碼示例工程介紹

  • JsFACard

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

  • JS計步器卡片

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

三、JsFACard

(一)效果演示

(二)頁面分析

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

​ 就是簡單自帶的Helloworld

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

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

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

同樣的對于hml上顯示不出來的部分,不知道是不是有其他設(shè)計。

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

同樣的有一部分沒有顯示出來,感覺應(yīng)該是預(yù)留著的。

(三)工程目錄分析

(四)MainAbility的解析

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

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

四、StepsCard

(一)效果展示

(二)頁面分析

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

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

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

(三)工程目錄分析

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

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

關(guān)于后臺運行的權(quán)限設(shè)置:

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

在config中添加

對于權(quán)限部分,整個工程涉及:

彈窗截圖:

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

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

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

1. 總體分析

2. onStart的解析

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

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

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

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

數(shù)據(jù)說明:

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

具體實現(xiàn)示例代碼都有注釋,為了本文的完整度在此貼一下:

獲取chart線型圖點集

根據(jù)步數(shù)獲取某一點數(shù)據(jù):

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

(八)StepFormAbility

五、補充

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

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

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

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

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

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

本文總結(jié):

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

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

JsFACard.

StepsCard.

想了解更多內(nèi)容,請訪問:

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

https://harmonyos.51cto.com

 

責(zé)任編輯:jianghua 來源: 鴻蒙社區(qū)
相關(guān)推薦

2021-08-04 14:32:16

鴻蒙HarmonyOS應(yīng)用

2021-08-18 10:06:33

鴻蒙HarmonyOS應(yīng)用

2021-09-18 09:57:20

鴻蒙HarmonyOS應(yīng)用

2011-10-18 10:17:13

Node.js

2022-02-21 15:25:47

HarmonyOS鴻蒙低代碼開發(fā)

2021-08-12 10:02:08

鴻蒙HarmonyOS應(yīng)用

2024-11-04 14:42:12

2010-03-23 14:12:43

Python開發(fā)Win

2011-08-12 14:39:00

iPhoneSDK

2009-12-02 10:49:59

PHP解析XML元素結(jié)

2011-08-12 11:22:53

Oracle存儲過程Java

2010-04-09 18:02:31

Oracle創(chuàng)建

2024-10-09 17:12:34

2010-03-22 17:53:50

Python字符Python字符串

2010-02-24 13:38:18

WCF PreCal模

2009-12-07 15:41:51

PHP圖片加水印

2021-04-23 16:08:08

鴻蒙HarmonyOS應(yīng)用

2016-12-20 11:12:11

C代碼自測開發(fā)

2024-02-27 10:44:58

C#線程后端

2010-04-16 09:27:18

Ocacle執(zhí)行計劃
點贊
收藏

51CTO技術(shù)棧公眾號