《HarmonyOS應(yīng)用開發(fā)基礎(chǔ)》 課件全套 實操 項目1-3 走進HarmonyOS應(yīng)用開發(fā)- 走進Stage模型下的業(yè)務(wù)能力開發(fā)

項目1走進HarmonyOS應(yīng)用開發(fā)任務(wù)1搭建HarmonyOS應(yīng)用開發(fā)環(huán)境項目1走進HarmonyOS應(yīng)用開發(fā)任務(wù)描述本任務(wù)完成DevEcoStudio開發(fā)工具的下載、安裝，并創(chuàng)建第一個HarmonyOSArkTS工程,預(yù)覽應(yīng)用并在模擬器上運行應(yīng)用。任務(wù)實施010203060504下載并安裝DevEcoStudio設(shè)置npm和Node.js下載HarmonyOSSDK在模擬器上運行HarmonyOS應(yīng)用實時預(yù)覽HarmonyOS應(yīng)用創(chuàng)建HarmonyOS工程下載并安裝DevEcoStudioDevEcoStudio可以在HarmonyOSDeveloper官網(wǎng)（）下載，根據(jù)自己的計算機系統(tǒng)類型，下載對應(yīng)版本的DevEcoStudio。DevEcoStudio支持Windows和macOS系統(tǒng)。本書的任務(wù)使用的是Window環(huán)境開發(fā)鴻蒙應(yīng)用，這里以Windows為例進行安裝。為保證DevEcoStudio正常運行，建議電腦配置滿足如下要求：操作系統(tǒng)：Windows1064位內(nèi)存：8GB及以上硬盤：100GB及以上分辨率：1280*800像素及以上下載并安裝DevEcoStudio選擇Windows操作系統(tǒng)選擇對應(yīng)的版本進行下載。下載完成后，先解壓安裝包，雙擊解壓好的“deveco-studio-xxxx.exe”，進入DevEcoStudio安裝向?qū)?。在如下界面選擇安裝路徑，默認安裝于C:\ProgramFiles路徑下，也可以單擊Browse...指定其他安裝路徑，然后單擊Next，如下圖所示。下載并安裝DevEcoStudio勾選安裝選項，安裝完成后立即重啟計算機，如下圖所示。設(shè)置npm和Node.js重啟計算機后，打開DevEcoStudio，在出現(xiàn)的歡迎界面中單擊“Agree”后，選擇不導(dǎo)入之前的配置，如下圖所示。歡迎頁面導(dǎo)入設(shè)置設(shè)置npm和Node.jsHarmonyOS基于ArkTS的開發(fā)，需要JavaScript運行環(huán)境，Node.js是一個JavaScript運行環(huán)境，在DevEcoStudio安裝過程中需要安裝Node.js和npm包管理器，按提示進行Node.js和npm的鏡像設(shè)置和的下載，如下圖所示。歡迎頁面導(dǎo)入設(shè)置下載HarmonyOSSDK經(jīng)過上述步驟后，DevEcoStudio會自動檢查本地路徑下是否存在HarmonyOSSDK。如果不存在，會彈出SDK的安裝向?qū)?，選擇SDK的存放路徑（可自定義），確認SDK的設(shè)置，如下圖所示。歡迎頁面導(dǎo)入設(shè)置下載HarmonyOSSDK在彈出來的接受許可協(xié)議頁面，選擇“Accept”，接受協(xié)議后，等待SDK下載完畢，如下圖所示。歡迎頁面導(dǎo)入設(shè)置下載HarmonyOSSDKSDK下載完畢后，就會進入EevEcoStudio歡迎頁面，默認歡迎頁面是黑底白字的，需要的時候可以設(shè)置為白底黑字，如下圖所示。至此，就安裝并配置好了EevEcoStudio開發(fā)工具。創(chuàng)建HarmonyOS工程首次打開DevEcoStudio，可以從歡迎頁單擊CreateProject，創(chuàng)建一個新工程。（在DevEcoStudio打開工程的情況下，可以單擊File>new>CreateProject），根據(jù)工程創(chuàng)建向?qū)?，單擊CreateProject，進入項目創(chuàng)建頁面。DevEcoStudio為我們提供了HarmonyOS和OpenHarmony的創(chuàng)建模板，我們這里選擇創(chuàng)建HarmonyOS。在HarmonyOS頁簽，選擇“EmptyAbility”模板，然后單擊Next，如下圖所示。創(chuàng)建HarmonyOS工程填寫工程相關(guān)信息，如下圖所示。（默認情況下，新建工程的CompileSDK為9，在設(shè)備中運行該工程時，請選擇API9及以上的設(shè)備才能運行該工程。）創(chuàng)建HarmonyOS工程填寫完項目創(chuàng)建信息，點擊“Finish”后,工具會自動生成模板代碼和相關(guān)資源，接下來需要等待項目創(chuàng)建完成，當?shù)撞坑覅^(qū)域狀態(tài)欄不再變化，就說明項目構(gòu)建完成了。實時預(yù)覽HarmonyOS應(yīng)用此時項目默認打開Index.ets頁面，可以點擊右側(cè)的Previewer預(yù)覽器按鈕，查看應(yīng)用的運行效果，如下圖所示。實時預(yù)覽HarmonyOS應(yīng)用DevEcoStuidio可以在頁面開發(fā)過程中同步更新預(yù)覽效果，通過預(yù)覽器可以實時查看、編輯組件的屬性，方便開發(fā)者隨時調(diào)整代碼，并實時查看應(yīng)用/服務(wù)的運行效果。打開上述構(gòu)建完畢的項目下的pages/Index.ets頁面，單擊預(yù)覽器，即可呈現(xiàn)實時界面的預(yù)覽效果；在預(yù)覽器選項卡，點擊多設(shè)備預(yù)覽按鈕，針對性的查看在某類型設(shè)備上的布局效果，如下圖所示。在模擬器上運行HarmonyOS應(yīng)用注冊華為賬號后，在DevEcoStudio中選擇“Tools>DeviceManager”菜單項，如果用戶還未登錄，需要按提示進行授權(quán)登錄華為帳號，如下圖所示。在模擬器上運行HarmonyOS應(yīng)用成功授權(quán)后，回到DevEcoStudio中，此時RemoteEmulator（遠程模擬器）選項卡下面就列出了不同設(shè)備類型的遠程模擬器，選擇API版本為9的P50遠程模擬器，單擊右側(cè)action下的三角符號即可啟動遠程模擬器，如所示。HarmonyOS模擬器啟動好后，在設(shè)備選擇列表中選擇應(yīng)用運行的目標設(shè)備，然后單擊運行按鈕，等待自動打包和上傳完畢，App應(yīng)用就運行到模擬器中，如下圖所示。任務(wù)小結(jié)本任務(wù)帶領(lǐng)讀者了解了OpenHarmony和HarmonyOS的區(qū)別和聯(lián)系，進行了HarmonyOS應(yīng)用開發(fā)的環(huán)境搭建、在預(yù)覽器中使用不同設(shè)備不同模式預(yù)覽了應(yīng)用、將應(yīng)用運行在遠程模擬器上。至此，讀者們已經(jīng)踏進了HarmonyOS應(yīng)用開發(fā)的大門。任務(wù)2使用TypeScript基礎(chǔ)語法項目1走進HarmonyOS應(yīng)用開發(fā)任務(wù)2使用TypeScript基礎(chǔ)語法本任務(wù)主要學習TypeScript開發(fā)語言的基礎(chǔ)用法，在DevEcoStudio環(huán)境中編寫、編譯和運行TypeScript程序，以支撐HarmonyOS基于ArkTS語言的開發(fā)需求。任務(wù)描述任務(wù)實施0102檢測TypeScript程序的編譯與運行練習使用TypeScript的常用基礎(chǔ)數(shù)據(jù)類型創(chuàng)建TS源文件編寫TS代碼編譯與運行TS文件檢測TypeScript程序的編譯與運行創(chuàng)建TS源文件編寫TS代碼編譯與運行TS文件檢測TypeScript程序的編譯與運行創(chuàng)建TS源文件編寫TS代碼編譯與運行TS文件檢測TypeScript程序的編譯與運行練習使用TypeScript的常用基礎(chǔ)數(shù)據(jù)類型使用any類型使用number類型使用string類型使用boolean類型使用數(shù)組使用元組使用聯(lián)合類型任務(wù)2使用TypeScript基礎(chǔ)語法本任務(wù)在了解了TypeScript與JavaScript間的關(guān)系后，重點講解了TypeScript的變量聲明、基礎(chǔ)數(shù)據(jù)類型的使用，并編譯和運行了TypeScript的代碼，通過IDE提供的編譯時類型檢查及相關(guān)出錯提示，提高了TypeScript代碼的編寫效率。作為開發(fā)者應(yīng)通過多學多練，靈活應(yīng)用，熟練掌握TypeScript的基礎(chǔ)語法。任務(wù)小結(jié)任務(wù)3使用TypeScript進階語法項目1走進HarmonyOS應(yīng)用開發(fā)任務(wù)3使用TypeScript進階語法本任務(wù)練習TypeScript的函數(shù)和面向?qū)ο蟮念?、接口的使用。任?wù)描述任務(wù)實施0102定義與調(diào)用函數(shù)類的使用03接口的使用練習下面不同情況函數(shù)的定義與調(diào)用：有返回值和無返回值無參數(shù)和有參數(shù)匿名函數(shù)和箭頭函數(shù)函數(shù)的聲明01定義與調(diào)用函數(shù)02類的使用練習類的使用：類的定義對象的創(chuàng)建類的繼承方法的重寫多態(tài)03接口的使用練習接口的使用：聲明接口實現(xiàn)接口接口的多態(tài)任務(wù)3使用TypeScript進階語法本任務(wù)講解了各種形式的函數(shù)的定義與使用、類和對象、接口的使用，TypeScript在面向?qū)ο蟮奶匦陨希cJava面向?qū)ο笳Z言的使用基本一致，讀者需關(guān)注函數(shù)、類、接口的不同用法，多讀多寫多練，做到熟能生巧。任務(wù)小結(jié)任務(wù)1認識ArkTS工程項目2走進ArkTS聲明式開發(fā)任務(wù)1

