《鴻蒙JS應(yīng)用開發(fā)》項(xiàng)目4類Web開發(fā)范式組件4.3.2任務(wù)掌握選擇器組件的使用1、學(xué)習(xí)如何在HarmonyOS應(yīng)用中使用選擇器組件（picker）2、通過實(shí)際的代碼示例來探討不同類型的選擇器組件，如普通選擇器、日期選擇器和時(shí)

間選擇器，并實(shí)現(xiàn)與它們相關(guān)的事件處理邏輯。任務(wù)陳述▲選擇器組件是一個(gè)非常實(shí)用且常見的組件，它能夠在不同的場景下為用戶提供直觀且友好的數(shù)據(jù)選擇方式。能夠通過實(shí)際的代碼示例來應(yīng)用和實(shí)踐選擇器組件的使用，提高用戶交互體驗(yàn)。學(xué)習(xí)目標(biāo)理解和掌握不同類型的選擇器組件的基本使用方法。了解如何為選擇器組件設(shè)置屬性以及如何處理相關(guān)的事件。對(duì)HTML、CSS和JavaScript有基本的了解和使用經(jīng)驗(yàn)。了解HarmonyOS應(yīng)用開發(fā)的基本知識(shí)，例如數(shù)據(jù)綁定、事件處理等。知識(shí)準(zhǔn)備應(yīng)用場景01組件的應(yīng)用場景在實(shí)際開發(fā)過程中，選擇器組件的使用十分常見，它為用戶提供了直觀且友好的數(shù)據(jù)選擇方式。無論是在填寫日期、選擇時(shí)間，還是在一系列選項(xiàng)中做出選擇，picker組件都能提供流暢的用戶體驗(yàn)。例如，在做預(yù)約打車服務(wù)的應(yīng)用時(shí)，用戶可以通過日期選擇器和時(shí)間選擇器快速選擇預(yù)約出行的時(shí)間；在購物應(yīng)用中，多列文本選擇器可以幫助用戶在多個(gè)屬性（如顏色、尺碼）中做出選擇；普通選擇器則可以應(yīng)用于任何需要從多個(gè)選項(xiàng)中選擇一項(xiàng)的場景，如選擇國家、城市等。通過靈活運(yùn)用picker組件，不僅可以使應(yīng)用界面更為簡潔，還能大大提升用戶的交互體驗(yàn)。hml代碼實(shí)現(xiàn)02hml代碼接下來我們來編寫三個(gè)不同的選擇，分別用于選擇年齡，生日以及時(shí)間。hml代碼如下所示：左述代碼中，通過設(shè)置picker的type屬性來改變選擇器類型<divclass="container">

<pickerid="picker_text"type="text"value="{{textValue}}"

range="{{rangeText}}"class="picker_text"

onchange="changeText"></picker>

<pickerid="picker_date"type="date"value="{{dateValue}}"

lunarswitch="true"start="2000-2-5"end="2030-6-5"

class="picker_date"onchange="changeDate"></picker>

<pickerid="picker_time"type="time"value="{{timeValue}}"

hours="12"onchange="changeTime"class="picker_time">

</picker>

</div>type=text表示普通選擇器；type=time表示時(shí)間選擇器。type=date表示日期選擇器；不同選擇器的注意事項(xiàng)普通選擇器設(shè)置取值范圍時(shí)，需要使用數(shù)據(jù)綁定的方式。0201不同選擇器在使用時(shí)需要注意以下細(xì)節(jié)：lunarswitch="true"表示允許切換到農(nóng)歷顯示。不同選擇器的注意事項(xiàng)0304不同選擇器在使用時(shí)需要注意以下細(xì)節(jié)：hours屬性為12：按照12小時(shí)制顯示，用上午和下午進(jìn)行區(qū)分；hours屬性為24：按照24小時(shí)制顯示。css代碼實(shí)現(xiàn)03css

樣式css代碼如下所示：.container{

width:100%;

height:100%;

flex-direction:column;

justify-content:center;

align-items:center;

background-color:#F1F3F5;

}

.picker_text{

margin-bottom:30px;

}

.picker_date{

margin-bottom:30px;

}js代碼實(shí)現(xiàn)04js代碼js代碼如下所示：exportdefault{

data:{

rangeText:['20',"21","22",'23',"24","25",

'26',"27","28",'29',"30"],

textValue:'選擇年齡',

dateValue:'選擇生日',

timeValue:'選擇時(shí)間',

},changeText(e){

this.textValue=e.newValue;

},changeDate(e){

this.dateValue=e.year+"-"+(e.month+1)+"-"+e.day;

},

changeTime(e){

this.timeValue=e.hour+":"+e.minute;

}

}可以對(duì)picker添加change和cancel事件，來對(duì)選擇的內(nèi)容進(jìn)行確定和取消。預(yù)覽結(jié)果05預(yù)覽結(jié)果預(yù)覽器查看效果如下圖所示：HarmonyOSTHANKS《鴻蒙JS應(yīng)用開發(fā)》項(xiàng)目4類Web開發(fā)范式組件4.3.3任務(wù)掌握開關(guān)組件的使用學(xué)習(xí)如何在HarmonyOS應(yīng)用中創(chuàng)建和使用開關(guān)組件，并通過事件處理邏輯來響應(yīng)用戶的操作。任務(wù)陳述▲在許多應(yīng)用中，開關(guān)組件都是非常常見且重要的一個(gè)UI元素，它為用戶提供了一種直觀且簡潔的操作方式，以控制某些功能的開啟和關(guān)閉。任務(wù)目標(biāo)理解和掌握HarmonyOS中開關(guān)組件的基本使用方法。學(xué)習(xí)如何為開關(guān)組件設(shè)置屬性，包括顯示文本、開啟/關(guān)閉狀態(tài)等。

了解如何通過事件處理邏輯來響應(yīng)開關(guān)組件的狀態(tài)變化，并給予用戶相應(yīng)的反饋?；镜腍TML、CSS和JavaScript知識(shí)。HarmonyOS應(yīng)用開發(fā)的基礎(chǔ)知識(shí)，例如數(shù)據(jù)綁定、事件處理等。知識(shí)準(zhǔn)備hml代碼實(shí)現(xiàn)01hml代碼首先，我們?cè)贖ML中創(chuàng)建開關(guān)組件，并為其設(shè)置一些基本屬性。例如，我們可以通showtext屬性來控制是否顯示文本，通過texton和textoff屬性來設(shè)置開關(guān)打開和關(guān)閉時(shí)的文本。同時(shí)，我們也為開關(guān)組件綁定了一個(gè)change事件處理函數(shù)，以便在開關(guān)狀態(tài)變化時(shí)執(zhí)行相應(yīng)的邏輯。html代碼如下所示：<divclass="container">

<switchshowtext="true"texton="ON"textoff="OFF"checked="true"

@change="switchChange"></switch>

</div>當(dāng)showtext=“true”時(shí)當(dāng)showtext=“false”時(shí)css代碼實(shí)現(xiàn)02css

樣式css代碼如下所示：.container{

width:100%;

height:100%;

display:flex;

justify-content:center;

align-items:center;

background-color:#F1F3F5;

}

