OpenHarmony 北向應(yīng)用開(kāi)發(fā)—ArkTS語(yǔ)言入門(mén)（構(gòu)建應(yīng)用頁(yè)面）
想了解更多關(guān)于開(kāi)源的內(nèi)容，請(qǐng)?jiān)L問(wèn)：
ArkTS語(yǔ)言入門(mén)
在學(xué)習(xí)ArkTS語(yǔ)言之前，我們首先需要一個(gè)能夠編譯并運(yùn)行該語(yǔ)言的工具DevEco Studio，該工具具體的安裝及配置流程可按照https://ost.51cto.com/posts/24547這位博主所指導(dǎo)的進(jìn)行操作，這里就不再贅述。
了解ArkTS
ArkTS是OpenHarmony優(yōu)選的主力應(yīng)用開(kāi)發(fā)語(yǔ)言。ArkTS圍繞應(yīng)用開(kāi)發(fā)在TypeScript（簡(jiǎn)稱(chēng)TS）生態(tài)基礎(chǔ)上做了進(jìn)一步擴(kuò)展，繼承了TS的所有特性，是TS的超集。因此，在學(xué)習(xí)ArkTS語(yǔ)言之前，建議開(kāi)發(fā)者具備TS語(yǔ)言開(kāi)發(fā)能力。
體驗(yàn)ArkTS
首先，我們來(lái)看這張圖：
【OpenHarmony 北向應(yīng)用開(kāi)發(fā)】ArkTS語(yǔ)言入門(mén)（構(gòu)建應(yīng)用頁(yè)面）-開(kāi)源基礎(chǔ)軟件社區(qū)
這張圖將一個(gè)簡(jiǎn)單頁(yè)面的組成部分詳細(xì)的指了出來(lái)，包括裝飾器以及各種各樣的組件等，它的最終展示效果如下：
【OpenHarmony 北向應(yīng)用開(kāi)發(fā)】ArkTS語(yǔ)言入門(mén)（構(gòu)建應(yīng)用頁(yè)面）-開(kāi)源基礎(chǔ)軟件社區(qū)
對(duì)“Click me”進(jìn)行點(diǎn)擊，將會(huì)呈現(xiàn)如下效果：
【OpenHarmony 北向應(yīng)用開(kāi)發(fā)】ArkTS語(yǔ)言入門(mén)（構(gòu)建應(yīng)用頁(yè)面）-開(kāi)源基礎(chǔ)軟件社區(qū)
學(xué)習(xí)ArkTS
接下來(lái)，我們將開(kāi)始正式學(xué)習(xí)ArkTS語(yǔ)言。
1、應(yīng)用頁(yè)面構(gòu)成
【OpenHarmony 北向應(yīng)用開(kāi)發(fā)】ArkTS語(yǔ)言入門(mén)（構(gòu)建應(yīng)用頁(yè)面）-開(kāi)源基礎(chǔ)軟件社區(qū)
上圖即為一個(gè)基本頁(yè)面的布局，我將以上圖為例，逐一講解其中的內(nèi)容：
首先，我先講解上圖中每一個(gè)節(jié)點(diǎn)所代表的含義：
- “APP”----這個(gè)即是軟件本身，所有的操作都將在它的基礎(chǔ)上完成。
- “Column”----column是一個(gè)主軸為縱向的容器，在它上面的內(nèi)容將以縱向排列。
- “Row”----與column相反，Row是一個(gè)主軸為橫向的容器，在它上面的內(nèi)容將以橫向排列。
- “Test”----Test是文本容器，可以在其中輸入文字并將其展示在頁(yè)面上。
- “Image”----Image是圖片容器，可以向其中傳入圖片并將其展示在頁(yè)面上。
- “Slider”----Slider是一個(gè)滑動(dòng)條組件，用于控制一些可調(diào)節(jié)的頁(yè)面內(nèi)容。
- “Button”----Button則是一個(gè)按鈕，用于實(shí)現(xiàn)頁(yè)面與用戶(hù)的交互功能。
接下來(lái)，我將由這個(gè)樹(shù)狀圖，展示如何實(shí)現(xiàn)頁(yè)面的布局：
此時(shí)為未布局的狀態(tài)。
【OpenHarmony 北向應(yīng)用開(kāi)發(fā)】ArkTS語(yǔ)言入門(mén)（構(gòu)建應(yīng)用頁(yè)面）-開(kāi)源基礎(chǔ)軟件社區(qū)
將第一層的column容器填充到頁(yè)面當(dāng)中。
【OpenHarmony 北向應(yīng)用開(kāi)發(fā)】ArkTS語(yǔ)言入門(mén)（構(gòu)建應(yīng)用頁(yè)面）-開(kāi)源基礎(chǔ)軟件社區(qū)
接著，將第二層的Test,Column按順序縱向排列在第一層Column容器中。
【OpenHarmony 北向應(yīng)用開(kāi)發(fā)】ArkTS語(yǔ)言入門(mén)（構(gòu)建應(yīng)用頁(yè)面）-開(kāi)源基礎(chǔ)軟件社區(qū)
再將第三層的Row,Slider按順序縱向排列在第二層的column容器中。
【OpenHarmony 北向應(yīng)用開(kāi)發(fā)】ArkTS語(yǔ)言入門(mén)（構(gòu)建應(yīng)用頁(yè)面）-開(kāi)源基礎(chǔ)軟件社區(qū)
再將第四層的Image和Test按順序橫向排列在第三層的Row容器中。
【OpenHarmony 北向應(yīng)用開(kāi)發(fā)】ArkTS語(yǔ)言入門(mén)（構(gòu)建應(yīng)用頁(yè)面）-開(kāi)源基礎(chǔ)軟件社區(qū)
最后類(lèi)似上面的步驟，將最后的Row以及其中的兩個(gè)Button按鈕排列在第二層的Column容器中。
【OpenHarmony 北向應(yīng)用開(kāi)發(fā)】ArkTS語(yǔ)言入門(mén)（構(gòu)建應(yīng)用頁(yè)面）-開(kāi)源基礎(chǔ)軟件社區(qū)
以上便是一個(gè)基本頁(yè)面組成的例子。
2、代碼示例
【OpenHarmony 北向應(yīng)用開(kāi)發(fā)】ArkTS語(yǔ)言入門(mén)（構(gòu)建應(yīng)用頁(yè)面）-開(kāi)源基礎(chǔ)軟件社區(qū)
上圖便是前文中的頁(yè)面構(gòu)成的代碼示例，接下來(lái)，我將逐一分析各段代碼的作用：
【OpenHarmony 北向應(yīng)用開(kāi)發(fā)】ArkTS語(yǔ)言入門(mén)（構(gòu)建應(yīng)用頁(yè)面）-開(kāi)源基礎(chǔ)軟件社區(qū)
如上圖所示，這類(lèi)以“@”開(kāi)頭的叫做裝飾器，裝飾器的作用是賦予被裝飾內(nèi)容某一種能力，例如“@Entry”,這個(gè)裝飾器的作用是將被它裝飾的組件作為頁(yè)面的入口，在頁(yè)面被加載時(shí)該組件將會(huì)被渲染展示。而“@Component”則是用于裝飾結(jié)構(gòu)體struct，表示該結(jié)構(gòu)體是一個(gè)UI組件。
【OpenHarmony 北向應(yīng)用開(kāi)發(fā)】ArkTS語(yǔ)言入門(mén)（構(gòu)建應(yīng)用頁(yè)面）-開(kāi)源基礎(chǔ)軟件社區(qū)
接著，如圖所示為build方法，頁(yè)面內(nèi)所有內(nèi)容將在build方法內(nèi)寫(xiě)入，每個(gè)組件都必須實(shí)現(xiàn)build方法，用于定義組件的聲明式UI描述。
【OpenHarmony 北向應(yīng)用開(kāi)發(fā)】ArkTS語(yǔ)言入門(mén)（構(gòu)建應(yīng)用頁(yè)面）-開(kāi)源基礎(chǔ)軟件社區(qū)
接下來(lái)便是頁(yè)面的組成部分了，由圖示，第一個(gè)Column容器在“{}”中包含了第二層的Test，Column，Row容器，而第二層的容器則又在“{}”中包含了第三層的內(nèi)容，以此類(lèi)推…,如果需要更改，增加或刪減內(nèi)容，可以直接在對(duì)應(yīng)的層級(jí)中進(jìn)行操作。
常見(jiàn)基礎(chǔ)組件
當(dāng)我們了解了一個(gè)頁(yè)面的布局以及代碼的寫(xiě)法后，我們就可以接觸更多的組件，讓我們的頁(yè)面變得更加美觀并擁有更豐富的功能。下圖便是一部分組件。
【OpenHarmony 北向應(yīng)用開(kāi)發(fā)】ArkTS語(yǔ)言入門(mén)（構(gòu)建應(yīng)用頁(yè)面）-開(kāi)源基礎(chǔ)軟件社區(qū)
接下來(lái)，我將介紹其中幾個(gè)較為常用的組件及其用法：
“Test”----Testy用于文本的展示，當(dāng)我們?cè)赥est中寫(xiě)入內(nèi)容,如：
Test('test')
.fontsize(50)此時(shí)，將會(huì)呈現(xiàn)出如下頁(yè)面：
【OpenHarmony 北向應(yīng)用開(kāi)發(fā)】ArkTS語(yǔ)言入門(mén)（構(gòu)建應(yīng)用頁(yè)面）-開(kāi)源基礎(chǔ)軟件社區(qū)
這里的fontsize為T(mén)est組件的屬性，用于設(shè)置文本內(nèi)容的大小。
在Test組件中，還可以直接引用存放在resouces目錄下的資源文件，例如我們?cè)趓esouces目錄下創(chuàng)建string文件
【OpenHarmony 北向應(yīng)用開(kāi)發(fā)】ArkTS語(yǔ)言入門(mén)（構(gòu)建應(yīng)用頁(yè)面）-開(kāi)源基礎(chǔ)軟件社區(qū)
在其中寫(xiě)入：
“string”：[{
"name":"EntryAbility_lable",
"value":"lable"
}]其中string代表數(shù)據(jù)類(lèi)型，name代表該文件其中內(nèi)容的名稱(chēng)，value則代表指定內(nèi)容中值。
接著，可以通過(guò)" $r(‘’) "在Test組件中引用該數(shù)據(jù)，例如：
Test($r('app.string.EntryAbility_lable'))
.fontsize(50)
.fontColor('#ff2233')效果如圖：
【OpenHarmony 北向應(yīng)用開(kāi)發(fā)】ArkTS語(yǔ)言入門(mén)（構(gòu)建應(yīng)用頁(yè)面）-開(kāi)源基礎(chǔ)軟件社區(qū)
在其中又加入了fontColor屬性，用于改變文本顏色，當(dāng)然，也可以通過(guò)相同方法，引用存放在resouces目錄下Color文件，完成對(duì)文本顏色的改變，形如：
Test($r('app.string.EntryAbility_lable'))
.fontsize(50)
.fontColor($r('app.Color.lable_color'))“Button”----Button是一個(gè)按鈕組件，用于頁(yè)面與用戶(hù)的交互。
在上面的基礎(chǔ)上，我們加入Button組件。
Test($r('app.string.EntryAbility_lable'))
.fontsize(50)
.fontColor($r('app.Color.lable_color'))
Button('button')
.width(100)效果如圖：
【OpenHarmony 北向應(yīng)用開(kāi)發(fā)】ArkTS語(yǔ)言入門(mén)（構(gòu)建應(yīng)用頁(yè)面）-開(kāi)源基礎(chǔ)軟件社區(qū)
在Button后的括號(hào)中可以寫(xiě)入顯示在按鈕上的文本，并通過(guò)width屬性設(shè)置其大小，接著，我們可以通過(guò)形如
Button('button'，{type：ButtonType.Normal})
.width(100)來(lái)設(shè)置按鈕的形狀，編譯器會(huì)自動(dòng)提示如下類(lèi)型以供選擇：
【OpenHarmony 北向應(yīng)用開(kāi)發(fā)】ArkTS語(yǔ)言入門(mén)（構(gòu)建應(yīng)用頁(yè)面）-開(kāi)源基礎(chǔ)軟件社區(qū)
包括圓形，矩形，圓角矩形等。
“image”----image組件是用于圖片展示，使得我們的頁(yè)面不單單由文本組成，美化頁(yè)面的同時(shí)可以展示出更多的內(nèi)容，該組件支持本地圖片和網(wǎng)絡(luò)圖片的渲染展示。
在上面的基礎(chǔ)上，我們加入Image組件。
Test($r('app.string.EntryAbility_lable'))
.fontsize(50)
.fontColor($r('app.Color.lable_color'))
Button('button')
.width(100)
Image($r('app.media.loading'))
.width(100)
.height(100)效果如圖：
【OpenHarmony 北向應(yīng)用開(kāi)發(fā)】ArkTS語(yǔ)言入門(mén)（構(gòu)建應(yīng)用頁(yè)面）-開(kāi)源基礎(chǔ)軟件社區(qū)
Image組件有且只有一個(gè)參數(shù)，就是圖片的數(shù)據(jù)源，代碼示例是引用resouces目錄下已下載的文件進(jìn)行展示，接著通過(guò)width以及height屬性對(duì)圖片大小進(jìn)行調(diào)整，使得頁(yè)面變得協(xié)調(diào)。