認識ArkTS工程本任務(wù)在認識了ArkTS工程的目錄結(jié)構(gòu)后，完成HarmonyOS應(yīng)用的資源訪問，設(shè)置指定的頁面成為應(yīng)用運行的首頁。任務(wù)描述任務(wù)實施0102使用字符串資源使用顏色資源03調(diào)整應(yīng)用運行的首頁直接使用字符串將字符串配置到字符串資源文件string.json中使用字符串資源01使用字符串資源直接使用顏色值使用color.json中的顏色資源02使用顏色資源03調(diào)整應(yīng)用運行的首頁查看應(yīng)用的配置文件在pages目錄下創(chuàng)建新的頁面在EntryAbility入口文件中指定應(yīng)用加載的首頁任務(wù)1認識ArkTS工程本任務(wù)主要學習了ArkTS的項目結(jié)構(gòu)、配置文件、資源管理等，并使用資源管理進行了應(yīng)用的文字和顏色適配、實現(xiàn)了應(yīng)用運行首頁的修改。任務(wù)小結(jié)任務(wù)2認識ArkTS聲明式開發(fā)項目2走進ArkTS聲明式開發(fā)任務(wù)2

認識ArkTS聲明式開發(fā)本任務(wù)完成使用ArkTS語法調(diào)用和配置組件屬性，并使用@State狀態(tài)變量感受ArkTS的狀態(tài)管理等相應(yīng)的能力。任務(wù)描述任務(wù)效果圖預(yù)覽練習ArkTS的一些公共屬性與體驗狀態(tài)變量@State的效果。任務(wù)實施0102030504用聲明式語法編寫頁面跟蹤組件的聲明文件使用@State狀態(tài)變量設(shè)置組件的常用公共屬性查閱組件的公共屬性源碼聲明式的頁面結(jié)構(gòu)語法糖鏈式調(diào)用01用聲明式語法編寫頁面鼠標停留在組件位置，