switch{

texton-color:#002aff;

textoff-color:silver;

text-padding:20px;

font-size:60px;

texton-color:black;

}js代碼實(shí)現(xiàn)03js代碼js代碼如下所示：這里的switchChange(e)函數(shù)對(duì)應(yīng)hml代碼的@change事件綁定預(yù)覽結(jié)果04預(yù)覽結(jié)果通過以上代碼，我們成功地創(chuàng)建了一個(gè)具備基本功能的開關(guān)組件，并能夠?yàn)橛脩籼峁┲庇^的交互反饋。預(yù)覽器查看效果如下圖所示：HarmonyOSTHANKS《鴻蒙JS應(yīng)用開發(fā)》項(xiàng)目4類Web開發(fā)范式組件4.3.4任務(wù)掌握滑動(dòng)條組件的使用1、學(xué)習(xí)如何創(chuàng)建和配置HarmonyOS中的滑動(dòng)條組件。2、理解如何捕獲和使用用戶的輸入。任務(wù)陳述▲滑動(dòng)條組件是用戶界面中常見的元素，它允許用戶通過滑動(dòng)選擇一個(gè)值。這種交互方式非常直觀，并可以在多種場景下使用。例如調(diào)整音量、擇亮度或其他需要連續(xù)值的設(shè)置。學(xué)習(xí)目標(biāo)理解并掌握滑動(dòng)條組件在HarmonyOS中的基本使用。學(xué)習(xí)如何配置滑動(dòng)條組件的屬性，例如最小值、最大值和步長。了解如何通過事件實(shí)時(shí)捕獲用戶的滑動(dòng)的數(shù)值?；镜腍TML、CSS和JavaScript知識(shí)。HarmonyOS應(yīng)用開發(fā)的基礎(chǔ)知識(shí)，例如數(shù)據(jù)綁定、事件處理等。知識(shí)準(zhǔn)備hml代碼實(shí)現(xiàn)01hml代碼在HTML中，我們創(chuàng)建了一個(gè)滑動(dòng)條組件，并通過屬性設(shè)置了它的最小值、最大值、初始值和長。我們還為它綁定了一個(gè)onchange事件處理函數(shù)，以便捕獲用戶的滑動(dòng)數(shù)據(jù)。hml代碼如下所示：組件屬性1min:此屬性定義了滑動(dòng)條的最小值。0102max:此屬性定義了滑動(dòng)條的最大值。在這個(gè)例子中，滑動(dòng)條的最大值設(shè)置為100。相關(guān)滑動(dòng)條組件屬性設(shè)置解釋如下：組件屬性1這里的{{value}}就是1和2的當(dāng)前值03value:此屬性定義了滑動(dòng)條的當(dāng)前值。它通常用于數(shù)據(jù)綁定，以顯示和更新用戶的選擇。在這個(gè)例子中，它綁定到一個(gè)名為value的變量。組件屬性2step:此屬性定義了滑動(dòng)條的步長，也就是每次滑動(dòng)時(shí)值的增減量。在這個(gè)例子中，步長設(shè)置為2，這意味著每次滑動(dòng)時(shí)，滑動(dòng)條的值會(huì)以2的增量變化。0405mode:此屬性定義了滑動(dòng)條的模式。inset模式意味著滑動(dòng)條的軌道會(huì)“嵌入”到組件中。其他值包括outset，它將使軌道“凸出”。組件屬性3showtips:此屬性決定是否在滑動(dòng)時(shí)顯示提示。設(shè)置為true時(shí)，會(huì)顯示一個(gè)提示，顯示當(dāng)前滑動(dòng)條的值。0607onchange:此屬性定義了一個(gè)事件處理函數(shù)，當(dāng)滑動(dòng)條的值發(fā)生變化時(shí)，它會(huì)被觸發(fā)。在這個(gè)例子中，setValue函數(shù)會(huì)被調(diào)用，以處理滑動(dòng)條值的變化。css代碼實(shí)現(xiàn)02css

樣式css代碼如下所示：.container{

width:100%;

height:100%;

flex-direction:column;

justify-content:center;

align-items:center;

background-color:#F1F3F5;

}js代碼實(shí)現(xiàn)03js代碼js代碼如下所示：預(yù)覽結(jié)果04預(yù)覽結(jié)果通過以上代碼，我們成功地創(chuàng)建了一個(gè)具備基本功能的滑動(dòng)條組件，并能夠?yàn)橛脩籼峁┲庇^的交互反饋。預(yù)覽器查看效果如下圖所示：HarmonyOSTHANKS《鴻蒙JS應(yīng)用開發(fā)》項(xiàng)目4類Web開發(fā)范式組件4.3.5任務(wù)掌握進(jìn)度條組件的使用學(xué)習(xí)如何使用不同類型的進(jìn)度條組件，并通過樣式自定義進(jìn)度條的外觀。任務(wù)陳述▲在開發(fā)過程中，進(jìn)度條是一個(gè)常用組件，它可以清晰地向用戶展示任務(wù)的完成程度或加載進(jìn)度。任務(wù)目標(biāo)理解并能使用不同類型的進(jìn)度條組件。能通過樣式自定義進(jìn)度條的外觀。理解進(jìn)度條的基本屬性及其應(yīng)用。熟悉基本的HTML和CSS語法。

熟悉基本的組件屬性設(shè)置和樣式自定義。知識(shí)準(zhǔn)備hml代碼實(shí)現(xiàn)01hml代碼鴻蒙提供了多種不同類型的進(jìn)度條組件，例如scale-ring，horizontal，arc，ring。每種類型的進(jìn)度條通過type屬性來定義。同時(shí)，可以通過CSS

樣式來自定義進(jìn)度條的外觀，例如stroke-width設(shè)置進(jìn)度條的線條寬度，color和background-color設(shè)置進(jìn)度條的顏色等。hml代碼如下所示：css代碼實(shí)現(xiàn)02css

樣式css代碼如下所示：.container{

flex-direction:column;

height:100%;

width:100%;

align-items:center;

justify-content:center;

}

.min-progress{

width:300px;

height:300px;

}

.one{

stroke-width:60px;

scale-width:10px;

scale-number:30;

}

.two{

color:skyblue;

stroke-width:20px;

background-color:darkgrey;

}min-progress

是所有進(jìn)度條組件的classonetwo預(yù)覽結(jié)果03預(yù)覽結(jié)果預(yù)覽器查看效果如下圖所示：HarmonyOSTHANKS《鴻蒙JS應(yīng)用開發(fā)》項(xiàng)目4類Web開發(fā)范式組件4.3.6任務(wù)掌握工具欄組件的使用1、學(xué)習(xí)如何在HarmonyOS應(yīng)用開發(fā)中有效地使用toolbar和toolbar-item組件2、將通過實(shí)踐學(xué)習(xí)這些組件的基礎(chǔ)知識(shí)和應(yīng)用，特別是在創(chuàng)建電商導(dǎo)航工具欄方面。任務(wù)陳述學(xué)習(xí)目標(biāo)掌握如何在電商應(yīng)用中實(shí)現(xiàn)一個(gè)基于toolbar的導(dǎo)航欄。將通過實(shí)踐學(xué)習(xí)這些組件的基礎(chǔ)知識(shí)和應(yīng)用，特別是在創(chuàng)建電商導(dǎo)航工具欄方面。掌握如何創(chuàng)建和配置這些組件。學(xué)習(xí)組件的相關(guān)屬性和事件?；A(chǔ)的HTML、CSS和JavaScript知識(shí)。HarmonyOS的基礎(chǔ)架構(gòu)和組件系統(tǒng)。對(duì)HarmonyOS的數(shù)據(jù)綁定和事件處理有一定了解。知識(shí)準(zhǔn)備任務(wù)實(shí)施01掌握目標(biāo)本任務(wù)主要目的是幫助學(xué)生掌握在HarmonyOS應(yīng)用開發(fā)中工具欄組件的基本使用方法，toolbar為頁面工具欄組件，用于展示針對(duì)當(dāng)前界面的操作選項(xiàng)，可作為頁面的一級(jí)導(dǎo)航。學(xué)生需要學(xué)習(xí)掌握如何創(chuàng)建toolbar組件，toolbar-item組件，以及組件的相關(guān)屬性和事件，最后開發(fā)實(shí)現(xiàn)一個(gè)電商的導(dǎo)航工具欄。hml代碼實(shí)現(xiàn)02hml代碼首先在pages/index目錄下的hml文件中創(chuàng)建一個(gè)toolbar組件，hml代碼如下所示：<divclass="container">

<toolbarstyle="position:fixed;bottom:0%;

width:100%;background-color:#F1F3F5;">

<toolbar-itemvalue="item1"></toolbar-item>

<toolbar-itemvalue="item2"></toolbar-item>

<toolbar-itemvalue="item3"></toolbar-item>

<toolbar-itemvalue="item4"></toolbar-item>

<toolbar-itemvalue="item5"></toolbar-item>

<toolbar-itemvalue="item6"></toolbar-item>

</toolbar>

</div>css代碼實(shí)現(xiàn)03css

樣式css代碼如下所示：.container{

width:100%;

height:100%;

flex-direction:column;

justify-content:center;

align-items:center;

background-color:#F1F3F5;

}

toolbar-item{

font-size:35px;

}預(yù)覽結(jié)果04預(yù)覽結(jié)果預(yù)覽器查看效果如下圖所示：工具欄（toolbar）組件專門用于容納toolbar-item

子組件，而且在一個(gè)頁面上最多只能顯示5個(gè)這樣的子組件。如果你添加了超過5個(gè)的`toolbar-item`，系統(tǒng)將僅顯示前4個(gè)，而第5個(gè)及之后的toolbar-item會(huì)被歸入一個(gè)名為"更多項(xiàng)"的特殊菜單中。用戶可以通過點(diǎn)擊這個(gè)"更多項(xiàng)"菜單來查看并訪問那些超出數(shù)量限制的`toolbar-item`。需要注意的是，被歸入"更多項(xiàng)"菜單的`toolbar-item`將使用系統(tǒng)默認(rèn)的樣式，而不會(huì)應(yīng)用任何自定義樣式設(shè)置。開發(fā)電商導(dǎo)航欄05hml代碼接下來我們使用工具欄組件開發(fā)一個(gè)實(shí)際電商項(xiàng)目中的導(dǎo)航欄，并且可以點(diǎn)擊每一個(gè)選項(xiàng)卡切換不同的toolbar-item，實(shí)現(xiàn)頁簽切換的效果。hml代碼如下所示：css

代碼css代碼如右圖：.container{

width:100%;

height:100%;

flex-direction:column;

justify-content:center;

align-items:center;

background-color:#F1F3F5;

}

toolbar-item{

font-size:35px;

}js代碼Js代碼如右圖：跳轉(zhuǎn)的實(shí)現(xiàn)原理上述代碼示例展示了如何使用toolbar和toolbar-item組件來構(gòu)建一個(gè)固定在頁面底部的工具欄，以及如何使用這個(gè)工具欄來切換不同的圖片。當(dāng)用戶點(diǎn)擊一個(gè)toolbar-item時(shí)，@click="switchToolbar({{$idx}})"會(huì)被觸發(fā)，這將調(diào)用switchToolbar函數(shù)并傳入當(dāng)前點(diǎn)擊的toolbar-item的索引。在switchToolbar函數(shù)中，active狀態(tài)會(huì)被更新為當(dāng)前點(diǎn)擊的toolbar-item的索引，根據(jù)active狀態(tài)的變化，相應(yīng)的圖片會(huì)在image組件中顯示。狀態(tài)改變的實(shí)現(xiàn)原理活動(dòng)的（被點(diǎn)擊的）toolbar-item會(huì)顯示為紅色字體和特殊的背景色，這是通過style="color:{{active==$idx?'red':'black'}};background-color:{{active==$idx?'#dbe7f1':'#F1F3F5'}};"來實(shí)現(xiàn)的。狀態(tài)改變的實(shí)現(xiàn)原理Tips：如需實(shí)現(xiàn)選項(xiàng)卡圖標(biāo)狀態(tài)的改變可以模仿背景色的改變語句，例如以上語句icon="{{active==$idx?item.icon_Active

:

item.icon

}}"預(yù)覽結(jié)果預(yù)覽器查看效果如下圖所示：HarmonyOSTHANKS《鴻蒙JS應(yīng)用開發(fā)》項(xiàng)目4類Web開發(fā)范式組件任務(wù)

掌握自定義組件的使用4.4本任務(wù)主要目的是幫助學(xué)生掌握在HarmonyOS應(yīng)用開發(fā)中自定義組件的基本使用方法，以及如何通過自定義事件在父子組件間傳遞數(shù)據(jù)。學(xué)生需要學(xué)習(xí)如何創(chuàng)建自定義組件，如何傳遞props屬性，以及如何通過自定義事件在組件之間進(jìn)行數(shù)據(jù)交互。任務(wù)陳述學(xué)習(xí)目標(biāo)學(xué)習(xí)如何在HarmonyOS應(yīng)用中創(chuàng)建和使用自定義組件。掌握如何通過props傳遞數(shù)據(jù)給自定義組件。學(xué)習(xí)如何在自定義組件內(nèi)部使用自定義事件來實(shí)現(xiàn)父子組件間的數(shù)據(jù)傳遞。基礎(chǔ)的HTML、CSS和JavaScript知識(shí)。理解HarmonyOS的基本架構(gòu)和組件系統(tǒng)。了解事件處理和數(shù)據(jù)綁定的基礎(chǔ)知識(shí)。知識(shí)準(zhǔn)備自定義組件是一種非常強(qiáng)大的開發(fā)工具，允許開發(fā)人員創(chuàng)建可重用的代碼塊，用戶可以根據(jù)業(yè)務(wù)需求，將已有的組件組合，封裝成的新組件，可以在工程中多次調(diào)用，增強(qiáng)代碼的可維護(hù)性和可讀性。在本任務(wù)中，我們將詳細(xì)介紹如何創(chuàng)建和使用自定義組件以及組件間的數(shù)據(jù)傳遞。任務(wù)實(shí)施自定義組件與數(shù)據(jù)傳遞01為了使內(nèi)容更具體和實(shí)用，我們將創(chuàng)建一個(gè)“天氣卡片”自定義組件。這個(gè)組件專門用于顯示天氣狀況、溫度和城市名。首先需要?jiǎng)?chuàng)建一個(gè)component目錄專門用于存儲(chǔ)組件代碼，相關(guān)目錄結(jié)構(gòu)如下圖所示：和pages目錄一樣，在組件目錄下存放三類文件，分別是：