使用“CTRL+左鍵”跟蹤源碼在源碼中查看組件的用途、參數(shù)和屬性02跟蹤組件的聲明文件ArkTS的基礎(chǔ)組件直接或者間接的都繼承自CommonMethod類，CommonMethod中定義的屬性樣式屬于公共樣式。03查閱組件的公共屬性源碼declareclassCommonMethod<T>{//T是指CommonMethod的所有子類

width(value:Length):T;//寬

height(value:Length):T;//高

size(value:SizeOptions):T;//大小

layoutWeight(value:number|string):T;//權(quán)重

padding(value:Padding|Length):T;//內(nèi)邊距

margin(value:Margin|Length):T;//外邊距

backgroundColor(value:ResourceColor):T;//背景顏色

border(value:BorderOptions):T;//邊框

onClick(event:(event?:ClickEvent)=>void):T;//點擊事件//其他公共屬性略}04設(shè)置組件的常用公共屬性設(shè)置組件的寬高與背景等設(shè)置組件的內(nèi)邊距與外邊距05使用@State狀態(tài)變量使用@State修飾變量在組件的點擊事件中修改狀態(tài)變量的值任務(wù)2認識ArkTS聲明式開發(fā)本任務(wù)了解和認識了ArkUI框架、ArkTS聲明式開發(fā)范式的UI描述方式，通過查找組件源碼的方式，學習了組件的參數(shù)配置和屬性設(shè)置，并用裝飾器@State初步體驗數(shù)據(jù)驅(qū)動UI更新的響應(yīng)式編程的奇妙之處。任務(wù)小結(jié)任務(wù)3開發(fā)設(shè)備控制頁項目2走進ArkTS聲明式開發(fā)任務(wù)3

開發(fā)設(shè)備控制頁本任務(wù)使用線性布局、文字顯示組件和圖片組件，并配合組件的屬性和樣式，完成物聯(lián)網(wǎng)App常見的設(shè)備控制頁面的開發(fā)。任務(wù)描述任務(wù)效果圖預(yù)覽任務(wù)實施0102030504整理工程資源設(shè)備控制頁的UI結(jié)構(gòu)分析最外層的Column布局設(shè)計設(shè)備位置區(qū)的Row布局設(shè)計設(shè)備控制區(qū)外框的Column布局設(shè)計06設(shè)備狀態(tài)信息區(qū)的設(shè)計與開發(fā)07設(shè)備控制區(qū)的設(shè)計與開發(fā)08使用Blank和Divider組件01整理工程資源

02設(shè)備控制頁的UI結(jié)構(gòu)分析03最外層的Column布局設(shè)計最外層用Column，寬高占滿屏幕，設(shè)置背景為灰色。04設(shè)備控制區(qū)外框的Column布局設(shè)計

內(nèi)層用于顯示設(shè)備相關(guān)信息的區(qū)域，是一個Column，限定了寬高和邊框。邊框使用.border設(shè)置樣式，支持設(shè)置邊框顏色、邊框粗細、邊框圓角以及邊框的展示樣式。05設(shè)備位置區(qū)的Row布局設(shè)計設(shè)備位置用Row布局，內(nèi)嵌一個Text組件，在主軸方向上靠起始端對齊，設(shè)置內(nèi)邊距為10。06設(shè)備狀態(tài)信息區(qū)的設(shè)計與開發(fā)

設(shè)備狀態(tài)信息用Text組件顯示文字，對齊方式為左對齊，最多顯示一行，當超出一行時進行截斷。07設(shè)備控制區(qū)的設(shè)計與開發(fā)

設(shè)備控制區(qū)用Row布局，內(nèi)嵌兩個Image圖片組件，圖片組件的權(quán)重點比為2:1；給設(shè)備控制的圖片組件添加事件處理，當被點擊時，反轉(zhuǎn)標志位openFlag；兩個圖片組件顯示的圖片根據(jù)標志位openFlag進行圖片切換。08使用Blank和Divider組件

將設(shè)備位置區(qū)的Row布局設(shè)計，由使用Row的對齊方式修改為使用Blank組件，讓“客廳空調(diào)”的文字顯示實現(xiàn)居左擺放，同時增加一個下劃線，突出位置的顯示。任務(wù)3開發(fā)設(shè)備控制頁本任務(wù)綜合利用線性布局的不同屬性進行設(shè)備控制頁的布局設(shè)計，并使用Text組件和Image組件進行了信息的顯示。在開發(fā)過程中，用到的組件的公共屬性時，讀者可自行查閱CommonMethod的源碼，找到需要設(shè)置的樣式參數(shù)，設(shè)計出符合用戶需求的UI。任務(wù)小結(jié)任務(wù)4開發(fā)數(shù)據(jù)展示頁項目2走進ArkTS聲明式開發(fā)任務(wù)4

開發(fā)數(shù)據(jù)展示頁本任務(wù)使用Flex彈性布局、Stack層疊布局、進度條組件和滑動條組件，實現(xiàn)物聯(lián)網(wǎng)App中常見的數(shù)據(jù)展示頁的開發(fā)。任務(wù)描述任務(wù)效果圖預(yù)覽任務(wù)實施0102030504整理工程資源數(shù)據(jù)展示區(qū)的Flex布局設(shè)計調(diào)光燈帶區(qū)設(shè)計用滑動條調(diào)節(jié)燈光亮度用Stack布局和進度條顯示數(shù)據(jù)01整理工程資源

02數(shù)據(jù)展示區(qū)的Flex布局設(shè)計

頁面最外層和數(shù)據(jù)展示區(qū)域都是用垂直方向的Flex布局，對齊方式有所不同，一個是在主軸上居中對齊，另一個是在交叉軸上起始端對齊。03調(diào)光燈帶區(qū)設(shè)計

調(diào)光燈帶的文字和分割線，直接放在數(shù)據(jù)顯示區(qū)域的Flex布局下。因為Flex布局已設(shè)置好起始端對齊，因此可以實現(xiàn)靠左放置。04用Stack布局和進度條顯示數(shù)據(jù)

數(shù)據(jù)的顯示在Stack層疊布局中進行，使用Progress組件和顯示數(shù)據(jù)的Text組件，Text疊放在Progress上面，對齊方式為居中，數(shù)據(jù)值使用滑動條的狀態(tài)變量數(shù)據(jù)。05用滑動條調(diào)節(jié)燈光亮度

滑動條區(qū)域用Flex布局，不設(shè)置參數(shù)時默認為Row水平方向，從左到右排列亮度小圖標->滑動條->亮度大圖標，并在滑動條的事件處理中獲取滑動值，記錄到狀態(tài)變量sliderVal中，從而實現(xiàn)滑動時，進度條的進度和顯示的數(shù)據(jù)跟著改變。任務(wù)4開發(fā)數(shù)據(jù)展示頁本任務(wù)使用Flex彈性布局、進度條和滑動條，實現(xiàn)了物聯(lián)網(wǎng)App中常見的數(shù)據(jù)展示頁面的開發(fā)。Flex可以彈性設(shè)置成Row與Column方向，與Row與Column在屬性方法中設(shè)置的寫法不同，F(xiàn)lex是在參數(shù)中設(shè)置的，但效果是一樣的。任務(wù)小結(jié)任務(wù)5開發(fā)登錄頁項目2走進ArkTS聲明式開發(fā)任務(wù)5

開發(fā)登錄頁本任務(wù)使用輸入組件、按鈕組件、開關(guān)組件和提示框模塊，完成登錄頁的開發(fā)。任務(wù)描述任務(wù)效果圖預(yù)覽任務(wù)實施0102030504整理工程資源最外層布局設(shè)計Logo區(qū)設(shè)計用戶名/密碼區(qū)設(shè)計添加狀態(tài)變量06記住密碼區(qū)設(shè)計07登錄按鈕區(qū)設(shè)計08封裝消息提示函數(shù)01整理工程資源

02最外層布局設(shè)計

登錄頁面最外層用垂直方向的Cloumn布局，內(nèi)嵌Logo區(qū)域、用戶名和密碼輸入?yún)^(qū)域、記住密碼區(qū)域和登錄按鈕區(qū)域，內(nèi)嵌的組件居中對齊。03Logo區(qū)設(shè)計