weatherCard.hml,weatherCard.css，weatherCard.js。自定義組件與數(shù)據(jù)傳遞其中hml代碼如下：css代碼如下：自定義組件與數(shù)據(jù)傳遞Js代碼如下：自定義組件可以通過props聲明屬性，父組件通過設(shè)置屬性向子組件傳遞參數(shù)，props支持類型包括：String，Number，Boolean，Array，Object，F(xiàn)unction。子組件可以通過固定值default設(shè)置默認(rèn)值，當(dāng)父組件沒有設(shè)置該屬性時(shí)，將使用其默認(rèn)值。上述代碼中如果父組件沒有傳遞參數(shù)給子組件，那么默認(rèn)值就是北京，晴，22。自定義組件與數(shù)據(jù)傳遞通過element標(biāo)簽進(jìn)行自定義組件的導(dǎo)入。自定義組件的name屬性指自定義組件名稱(非必填)，組件名稱對(duì)大小寫不敏感，默認(rèn)使用小寫。src屬性指自定義組件hml文件路徑(必填)，若沒有設(shè)置name屬性，則默認(rèn)使用hml文件名作為組件名。camelCase(駝峰命名法)的組件名，在外部使用自定義組件時(shí)，需要使用短橫線分隔命名形式。例如組件名稱為weatherCard，那么在使用的時(shí)候使用weather-card。接著我們需要在index.hml文件中使用天氣卡片自定義組件，hml代碼如下所示：自定義組件與數(shù)據(jù)傳遞這里我們有兩個(gè)不同的方法使用自定義組件：自定義組件與數(shù)據(jù)傳遞直接使用自定義組件：這個(gè)例子直接使用了標(biāo)簽，沒有添加任何屬性。這意味著組件將使用在weatherCard.js中定義的默認(rèn)props值（分別為"北京"、"晴"和"22"）。通過props傳遞數(shù)據(jù)給自定義組件：在第二個(gè)<weather-card>標(biāo)簽中，通過props傳遞了city、condition和temperature這三個(gè)屬性的值（分別為"深圳"、"多云"和"28"）。這樣，組件就會(huì)使用這些傳入的值而不是默認(rèn)值。預(yù)覽圖如下：1.自定義組件可以通過props聲明屬性，父組件通過設(shè)置屬性向子組件傳遞參數(shù)。

props支持類型包括：String，Number，Boolean，Array，Object，F(xiàn)unction。2.命名使用：prop名采用camelCase(駝峰命名法)形式，在外部父組件傳遞參數(shù)時(shí)需要使用短橫線分隔命名)形式，比如自定義的屬性名稱為compProp，在父組件引用時(shí)需要轉(zhuǎn)換為comp-prop。3.添加默認(rèn)值:子組件可以通過固定值default設(shè)置默認(rèn)值，當(dāng)父組件沒有設(shè)置該屬性時(shí)，將使用其默認(rèn)值。4.自定義組件通過element引入到宿主頁面。代碼中的name屬性指自定義組件名稱(非必填)，組件名稱對(duì)大小寫不敏感，默認(rèn)使用小寫。src屬性指自定義組件hml文件路徑(必填)，若沒有設(shè)置name屬性，則默認(rèn)使用hml文件名作為組件名。5.數(shù)據(jù)單向性:父子組件之間數(shù)據(jù)的傳遞是單向的，只能從父組件傳遞給子組件，并且子組件不能直接修改父組件傳遞下來的值，但是可以將props傳入的值用data接收后作為默認(rèn)值，再對(duì)data的值進(jìn)行修改。自定義組件與數(shù)據(jù)傳遞本任務(wù)要點(diǎn)：自定義事件02自定義事件父子組件之間通過props