Logo區(qū)是一個Image組件，使用應(yīng)用的資源圖片logo.png，設(shè)置寬度200，寬高比為1，底部距離下一個組件80。04添加狀態(tài)變量

輸入的用戶名和密碼，以及記住密碼的開關(guān)狀態(tài)，需要使用狀態(tài)變量進行記錄。05用戶名/密碼區(qū)設(shè)計

用戶名/密碼區(qū)外層是一個Column，里面用兩個Row，分別是用戶名和密碼所在的行；用戶名區(qū)域用了權(quán)重設(shè)置，密碼區(qū)用了寬度設(shè)置，用來比較設(shè)置寬度和權(quán)重的效果；輸入的用戶名和密碼選擇了不同的輸入類型；輸入框都處理了事件，獲取了對應(yīng)的輸入值。06記住密碼區(qū)設(shè)計

記住密碼區(qū)由Text組件和Toggle組件組成，用Row包裹住，并設(shè)置Row的對齊方式為End對齊；設(shè)置Toggle為打開的狀態(tài)，處理Toggle狀態(tài)改變的事件。07登錄按鈕區(qū)設(shè)計登錄按鈕放在Column中，利用Column默認的對齊方式實現(xiàn)居中對齊；按鈕的類型為Normal，設(shè)置了圓角；處理按鈕的點擊事件，點擊按鈕時，將獲取到的用戶名和密碼信息用console.log()進行日志輸出。08封裝消息提示函數(shù)

導(dǎo)入消息提示模塊，封裝消息提示函數(shù)showMsg()。importpromptActionfrom'@mptAction'showMsg(msg:string){

promptAction.showToast({

message:"選中的值是："+msg,

duration:2000,//顯示時長2秒

bottom:100//顯示位置距離底部100

})

}把開關(guān)的日志和登錄按鈕的日志輸出，修改為使用消息提示。任務(wù)5開發(fā)登錄頁本任務(wù)主要講解輸入組件、按鈕組件、開關(guān)組件和消息提示函數(shù)的使用，并綜合使用布局和組件，開發(fā)了登錄頁面，處理了按鈕的事件。任務(wù)小結(jié)任務(wù)6自定義組件項目2走進ArkTS聲明式開發(fā)任務(wù)6

自定義組件本任務(wù)從自定義組件的分析和創(chuàng)建，到自定義組件的導(dǎo)出、導(dǎo)入和使用，講解自定義組件的開發(fā)過程。任務(wù)描述任務(wù)效果圖預(yù)覽任務(wù)實施0102030504整理工程資源創(chuàng)建自定義組件的目錄和文件創(chuàng)建自定義組件并導(dǎo)出驗證組件和頁面的生命周期導(dǎo)入并調(diào)用自定義組件01整理工程資源

02創(chuàng)建自定義組件目錄和文件

按官方的建議，自定義的組件放在ets>view目錄下。默認創(chuàng)建的ArkTS工程是沒有這個目錄，需要手動創(chuàng)建。

在ets目錄下新建view目錄，再在view目錄下新建ArkTSFile文件。03創(chuàng)建自定義組件并導(dǎo)出分析：當需要完成一個UI設(shè)計時，發(fā)現(xiàn)UI中有重復(fù)出現(xiàn)的元素，或者覺得這個UI以后可以重復(fù)使用的，即可把它做成一個自定義的組件。組件中左邊的圖片和文字，可以由調(diào)用者傳入，因此將圖片和文字抽取成狀態(tài)變量，并在組件中使用“this.狀態(tài)變量”進行引用；而右邊的圖片都是同一個，因此可以不抽取狀態(tài)變量。組件用@Preview裝飾，用來預(yù)覽自定義的組件；用@Component裝飾組件，用exportdefault導(dǎo)出組件。03導(dǎo)入并調(diào)用自定義組件用import導(dǎo)入組件MyItem：importMyItemfrom'../view/MyItem';

MyItem({image:$r("app.media.msg"),text:'消息中心'})調(diào)用組件MyItem：04驗證組件和頁面的生命周期任務(wù)6自定義組件本任務(wù)主要講解了ArkTS開發(fā)過程中很重要的自定義組件的相關(guān)操作，從分析需要自定義的組件開始，到學會抽取自定義組件需要的參數(shù)，再到導(dǎo)出和導(dǎo)入組件、調(diào)用自定義組件并傳遞參數(shù)，講解了自定義組件的開發(fā)流程。任務(wù)小結(jié)任務(wù)7渲染組件項目2走進ArkTS聲明式開發(fā)任務(wù)7渲染組件本任務(wù)實現(xiàn)使用條件和循環(huán)渲染控制組件的顯示。任務(wù)描述任務(wù)效果圖預(yù)覽任務(wù)實施0102030504用條件渲染組件封裝數(shù)據(jù)實體類處理數(shù)據(jù)源用循環(huán)渲染組件導(dǎo)入數(shù)據(jù)源06在生命周期函數(shù)中初始化數(shù)據(jù)01用條件渲染組件

修改組件MyItem的代碼，在分割線組件上使用條件渲染，使用字符串的匹配函數(shù)match()，判斷傳入的文字不是“關(guān)于我們”時，組件中的分割線才渲染。02封裝數(shù)據(jù)實體類

數(shù)據(jù)需要封裝在對應(yīng)的實體類中。在ets目錄下新建model目錄，在model目錄中新建DataModel.ets文件，用于封裝對應(yīng)的實體類；在ets目錄下新建viewmodel目錄，在viewmodel目錄中新建MyDataViewModel.ets文件，用于模擬數(shù)據(jù)來源。在DataModel.ets文件中編寫DataModel類，并用exportdefault導(dǎo)出類，類內(nèi)提供構(gòu)造方法用于封裝對象。exportdefaultclassDataModel{

imageSrc:Resource;//圖片

textVal:string;//文字//構(gòu)造方法

constructor(imageSrc:Resource,textVal:string)

{

this.imageSrc=imageSrc;

this.textVal=textVal;

}}03處理數(shù)據(jù)源在MyDataViewModel.ets中，導(dǎo)入DataModel類，編寫函數(shù)initData()，并用exportdefault進行導(dǎo)出；將需要的數(shù)據(jù)用DataModel類的對象進行封裝，再放到datas數(shù)組中；在函數(shù)的最后一行將datas數(shù)組返回。importDataModel

from'../model/DataModel';exportdefaultfunctioninitData():Array<DataModel>{

letdatas:Array<DataModel>=[

newDataModel($r("app.media.msg"),'消息中心'),

newDataModel($r("blem"),'意見反饋'),

newDataModel($r("app.media.help"),'幫助中心'),

newDataModel($r("app.media.hide"),'隱藏設(shè)備'),

newDataModel($r("app.media.account"),'賬號切換'),

newDataModel($r("app.media.about"),'關(guān)于我們'),

]console.log("數(shù)據(jù)初始化完畢…")

returndatas;}04導(dǎo)入數(shù)據(jù)源在Index.ets的第一行，添加導(dǎo)入數(shù)據(jù)實體類DataModel和數(shù)據(jù)源MyDataViewModel中的初始數(shù)據(jù)的方法initData()。//導(dǎo)入數(shù)據(jù)實體類importDataModel

from'../model/DataModel';//導(dǎo)入數(shù)據(jù)源import

initData

from'../viewmodel/MyDataViewModel';05用循環(huán)渲染組件修改Index組件的代碼，定義變量datas并使用數(shù)據(jù)源進行初始化，在Column組件中使用循環(huán)渲染組件，循環(huán)中的item就是數(shù)據(jù)源中的每一個DataModel對象，通過“item.變量名”進行引用對應(yīng)的值。

ForEach(this.datas,(item)=>{

MyItem({image:item.imageSrc,text:item.textVal})

})06在生命周期函數(shù)中初始化數(shù)據(jù)-1修改Index的代碼，在組件和頁面的生命周期函數(shù)中分別進行驗證數(shù)據(jù)的初始化。//datas:Array<DataModel>=initData()//初始化數(shù)據(jù)datas:Array<DataModel>;aboutToAppear(){

this.datas=initData()//初始化數(shù)據(jù)}onPageShow(){

//this.datas=initData()//初始化數(shù)據(jù)}06在生命周期函數(shù)中初始化數(shù)據(jù)-2aboutToAppear()生命周期函數(shù)是在build()函數(shù)之前執(zhí)行；opPageShow()函數(shù)是在build()函數(shù)之后執(zhí)行。在實際開發(fā)時，opPageShow()函數(shù)可以用來在build()構(gòu)建完頁面后，再對數(shù)據(jù)進行變化，從而改變頁面的指定的數(shù)據(jù)。任務(wù)7渲染組件本任務(wù)利用條件和循環(huán)渲染語法進行了組件的渲染控制，學會了數(shù)據(jù)源的處理，同時利用組件的生命周期函數(shù)進行了數(shù)據(jù)的初始化。任務(wù)小結(jié)任務(wù)8組件間的狀態(tài)管理項目2走進ArkTS聲明式開發(fā)任務(wù)8組件間的狀態(tài)管理本任務(wù)主要講解組件級別裝飾器的使用，并在父子組件間實現(xiàn)單向或雙向傳遞數(shù)據(jù)，跨子孫組件間實現(xiàn)雙向數(shù)據(jù)傳遞。任務(wù)描述任務(wù)效果圖預(yù)覽任務(wù)實施0102030504創(chuàng)建場景設(shè)置子組件父組件向子組件的@State變量傳值子組件用@Prop接收父組件的單向傳值跨子孫組件間雙向傳值子組件用@Link實現(xiàn)父子間雙向傳值01創(chuàng)建場景設(shè)置子組件