屬性進(jìn)行數(shù)據(jù)傳遞是單向的，只能從父組件傳遞給子組件，想要通過子組件傳遞數(shù)據(jù)給父組件，那么需要對(duì)父組件進(jìn)行自定義事件。通過自定義事件將父組件的方法傳遞給子組件，子組件中通過this.$emit(‘自定義事件’,{params:‘傳遞參數(shù)’})觸發(fā)事件并向父組件傳遞參數(shù)。這里分別演示無參數(shù)傳遞和有參數(shù)傳遞兩種情況。修改之前的天氣卡片案例，在index.hml文件中使用天氣卡片組件，并且添加自定義事件noParam，index.hml,index.js代碼如下所示：自定義事件1.無參數(shù)傳遞在自定義組件weatherCard.hml文件中添加一個(gè)按鈕用于觸發(fā)事件，代碼如下所示：自定義事件在weatherCard.js文件中自定義noParamEvent方法用于觸發(fā)自定義事件，代碼如下所示：自定義事件預(yù)覽圖如下：自定義事件點(diǎn)擊“點(diǎn)擊按鈕”，打開日志log出現(xiàn)以下界面:修改index.hml，代碼如下所示：index.js，代碼如下所示：自定義事件2.有參數(shù)傳遞在自定義組件weatherCard.hml文件中添加一個(gè)按鈕用于觸發(fā)有參數(shù)事件，代碼如下所示：自定義事件在weatherCard.js文件中自定義withParamEvent方法用于觸發(fā)自定義事件，代碼如下所示：自定義事件預(yù)覽圖如下：自定義事件點(diǎn)擊“點(diǎn)擊按鈕”，打開日志log出現(xiàn)以下界面:上述代碼展示了在一個(gè)HarmonyOS應(yīng)用中如何在自定義組件中自定義事件，并且通過自定義事件接收子組件向上傳遞的數(shù)據(jù)?？偨Y(jié)具體步驟如下：自定義事件父組件使用自定義組件的時(shí)候通過(on|@)event-name="bindParentVmMethod"語法來自定義事件。在父組件的js文件中定義bindParentVmMethod方法，并且編寫自己的業(yè)務(wù)邏輯。如果子組件有數(shù)據(jù)傳遞，那么通過e.detail.key獲取數(shù)據(jù)。在自定義組件的js文件中自定義方法，在自定義方法中通過this.$emit('eventName',{params:'傳遞參數(shù)'})觸發(fā)事件并向上傳遞參數(shù)。在自定義組件的hml文件中通過事件（例如onclick）調(diào)用剛才編寫好的自定義方法?？偨Y(jié)03父組件子組件總結(jié)父組件通過設(shè)置屬性向子組件傳遞參數(shù)，子組件可以通過固定值default設(shè)置默認(rèn)值，當(dāng)父組件沒有設(shè)置該屬性時(shí)，將使用其默認(rèn)值。props支持類型包括：String，Number，Boolean，Array，Object，F(xiàn)unction。camelCase(駝峰命名法)的組件名，在外部使用自定義組件時(shí)，需要使用短橫線分隔命名形式。子組件總結(jié)父組件子組件中使用駝峰命名法命名的事件，在父組件中綁定時(shí)需要使用短橫線分隔命名形式，例如：@children-event表示綁定子組件的childrenEvent事件在子組件中使用$emit第二個(gè)參數(shù)來傳遞數(shù)據(jù)。在父組件中，可以通過事件對(duì)象e.detail來接收傳遞的參數(shù)HarmonyOSTHANKS《鴻蒙JS應(yīng)用開發(fā)》項(xiàng)目5服務(wù)卡片5.1任務(wù)掌握服務(wù)卡片概念服務(wù)卡片可以看作是原子化服務(wù)的可視化界面表達(dá)，它將原子化服務(wù)的核心信息和操作直觀地展示在用戶視線內(nèi)，達(dá)到服務(wù)直達(dá)的效果，并簡化用戶的操作流程。服務(wù)卡片有多種應(yīng)用場景。目前，服務(wù)卡片支持嵌入到系統(tǒng)應(yīng)用。同時(shí)，服務(wù)卡片具有一定的交互功能，例如啟動(dòng)新的頁面、發(fā)送消息等。任務(wù)5.1.1服務(wù)卡片的概念服務(wù)卡片可以理解為主應(yīng)用的快捷方式，運(yùn)行機(jī)制如圖所示：任務(wù)5.1.2服務(wù)卡片運(yùn)行機(jī)制與原理呼應(yīng)服務(wù)卡片在HarmonyOS中具備靈活的尺寸設(shè)計(jì)，它提供了四種不同的卡片尺寸以適應(yīng)各種使用場景，如表所示：任務(wù)5.1.3服務(wù)卡片尺寸卡片尺寸對(duì)應(yīng)宮格數(shù)使用場景微卡片1*2宮格適合展示極簡單的信息，如日期、天氣等。小卡片2*2宮格此尺寸在不同設(shè)備上具有最佳的兼容性，因此，每個(gè)服務(wù)卡片在上架時(shí)必須至少包含一個(gè)這種尺寸的卡片。中卡片2*4宮格適用于需要展示更詳細(xì)信息的場景。大卡片4*4宮格適用于信息展示最為豐富的場景，比如新聞、圖文等。5.2任務(wù)使用服務(wù)卡片在HarmonyOS中，服務(wù)卡片在桌面上的顯示主要分為兩種狀態(tài)：臨時(shí)顯示和常駐顯示。任務(wù)5.2.1服務(wù)卡片顯示當(dāng)用戶對(duì)一個(gè)應(yīng)用的圖標(biāo)進(jìn)行上滑操作時(shí)，應(yīng)用的服務(wù)卡片就會(huì)在桌面上臨時(shí)展示。這種方式非常便捷輕量，可以直接向用戶呈現(xiàn)服務(wù)內(nèi)容，而不會(huì)影響用戶的現(xiàn)有桌面使用習(xí)慣。當(dāng)用戶點(diǎn)擊卡片以外的區(qū)域時(shí)，這個(gè)臨時(shí)展示的卡片就會(huì)被收起，返回到原來的桌面界面。對(duì)于用戶需要持續(xù)關(guān)注的服務(wù)內(nèi)容，臨時(shí)顯示的卡片提供了一個(gè)"Pin"圖標(biāo)。用戶可以通過點(diǎn)擊這個(gè)圖標(biāo)，將臨時(shí)態(tài)的卡片固定到桌面上，使其常駐顯示。此外，用戶也可以直接將服務(wù)卡片拖動(dòng)到桌面，讓它在桌面上持續(xù)展示。1.臨時(shí)顯示2.常駐顯示任務(wù)5.2.2服務(wù)卡片堆疊創(chuàng)建堆疊如果想要將兩個(gè)同尺寸的服務(wù)卡片堆疊起來，只需要長按其中一個(gè)卡片，然后拖拽它到另一個(gè)卡片上并短暫停留，這樣這兩個(gè)卡片就會(huì)自動(dòng)形成一個(gè)堆疊。切換卡片在卡片堆疊中，可以通過上下輕滑的操作來在不同的卡片之間進(jìn)行切換，這樣就可以輕松地查看堆疊中的各個(gè)服務(wù)卡片。查看堆疊如果想要查看堆疊中的所有卡片，可以在任何一個(gè)卡片上進(jìn)行向下的長滑操作，這樣就會(huì)展示出堆疊中的全部卡片。移除和拆分在卡片堆疊視圖中，還可以將某個(gè)卡片從堆疊中移除或者拆分出來，操作簡單易行。任務(wù)5.2.3服務(wù)卡片組合編輯組合：在組合窗口內(nèi)，可以自由地增加或刪除卡片和應(yīng)用快捷方式。通過這種方式，可以根據(jù)自己的需求和喜好，創(chuàng)建出一種屬于自己的卡片組合方式。創(chuàng)建組合：如果想要?jiǎng)?chuàng)建一個(gè)新的卡片組合，需要首先長按服務(wù)卡片或者應(yīng)用快捷方式，然后拖拽它們靠近其他卡片或快捷方式，等待數(shù)秒后，就會(huì)看到出現(xiàn)一個(gè)組合窗口。5.3任務(wù)創(chuàng)建服務(wù)卡片工程在開始開發(fā)服務(wù)卡片時(shí)，以下API接口將是強(qiáng)大工具?？梢越柚@些接口完成各種操作，例如創(chuàng)建新的服務(wù)卡片，更新現(xiàn)有的服務(wù)卡片，或者管理服務(wù)卡片的生命周期。任務(wù)5.3.1相關(guān)API介紹FormAbility類提供了一組生命周期接口，這些接口允許在卡片的生命周期內(nèi)執(zhí)行各種操作，例如在創(chuàng)建、更新或銷毀卡片時(shí)執(zhí)行特定的行為。formProvider類提供了一組用于管理服務(wù)卡片的接口。通過這些接口，可以設(shè)置卡片的下一次更新時(shí)間，或者更新卡片的數(shù)據(jù)。formBindingData類提供了一個(gè)接口，允許創(chuàng)建一個(gè)FormBindingData對(duì)象，這個(gè)對(duì)象用于存儲(chǔ)卡片的數(shù)據(jù)。任務(wù)5.3.1相關(guān)API介紹接口名描述onCreate(want:Want):formBindingData.FormBindingData卡片提供方接收創(chuàng)建卡片的通知接口。onCastToNormal(formId:string):void卡片提供方接收臨時(shí)卡片轉(zhuǎn)常態(tài)卡片的通知接口onUpdate(formId:string):void卡片提供方接收更新卡片的通知接口。onVisibilityChange(newStatus:{[key:string]:number}):void卡片提供方接收修改可見性的通知接口。onEvent(formId:string,message:string):void卡片提供方接收處理卡片事件的通知接口。onDestroy(formId:string):void卡片提供方接收銷毀卡片的通知接口。onAcquireFormState(want:Want):formInfo.FormState卡片提供方接收查詢卡片狀態(tài)的通知接口。onShare?(formId:string):{[key:string]:any}卡片提供方接收卡片分享的通知接口。1.FormAbility生命周期接口任務(wù)5.3.1相關(guān)API介紹接口名描述setFormNextRefreshTime(formId:string,minute:number,callback:AsyncCallback<void>):void;設(shè)置指定卡片的下一次更新時(shí)間。setFormNextRefreshTime(formId:string,minute:number):Promise<void>;設(shè)置指定卡片的下一次更新時(shí)間，以promise方式返回。updateForm(formId:string,formBindingData:FormBindingData,callback:AsyncCallback<void>):void;更新指定的卡片。updateForm(formId:string,formBindingData:FormBindingData):Promise<void>;更新指定的卡片，以promise方式返回。2.formProvider類任務(wù)5.3.1相關(guān)API介紹接口名描述createFormBindingData(obj:Object|string):FormBindingData創(chuàng)建一個(gè)FormBindingData對(duì)象。3.formBindingData類單擊NewProject>Application創(chuàng)建一個(gè)新的工程，對(duì)工程進(jìn)行相應(yīng)的配置，如圖所示：任務(wù)5.3.2為應(yīng)用創(chuàng)建卡片選擇模塊（如entry模塊）下的任意文件，單擊菜單欄File（或單擊右鍵）>New>ServiceWidget創(chuàng)建服務(wù)卡片。在ChooseaTemplateforYourServiceWidget界面中，選擇卡片模板，單擊Next。任務(wù)5.3.2為應(yīng)用創(chuàng)建卡片API9提供如下三種類型的卡片模板：任務(wù)5.3.2為應(yīng)用創(chuàng)建卡片模板名稱支持的設(shè)備支持的開發(fā)語言模板描述HelloWorldPhone、TabletArkTS、JS支持低代碼開發(fā)的HelloWorld卡片。ImageWithInformation（圖文卡片模板）Phone、TabletArkTS、JS圖文卡片模板主要在于展現(xiàn)圖片和一定數(shù)量文本的搭配，在這種布局下，圖片和文本屬于同等重要的信息。在不同尺寸下，圖片大小和文本數(shù)量會(huì)發(fā)生一定變化，用于凸顯關(guān)鍵信息。ImmersiveInformation（沉浸圖文卡片模板）Phone、TabletArkTS、JS沉浸式卡片的裝飾性較強(qiáng)，能夠較好的提升卡片品質(zhì)感并起到裝飾桌面的作用，合理的去布局信息與背景圖片之間的空間比例，可以提升用戶的個(gè)性化使用體驗(yàn)。對(duì)服務(wù)卡片進(jìn)行相應(yīng)的配置，單擊Finish完成卡片的創(chuàng)建。如圖所示：任務(wù)5.3.2為應(yīng)用創(chuàng)建卡片在ConfigureYourServiceWidget界面中，配置卡片的基本信息，包括：Servicewidgetname：卡片的名稱，在同一個(gè)應(yīng)用/服務(wù)中，卡片名稱不能重復(fù)，且只能包含大小寫字母、數(shù)字和下劃線。Description：卡片的描述信息。EnableSuperVisual：是否選擇低代碼方式開發(fā)。Language：界面開發(fā)語言，可選擇創(chuàng)建ArkTS/JS卡片。Supportdimension：選擇卡片的規(guī)格。部分卡片支持同時(shí)設(shè)置多種規(guī)格。Abilityname：選擇一個(gè)掛靠服務(wù)卡片的FormAbility，或者創(chuàng)建一個(gè)新的FormAbility。Modulename：卡片所屬的模塊。創(chuàng)建完成后，工具會(huì)自動(dòng)創(chuàng)建出服務(wù)卡片的布局文件，如圖所示：任務(wù)5.3.2為應(yīng)用創(chuàng)建卡片任務(wù)5.3.2為應(yīng)用創(chuàng)建卡片創(chuàng)建完成后，工具會(huì)自動(dòng)創(chuàng)建出服務(wù)卡片的布局文件，并在config.json配置文件中寫入服務(wù)卡片的屬性字段，配置文件代碼如下所示：{"app":{//...省略}},"deviceConfig":{},"module":{//...省略"abilities":[{"skills":[{"entities":["entity.system.home"],"actions":["action.system.home"]}],"orientation":"unspecified","formsEnabled":false,"name":".MainAbility","srcLanguage":"js","srcPath":"MainAbility","icon":"$media:icon","description":"$string:MainAbility_desc","label":"$string:MainAbility_label","type":"page","visible":true,"launchType":"standard"},{"name":".FormAbility","srcPath":"FormAbility","description":"$string:FormAbility_desc","icon":"$media:icon","label":"$string:FormAbility_label","type":"service","formsEnabled":true,"srcLanguage":"js","forms":[{"jsComponentName":"widget","isDefault":true,"scheduledUpdateTime":"10:30","defaultDimension":"2*2","name":"widget","description":"Thisisaservicewidget.","colorMode":"auto","type":"JS","formVisibleNotify":true,"supportDimensions":["2*2"],"updateEnabled":true,"updateDuration":1}]}],"js":[{"pages":["pages/index/index"],"name":".MainAbility","window":{"designWidth":720,"autoDesignWidth":false}},{"name":"widget","pages":["pages/index/index"],"window":{"designWidth":720,"autoDesignWidth":true},"type":"form"}]}}單擊NewProject>AtomicService創(chuàng)建一個(gè)新的原子化服務(wù)時(shí)，會(huì)同步創(chuàng)建一個(gè)2*2的服務(wù)卡片模板，并創(chuàng)建入口卡片、配置工程。任務(wù)5.3.3為原子化服務(wù)創(chuàng)建卡片原子化應(yīng)用創(chuàng)建完成后，會(huì)在工程目錄下生成

EntryCard

目錄。任務(wù)5.3.3為原子化服務(wù)創(chuàng)建卡片在該目錄下，每個(gè)擁有EntryCard的模塊，都會(huì)生成一個(gè)和模塊名相同的文件夾，同時(shí)還會(huì)默認(rèn)生成一張2x2的快照型EntryCard圖片（png格式）。開發(fā)者可以將其替換為提前設(shè)計(jì)好的2x2快照?qǐng)D：將新的快照?qǐng)D拷貝到上圖目錄下，刪除默認(rèn)圖片，新圖片命名遵循格式“卡片名稱-2x2.png”。在已有的AtomicService工程中添加新模塊時(shí)，會(huì)自動(dòng)創(chuàng)建新服務(wù)卡片和EntryCard。HarmonyOSTHANKS《鴻蒙JS應(yīng)用開發(fā)》項(xiàng)目5服務(wù)卡片5.4任務(wù)預(yù)覽服務(wù)卡片在開發(fā)服務(wù)卡片過程中，支持對(duì)卡片進(jìn)行實(shí)時(shí)預(yù)覽。服務(wù)卡片通過HML+CSS+JSON進(jìn)行布局設(shè)計(jì)，在開發(fā)過程中，可以對(duì)布局HML+CSS+JSON文件進(jìn)行實(shí)時(shí)預(yù)覽，只要在HML+CSS+JSON布局文件中保存了修改的源代碼，在預(yù)覽器中就可以實(shí)時(shí)查看布局效果。在