在ets目錄中新建目錄view，在view目錄中新建ArkTSFile文件，名為SceneInfo；在其中定義子組件SceneInfo，在子組件內(nèi)定義用@State裝飾的變量scene，用戶選擇不同的場景時，對應(yīng)的場景的背景和字體的顏色發(fā)生變化；定義子組件時用exportdefault進行導(dǎo)出。02父組件向子組件的@State變量傳值在Index.ets中導(dǎo)入子組件SceneInfo，在build()中給Text組件添加事件來實現(xiàn)父組件的場景選擇，調(diào)用子組件SceneInfo時，使用this.scene_parent傳遞參數(shù)給子組件。03子組件用@Prop接收父組件的單向傳值修改子組件SceneInfo，用@Prop裝飾變量scene，@Prop裝飾的變量在子組件內(nèi)不能自己初始化；@Prop裝飾的變量必須使用其父組件提供的@State變量通過參數(shù)進行初始化，修改父組件中調(diào)用子組件的位置，用({scene:this.scene_parent})給子組件傳值。04子組件用@Link實現(xiàn)父子間雙向傳值@Link裝飾的變量可以和父組件的@State變量建立雙向的數(shù)據(jù)綁定，@Link裝飾的變量必須使用其父組件提供的@State變量進行初始化，并且使用$符號初始化，允許組件內(nèi)部修改@Link變量值且更改會通知給父組件。05跨子孫組件間雙向傳值修改SceneInfo子組件中的狀態(tài)變量為@Consume(“scene_val”)，修改父組件Index的狀態(tài)變量為@Provide(“scene_val”),在Index組件中調(diào)用子組件Provider_sub，實現(xiàn)Index組件通過Provider_sub子組件向SceneInfo孫組件傳值。任務(wù)8組件間的狀態(tài)管理本任務(wù)主要講解了組件級別的狀態(tài)變量裝飾器的使用，進行了父子/子孫組件間的單向和雙向傳值，其中@State用在組件內(nèi)、@Prop用于父向子單向傳值、@Link用于父子間雙向傳值、@Provide用于跨子孫組件向@Consume的狀態(tài)變量雙向傳值，當這些裝飾符裝飾的狀態(tài)變量被改變時，將會調(diào)用所在組件的build()方法進行UI刷新。任務(wù)小結(jié)任務(wù)9開發(fā)閃屏頁項目2走進ArkTS聲明式開發(fā)任務(wù)9開發(fā)閃屏頁本任務(wù)使用頁面路由router和路由容器組件Navigator，完成頁面跳轉(zhuǎn)并傳值，實現(xiàn)點擊可以跳轉(zhuǎn)并跳回，跳轉(zhuǎn)時可以同時傳遞參數(shù)，目標頁面接收參數(shù)并顯示出來。任務(wù)描述任務(wù)效果圖預(yù)覽任務(wù)實施0102030504整理工程資源使用頁面路由實現(xiàn)跳轉(zhuǎn)并傳值使用頁面路由實現(xiàn)跳回使用Navigator實現(xiàn)頁面跳轉(zhuǎn)并傳值接收路由參數(shù)01整理工程資源

02使用頁面路由實現(xiàn)跳轉(zhuǎn)并傳值在Splash頁面文件中編寫代碼：首先在第1行，導(dǎo)入頁面路由；接著實現(xiàn)頁面效果，整體布局是在Column布局中放置一個Stack布局，在Stack中放置一個鋪滿屏幕寬高的Image組件，將Text組件疊加加Image組件上，Stack布局頂部居左對齊；最后進行事件處理，給Image組件和Text組件添加單擊事件，在事件中使用頁面路由實現(xiàn)跳轉(zhuǎn)到指定頁面并按需要傳遞參數(shù)。03使用頁面路由實現(xiàn)跳回在Index頁面文件中，導(dǎo)入路由、修改頁面代碼、實現(xiàn)跳回到Splash頁面。04接收路由參數(shù)在Message頁面文件中，導(dǎo)入路由、修改頁面代碼、接收路由參數(shù)并顯示在頁面上、使用頁面路由實現(xiàn)跳回到Splash頁面。05使用Navigator實現(xiàn)頁面跳轉(zhuǎn)并傳值改寫Splash頁面中的Image組件的代碼，用Navigator路由容器組件實現(xiàn)跳轉(zhuǎn)并傳值。任務(wù)9開發(fā)閃屏頁本任務(wù)主要實現(xiàn)了兩種方式的頁面跳轉(zhuǎn)，router頁面路由是在組件的點擊事件中完成跳轉(zhuǎn)與傳值，Navigator路由容器組件內(nèi)部包含可跳轉(zhuǎn)的組件，兩種使用方式不一樣，但結(jié)果是一樣的。使用router跳轉(zhuǎn)并傳遞參數(shù)時，發(fā)起跳轉(zhuǎn)的頁面和目標頁都需要導(dǎo)入頁面路由；使用Navigator時，發(fā)起方不需要導(dǎo)入頁面路由，目標方如果有接收參數(shù)，需要通過路由獲取傳遞的值，因此需要導(dǎo)入頁面路由。任務(wù)小結(jié)任務(wù)10開發(fā)引導(dǎo)頁項目2走進ArkTS聲明式開發(fā)任務(wù)10開發(fā)引導(dǎo)頁本任務(wù)綜合使用滑塊視圖容器組件Swiper和層疊布局，開發(fā)出App必備的引導(dǎo)頁。本任務(wù)的引導(dǎo)頁由3個輪播頁面組成，當輪播頁面到達第3個頁面時，出現(xiàn)Button組件，用于跳轉(zhuǎn)到主頁。任務(wù)描述任務(wù)效果圖預(yù)覽任務(wù)實施010203整理工程資源實現(xiàn)引導(dǎo)頁的輪播功能從引導(dǎo)頁跳轉(zhuǎn)到主頁01整理工程資源

02實現(xiàn)引導(dǎo)頁的輪播功能引導(dǎo)頁的布局設(shè)計，最外層用一個Column布局，內(nèi)嵌一個Stack層疊布局，Stack中放置一個Swiper組件和一個Button組件，給Swiper組件添加屬性，實現(xiàn)引導(dǎo)頁中的3個輪播頁面每隔4秒自動切換。03從引導(dǎo)頁跳轉(zhuǎn)到主頁引導(dǎo)頁有3個頁面，只有頁面切換到下標為2的第3個頁面時，Button組件才需要出現(xiàn)。要實現(xiàn)這個功能，可以給Swiper組件添加事件處理，在事件回調(diào)方法中獲取當前頁面的下標，通過下標控制Button組件的出現(xiàn)，并且給Button組件添加單擊事件，通過頁面路由跳轉(zhuǎn)到Index主頁面。任務(wù)10開發(fā)引導(dǎo)頁本任務(wù)學習了滑塊視圖容器Swiper的使用，并進行了App常見的引導(dǎo)頁的開發(fā)。引導(dǎo)頁設(shè)計是App的設(shè)計重點之一，引導(dǎo)頁的設(shè)計對于新用戶來說是非常重要的，而功能性的升級版本中的引導(dǎo)頁也能讓老用戶快速掌握新升級功能，能起到很好的輔助作用，大大提升了用戶體驗。任務(wù)小結(jié)任務(wù)11開發(fā)主頁項目2走進ArkTS聲明式開發(fā)任務(wù)11開發(fā)主頁本任務(wù)使用Tabs組件，開發(fā)主頁面中的“主頁”、“場景”、“我的”這3個頁簽，并實現(xiàn)對應(yīng)內(nèi)容頁的頁面切換。任務(wù)描述任務(wù)效果圖預(yù)覽任務(wù)實施010203整理工程資源tabBar的布局分析構(gòu)建自定義的tabBar04在Tabs中實現(xiàn)主頁功能01整理工程資源

選中與未選中的狀態(tài)可以用不同的圖片實現(xiàn)，將任務(wù)需要的圖片放到media目錄下。02tabBar的布局分析Tabs中的每一個tabBar，布局設(shè)計是一樣的，可以使用Column布局包裹住一個Image組件和一個Text組件實現(xiàn)。03構(gòu)建自定義的tabBar在Index.ets中編寫代碼，使用@Builder快速構(gòu)建自定義的tabBar，命名為tabBuilder。在tabBuilder中，根據(jù)Tabs的控制器返回的當前頁簽的選中下標，更改選中與未選中時的圖標和文字顏色，添加單擊tabBar時通過控制器進行頁面切換的事件處理。04在Tabs中實現(xiàn)主頁功能在Index.ets中的build()中編寫代碼，使用Tabs組件，在Tabs組件中設(shè)置3個TabContent；給每個TabContent使用自定義的tabBar，傳入選中/未選中時使用的圖標和當前tabBar的索引；每個TabContent中的內(nèi)容組件先用Text組件來模擬。任務(wù)11開發(fā)主頁本任務(wù)使用Tabs組件開發(fā)了App中常見的主頁頁面切換，針對每個tabBar都需要設(shè)置選中與未選中時的圖標和文字，構(gòu)建了自定義的tabBar。任務(wù)小結(jié)任務(wù)12展示列表與網(wǎng)格數(shù)據(jù)項目2走進ArkTS聲明式開發(fā)任務(wù)12展示列表與網(wǎng)格數(shù)據(jù)本任務(wù)完成List列表數(shù)據(jù)和Grid網(wǎng)格數(shù)據(jù)的展示。任務(wù)描述任務(wù)效果圖預(yù)覽任務(wù)實施010203整理工程資源實現(xiàn)列表數(shù)據(jù)的展示自定義GridItem項布局組件04實現(xiàn)網(wǎng)格數(shù)據(jù)的展示01整理工程資源

本任務(wù)在任務(wù)7（渲染組件）的基礎(chǔ)上完成，使用到任務(wù)7定義的實體數(shù)據(jù)類和數(shù)據(jù)源。將Project2_Task7工程復(fù)制一份，并重命名為Project2_Task12。在Project2_Task12中修改代碼，完成任務(wù)要求。02實現(xiàn)列表數(shù)據(jù)的展示修改Index.ets中的代碼，整體布局的最外層一個Column，內(nèi)部用Scroll滾動組件包裹住List組件，ListItem子組件對應(yīng)的布局使用前面任務(wù)中已經(jīng)實現(xiàn)的MyItem自定義組件，使用List組件實現(xiàn)列表數(shù)據(jù)的展示。03自定義GridItem項布局組件Grid與List相似，GridItem是Grid的唯一子組件。Grid指定在行和列上的GridItem子組件的展示個數(shù)，并且可以調(diào)整每一個GridItem所占的行寬和列高。在ets>view目錄下創(chuàng)建MyGridItem.ets文件，用于定義GridItem的布局。GridItem的布局由一個Column組成，內(nèi)嵌一個圖片組件和文字顯示組件。04實現(xiàn)網(wǎng)格數(shù)據(jù)的展示在Index.ets文件中導(dǎo)入MyGridItem組件，添加用Scroll組件包裹住的Grid組件，實現(xiàn)網(wǎng)格數(shù)據(jù)的展示。任務(wù)12展示列表與網(wǎng)格數(shù)據(jù)本任務(wù)使用List組件和Grid組件開發(fā)了App中常見的列表項和網(wǎng)格項的數(shù)據(jù)展示，從類的定義、類的導(dǎo)出、數(shù)據(jù)源、展示單個數(shù)據(jù)的自定義組件、用循環(huán)進行組件的渲染，到用滾動組件包裹住List和Grid，展示了列表和網(wǎng)格的完整開發(fā)過程。任務(wù)小結(jié)任務(wù)13開發(fā)自定義的時間彈窗項目2走進ArkTS聲明式開發(fā)任務(wù)13開發(fā)自定義的時間彈窗本任務(wù)綜合使用自定義的對話框、日期選擇器、時間選擇器，以及條件渲染，進行自定義的時間彈窗開發(fā)。任務(wù)描述任務(wù)效果圖預(yù)覽任務(wù)實施010203整理工程資源實現(xiàn)自定義的對話框?qū)崿F(xiàn)時間彈窗01整理工程資源

在ets>view目錄下創(chuàng)建自定義的對話框組件MyDialog。02實現(xiàn)自定義的對話框自定義對話框MyDialog組件，標題由調(diào)用者傳入，提供“確定”和“取消”按鈕，對話框內(nèi)部的UI在使用時根據(jù)場景再進行設(shè)計。在MyDialog.ets文件中，編寫自定義的對話框組件并用exportdefault導(dǎo)出，依據(jù)傳遞過來的title的條件值，決定渲染的是日期還是時間選擇器，并處理自定義對話框的確定和取消的按鈕事件，在事件中關(guān)閉對話框。03實現(xiàn)時間彈窗在Index.ets頁面文件中，導(dǎo)入自定義的對話框組件，分別用不同的自定義對話框控制器，傳入不同的參數(shù)值，并且在日期和時間的選擇按鈕上打開對應(yīng)的對話框。03實現(xiàn)時間彈窗-驗證時間選擇的值任務(wù)13開發(fā)自定義的時間彈窗本任務(wù)學習了自定義對話框的使用，從構(gòu)建自定義的對話框組件，到調(diào)用對話框組件，再到通過條件渲染，進行選擇性的改變對話框內(nèi)部的UI結(jié)構(gòu)，這些都是自定義對話框中必須要掌握的關(guān)鍵技術(shù)點。任務(wù)小結(jié)任務(wù)14使用動畫項目2走進ArkTS聲明式開發(fā)任務(wù)14使用動畫本任務(wù)完成顯示動畫、組件的轉(zhuǎn)場動畫、頁面的轉(zhuǎn)場動畫的設(shè)置。任務(wù)描述任務(wù)效果圖預(yù)覽任務(wù)實施0102030504整理工程資源頁面整體布局設(shè)計與開發(fā)實現(xiàn)顯式動畫實現(xiàn)頁面轉(zhuǎn)場動畫實現(xiàn)組件轉(zhuǎn)場動畫01整理工程資源