Phone和Tablet服務(wù)卡片的預(yù)覽效果中，每個(gè)尺寸的服務(wù)卡片提供3種場景的預(yù)覽效果，分別為極窄（Minimum）、默認(rèn)（Default）、極寬(Maximum)，開發(fā)者應(yīng)確保三種尺寸的顯示效果均正常，以便適應(yīng)不同屏幕尺寸的設(shè)備。任務(wù)5.4預(yù)覽服務(wù)卡片5.5任務(wù)開發(fā)服務(wù)卡片代碼任務(wù)5.5服務(wù)卡片代碼開發(fā)步驟1卡片數(shù)據(jù)交互卡片數(shù)據(jù)交互主要通過updateForm()函數(shù)實(shí)現(xiàn)。開發(fā)者可以通過此函數(shù)更新卡片顯示的信息，如天氣應(yīng)用的卡片可以定時(shí)通過這個(gè)函數(shù)更新天氣信息。開發(fā)卡片頁面卡片頁面的開發(fā)主要使用HML+CSS+JSON技術(shù)。開發(fā)者可以設(shè)計(jì)自己的卡片布局，定制卡片的樣式，然后使用JSON描述卡片的數(shù)據(jù)。開發(fā)卡片事件這一步驟主要是為卡片添加事件處理，包括router事件和message事件。router事件主要用于處理卡片內(nèi)部的導(dǎo)航，例如跳轉(zhuǎn)到其他頁面；message事件主要用于處理卡片與宿主應(yīng)用之間的消息交互。實(shí)現(xiàn)卡片生命周期接口這一步驟涉及到開發(fā)FormAbility生命周期回調(diào)函數(shù)。FormAbility類提供了一套與服務(wù)卡片生命周期相關(guān)的接口，如創(chuàng)建、更新和銷毀卡片等。開發(fā)者需要在這些回調(diào)函數(shù)中定義卡片在不同生命周期階段的行為。配置卡片配置文件這一步驟涉及配置應(yīng)用配置文件config.json。配置文件主要用于定義卡片的屬性，如卡片類型（臨時(shí)卡片、常態(tài)卡片）、刷新策略等?？ㄆ畔⒌某志没谶@一步驟中，開發(fā)者需要對(duì)卡片信息進(jìn)行持久化管理，包括存儲(chǔ)卡片的當(dāng)前狀態(tài)、卡片數(shù)據(jù)等。當(dāng)卡片被銷毀后，這些信息可以用于在重新創(chuàng)建卡片時(shí)恢復(fù)卡片的狀態(tài)。23654基于FA模型的卡片提供方開發(fā)的詳細(xì)步驟任務(wù)5.5.1實(shí)現(xiàn)卡片生命周期接口創(chuàng)建FA模型的卡片，需實(shí)現(xiàn)卡片的生命周期接口。在form.js中，導(dǎo)入相關(guān)模塊。importformBindingDatafrom'@ohos.app.form.formBindingData';

importformInfofrom'@ohos.app.form.formInfo';

importformProviderfrom'@ohos.app.form.formProvider';

importdataStoragefrom'@ohos.data.storage';任務(wù)5.5.1實(shí)現(xiàn)卡片生命周期接口在form.js中，實(shí)現(xiàn)卡片生命周期接口。//引入相應(yīng)的模塊

importformBindingDatafrom'@ohos.app.form.formBindingData';//導(dǎo)入formBindingData模塊，用于創(chuàng)建綁定數(shù)據(jù)

importformInfofrom'@ohos.app.form.formInfo';//導(dǎo)入formInfo模塊，用于獲取表單信息

importformProviderfrom'@ohos.app.form.formProvider';//導(dǎo)入formProvider模塊，用于提供表單數(shù)據(jù)

importdataStoragefrom'@ohos.data.storage';//導(dǎo)入dataStorage模塊，用于數(shù)據(jù)存儲(chǔ)

exportdefault{

onCreate(want){//當(dāng)使用方創(chuàng)建卡片時(shí)，會(huì)觸發(fā)該函數(shù)

('FormAbilityonCreate');//輸出創(chuàng)建信息

//提供方需要返回卡片數(shù)據(jù)綁定類

letobj={//定義一個(gè)包含標(biāo)題和詳情的對(duì)象

"title":"titleOnCreate",

"detail":"detailOnCreate"

};

letformData=formBindingData.createFormBindingData(obj);//創(chuàng)建表單綁定數(shù)據(jù)

returnformData;//返回創(chuàng)建的表單數(shù)據(jù)

},

onCastToNormal(formId){//當(dāng)使用方將臨時(shí)卡片轉(zhuǎn)換為常態(tài)卡片時(shí)，會(huì)觸發(fā)該函數(shù)

('FormAbilityonCastToNormal');//輸出信息

},任務(wù)5.5.1實(shí)現(xiàn)卡片生命周期接口注意：FormAbility不能常駐后臺(tái)，即在卡片生命周期回調(diào)函數(shù)中無法處理長時(shí)間的任務(wù)。

letobj={//定義一個(gè)包含標(biāo)題和詳情的對(duì)象

"title":"titleOnUpdate",

"detail":"detailOnUpdate"

};

letformData=formBindingData.createFormBindingData(obj);//創(chuàng)建表單綁定數(shù)據(jù)

formProvider.updateForm(formId,formData).catch((error)=>{//使用formProvider更新表單數(shù)據(jù)

('FormAbilityupdateForm,error:'+JSON.stringify(error));//若出現(xiàn)錯(cuò)誤，輸出錯(cuò)誤信息

});

},

onVisibilityChange(newStatus){//當(dāng)使用方發(fā)起可見或者不可見通知時(shí)，會(huì)觸發(fā)該函數(shù)

('FormAbilityonVisibilityChange');//輸出可見性更改信息

},

onEvent(formId,message){//若卡片支持觸發(fā)事件，則需要重寫該方法并實(shí)現(xiàn)對(duì)事件的觸發(fā)

('FormAbilityonEvent');//輸出事件信息

},

onDestroy(formId){//當(dāng)卡片被銷毀時(shí)，會(huì)觸發(fā)該函數(shù)

('FormAbilityonDestroy');//輸出銷毀信息

},