02頁面整體布局設(shè)計與開發(fā)頁面整體布局用Stack層疊布局實現(xiàn)，Stack的對齊方式采用默認的居中對齊。Stack內(nèi)放置一個Image組件和一個Column布局容器組件，在Column內(nèi)再放置Button按鈕組件等。03實現(xiàn)顯式動畫-1在ets目錄下創(chuàng)建view目錄，在view目錄下創(chuàng)建AttrAnimation.ets文件，在AttrAnimation.ets文件中創(chuàng)建AttrAnimation組件，使用顯式動畫實現(xiàn)加載中的動畫效果。整體布局是最外層使用Column，內(nèi)部放置Stack層疊布局和一個Text組件，Stack中疊放兩個圖片loading.png和sandglass.png。03實現(xiàn)顯式動畫-2修改Index.ets文件的內(nèi)容，在第一行導(dǎo)入AttrAnimation組件，并在“顯示動畫”按鈕的條件渲染中進行調(diào)用。04實現(xiàn)組件轉(zhuǎn)場動畫在Index.ets文件中，實現(xiàn)單擊likes（點贊）圖片時，love（愛心）圖片的插入和刪除的組件轉(zhuǎn)場動畫效果。05實現(xiàn)頁面轉(zhuǎn)場動畫在pages目錄下新建頁面Index2，分別在Index1和Index2兩個頁面中添加頁面轉(zhuǎn)場動畫。在Index組件中，給最外層的Stack布局添加頁面的縮放比和透明度設(shè)置，并添加頁面入場和出場動畫效果。任務(wù)14使用動畫在App的開發(fā)中，適當?shù)氖褂脛赢嬓Ч?，可以增強用戶體驗。本任務(wù)學習了常用的顯示動畫、組件內(nèi)轉(zhuǎn)場動畫、頁面間轉(zhuǎn)場動畫的用法，ArkUI開發(fā)框架中還提供了屬性動畫和路徑動畫，有興趣的讀者可自行參考官方文檔進行使用。任務(wù)小結(jié)任務(wù)15視頻播放項目2走進ArkTS聲明式開發(fā)任務(wù)15視頻播放本任務(wù)使用Video組件，完成視頻的播放、暫停和停止控制，同時可以進行視頻源的切換。任務(wù)描述任務(wù)效果圖預(yù)覽任務(wù)實施0102整理工程資源實現(xiàn)本地視頻播放01整理工程資源

02實現(xiàn)本地視頻的播放在Index.ets文件中編寫代碼，使用數(shù)組存放播放的視頻源地址，在“切換播放源”按鈕中通過數(shù)組的下標切換來改變要播放的視頻；設(shè)置Video組件的參數(shù)、屬性和事件，實現(xiàn)視頻播放功能。任務(wù)15視頻播放本任務(wù)學習了Video組件的使用，使用Video提供的參數(shù)、屬性和事件進行了視頻播放的控制。HarmonyOS的媒體播放接口中，還提供了音頻播放的接口，有興趣的讀者可自行查閱官方文檔進行使用。任務(wù)小結(jié)任務(wù)1啟動Stage模型下的UIAbility項目3走進Stage模型下的業(yè)務(wù)能力開發(fā)任務(wù)1啟動Stage模型下的UIAbility本任務(wù)使用Stage模型下的UIAbility能力，創(chuàng)建并啟動UIAbility，借助Want通信接口，在UIAbility間跳轉(zhuǎn)并傳遞數(shù)據(jù)，實現(xiàn)同一個設(shè)備下兩個UIAbility間的跳轉(zhuǎn)和傳值。任務(wù)描述任務(wù)效果圖預(yù)覽任務(wù)實施0102整理工程資源設(shè)定兩個UIAbility的啟動頁面0304在Main_Index頁面中跳轉(zhuǎn)并傳遞數(shù)據(jù)在目標UIAbility獲取傳遞過來的數(shù)據(jù)01整理工程資源

本任務(wù)需要兩個UIAbility，分別是：MainAbility

EntryAbility.ts，Index.etx->Main_Index；SecondAbility，新建Ability生成，新建頁面Second_Index。02設(shè)定兩個UIAbility的啟動頁面-1應(yīng)用啟動文件中驗證UIAbility:02設(shè)定兩個UIAbility的啟動頁面-2分別在兩個UIAbility的入口文件中設(shè)置每一個UIAbility對應(yīng)的首頁:02設(shè)定兩個UIAbility的啟動頁面-3在配置文件module.json5中驗證啟動的Ability:03在Main_Index頁面中跳轉(zhuǎn)并傳遞數(shù)據(jù)-1在Main_Index.ets中，需要有UIAbilityConext上下文對象，并組裝Want通信接口中的參數(shù)，傳遞關(guān)鍵字為msg，值為字符串類型的val，關(guān)鍵代碼：//跳轉(zhuǎn)到指定的UIAbility并傳遞字符串類型的值letwant={bundleName:'ject3_task1',//包名abilityName:'SecondAbility',//目標UIAbility名parameters:{//跳轉(zhuǎn)時傳遞的參數(shù)msg:"有人入侵"http://傳遞參數(shù)的關(guān)鍵定為msg,值為字符串類型的val}};//啟動want參數(shù)中指定的UIAbilitythis.context.startAbility(want)03在Main_Index頁面中跳轉(zhuǎn)并傳遞數(shù)據(jù)-2在Main_Index.ets中，在組件的點擊事件中，進行跳轉(zhuǎn)。04在目標UIAbility獲取傳遞過來的數(shù)據(jù)-1在目標UIAbility的入口文件SecondAbility.ts中的onCreate()方法，使用globalThis全局對象存儲傳遞過來的want數(shù)據(jù)，關(guān)鍵代碼：exportdefaultclassSecondAbilityextends