onAcquireFormState(want){//獲取表單狀態(tài)

('FormAbilityonAcquireFormState');//輸出獲取狀態(tài)信息

returnformInfo.FormState.READY;//返回表單狀態(tài)為READY

},

}任務(wù)5.5.2配置卡片配置文件屬性名稱含義數(shù)據(jù)類型是否可缺name表示JSComponent的名字。該標(biāo)簽不可缺省，默認(rèn)值為default。字符串否pages表示JSComponent的頁面用于列舉JSComponent中每個(gè)頁面的路由信息[頁面路徑+頁面名稱]。該標(biāo)簽不可缺省，取值為數(shù)組，數(shù)組第一個(gè)元素代表JSFA首頁。數(shù)組否window用于定義與顯示窗口相關(guān)的配置。對(duì)象可缺省type表示JS應(yīng)用的類型。取值范圍如下：normal：標(biāo)識(shí)該JSComponent為應(yīng)用實(shí)例。form：標(biāo)識(shí)該JSComponent為卡片實(shí)例。字符串可缺省，缺省值為“normal”mode定義JS組件的開發(fā)模式。對(duì)象可缺省，缺省值為空js模塊，用于對(duì)應(yīng)卡片的js相關(guān)資源，內(nèi)部字段結(jié)構(gòu)說明如表：卡片需要在應(yīng)用配置文件config.json中進(jìn)行配置。任務(wù)5.5.2配置卡片配置文件配置示例："js":[{

"name":"widget",

"pages":["pages/index/index"],

"window":{

"designWidth":720,

"autoDesignWidth":true

},

"type":"form"

}]任務(wù)5.5.2配置卡片配置文件屬性名稱含義數(shù)據(jù)類型是否可缺name表示卡片的類名。字符串最大長度為127字節(jié)。字符串否description表示卡片的描述。取值可以是描述性內(nèi)容，也可以是對(duì)描述性內(nèi)容的資源索引，以支持多語言。字符串最大長度為255字節(jié)。字符串可缺省，缺省為空。isDefault表示該卡片是否為默認(rèn)卡片，每個(gè)Ability有且只有一個(gè)默認(rèn)卡片。true：默認(rèn)卡片。false：非默認(rèn)卡片。布爾值否type表示卡片的類型。取值范圍如下：JS：JS卡片。字符串否colorMode表示卡片的主題樣式，取值范圍如下：auto：自適應(yīng)。dark：深色主題。light：淺色主題。字符串可缺省，缺省值為“auto”。supportDimensions表示卡片支持的外觀規(guī)格，取值范圍：1*2：表示1行2列的二宮格。2*2：表示2行2列的四宮格。2*4：表示2行4列的八宮格。4*4：表示4行4列的十六宮格。字符串?dāng)?shù)組否defaultDimension表示卡片的默認(rèn)外觀規(guī)格，取值必須在該卡片supportDimensions配置的列表中。字符串否updateEnabled表示卡片是否支持周期性刷新，取值范圍：true：表示支持周期性刷新，可以在定時(shí)刷新（updateDuration）和定點(diǎn)刷新（scheduledUpdateTime）兩種方式任選其一，優(yōu)先選擇定時(shí)刷新。false：表示不支持周期性刷新。布爾類型否abilities模塊，用于對(duì)應(yīng)卡片的FormAbility，內(nèi)部字段結(jié)構(gòu)說明如表：任務(wù)5.5.2配置卡片配置文件屬性名稱含義數(shù)據(jù)類型是否可缺scheduledUpdateTime表示卡片的定點(diǎn)刷新的時(shí)刻，采用24小時(shí)制，精確到分鐘。updateDuration參數(shù)優(yōu)先級(jí)高于scheduledUpdateTime，兩者同時(shí)配置時(shí)，以u(píng)pdateDuration配置的刷新時(shí)間為準(zhǔn)。字符串可缺省，缺省值為“0:0”。updateDuration表示卡片定時(shí)刷新的更新周期，單位為30分鐘，取值為自然數(shù)。當(dāng)取值為0時(shí)，表示該參數(shù)不生效。當(dāng)取值為正整數(shù)N時(shí)，表示刷新周期為30*N分鐘。updateDuration參數(shù)優(yōu)先級(jí)高于scheduledUpdateTime，兩者同時(shí)配置時(shí)，以u(píng)pdateDuration配置的刷新時(shí)間為準(zhǔn)。數(shù)值可缺省，缺省值為“0”。formConfigAbility表示卡片的配置跳轉(zhuǎn)鏈接，采用URI格式。字符串可缺省，缺省值為空。formVisibleNotify標(biāo)識(shí)是否允許卡片使用卡片可見性通知。字符串可缺省，缺省值為空。jsComponentName表示JS卡片的Component名稱。字符串最大長度為127字節(jié)。字符串否metaData表示卡片的自定義信息，包含customizeData數(shù)組標(biāo)簽。對(duì)象可缺省，缺省值為空。customizeData表示自定義的卡片信息。對(duì)象數(shù)組可缺省，缺省值為空。abilities模塊，用于對(duì)應(yīng)卡片的FormAbility，內(nèi)部字段結(jié)構(gòu)說明如表：任務(wù)5.5.2配置卡片配置文件配置示例："colorMode":"auto",

"defaultDimension":"2*2",

"description":"Thisisaservicewidget.",

"formVisibleNotify":true,

"isDefault":true,

"jsComponentName":"widget",

"name":"widget",

"scheduledUpdateTime":"10:30",

"supportDimensions":["2*2"],

"type":"JS",

"updateEnabled":true

}]

}]"abilities":[{

"name":"FormAbility",

"description":"ThisisaFormAbility",

"formsEnabled":true,

"icon":"$media:icon",

"label":"$string:form_FormAbility_label",

"srcPath":"FormAbility",

"type":"service",

"srcLanguage":"ets",

"formsEnabled":true,

"formConfigAbility":"ability://com.example.entry.MainAbility","forms":[{任務(wù)5.5.3卡片數(shù)據(jù)交互當(dāng)卡片應(yīng)用需要更新數(shù)據(jù)時(shí)（如觸發(fā)了定時(shí)更新或定點(diǎn)更新），卡片應(yīng)用獲取最新數(shù)據(jù)，并調(diào)用updateForm()接口更新主動(dòng)觸發(fā)卡片的更新。onUpdate(formId){

//若卡片支持定時(shí)更新/定點(diǎn)更新/卡片使用方主動(dòng)請(qǐng)求更新功能，則提供方需要重寫該方法以支持?jǐn)?shù)據(jù)更新

('FormAbilityonUpdate');

letobj={

"title":"titleOnUpdate",

"detail":"detailOnUpdate"

};

letformData=formBindingData.createFormBindingData(obj);

//調(diào)用updateForm接口去更新對(duì)應(yīng)的卡片，僅更新入?yún)⒅袛y帶的數(shù)據(jù)信息，其他信息保持不變

formProvider.updateForm(formId,formData).catch((error)=>{

('FormAbilityupdateForm,error:'+JSON.stringify(error));

});

}任務(wù)5.5.4開發(fā)卡片UI頁面開發(fā)者可以使用類Web范式（HML+CSS+JSON）開發(fā)JS卡片頁面。生成如圖5-18卡片頁面，可以這樣配置卡片頁面文件：注意：當(dāng)前僅支持JS擴(kuò)展的類Web開發(fā)范式來實(shí)現(xiàn)卡片的UI界面。HMLCSSJSON任務(wù)5.5.4開發(fā)卡片UI頁面HML：使用類Web范式的組件描述卡片的頁面信息。<divclass="container">

<stack>

<divclass="container-img">

<imagesrc="/common/widget.png"class="bg-img"></image>

</div>

<divclass="container-inner">

<textclass="title">{{title}}</text>

<textclass="detail_text"onclick="routerEvent">{{detail}}</text>

</div>

</stack>

</div>任務(wù)5.5.4開發(fā)