簡(jiǎn)介

ArkTS是HarmonyOS優(yōu)選的主力應(yīng)用開(kāi)發(fā)語(yǔ)言。它在TypeScript（簡(jiǎn)稱TS）的基礎(chǔ)上，擴(kuò)展了聲明式UI、狀態(tài)管理等相應(yīng)的能力，讓開(kāi)發(fā)者可以以更簡(jiǎn)潔、更自然的方式開(kāi)發(fā)高性能應(yīng)用。TS是JavaScript（簡(jiǎn)稱JS）的超集，ArkTS則是TS的超集。ArkTS會(huì)結(jié)合應(yīng)用開(kāi)發(fā)和運(yùn)行的需求持續(xù)演進(jìn)，包括但不限于引入分布式開(kāi)發(fā)范式、并行和并發(fā)能力增強(qiáng)、類型系統(tǒng)增強(qiáng)等方面的語(yǔ)言特性；下面是官網(wǎng)對(duì)ArkUI框架的一個(gè)整體介紹

ArkTS 聲明式的基本組成

創(chuàng)建hello world 項(xiàng)目的時(shí)候，我們可以看到ide 創(chuàng)建了默認(rèn)的index 頁(yè)面，其中的代碼為

@Entry
@Component
struct Index {@State message: string = 'Hello World'build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)}.width('100%')}.height('100%')}
}

根據(jù)這個(gè)我們來(lái)介紹一下ArkTS里面涉及的語(yǔ)法

裝飾器

是裝飾類、結(jié)構(gòu)、方法和變量，賦予其特殊的含義

@Component

@Component 表示自定義組件,是可以復(fù)用的ui 單元，可以組合其他組件。
系統(tǒng)提供了豐富的內(nèi)置組件：Text、Button、Image、TextInput、Row等

@Component
struct TitleComponent{build(){}
}

通過(guò)@Component 裝飾器 和struct 關(guān)鍵字組合起來(lái)告知系統(tǒng)這是一個(gè)組件
build 方法，在其中進(jìn)行ui 描述

@Entry

裝飾的自定義組件用作頁(yè)面的默認(rèn)入口組件，加載頁(yè)面時(shí)，將首先創(chuàng)建并呈現(xiàn)@Entry裝飾的自定義組件；需要注意的點(diǎn)：

• 一個(gè)頁(yè)面有且僅有能有一個(gè)@Entry;
• 只有被@Entry修飾的組件或者子組件才會(huì)在頁(yè)面上顯示

@Entry
@Component
struct HomePage{build(){Column(){}}isRenderText(){}
}

通常情況下，子組件和父組件在不同的文件中，則可以使用導(dǎo)出方式，以供外部使用。使用關(guān)鍵字 export
在子組件中的代碼為：

@Component
export  struct TitleComponent{build(){}
}

import {TitleComponent} from '../components/TitleComponent'@Entry
@Component
struct Index {@State message: string = 'Hello World'build() {Row() {Column() {TitleComponent()Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)}.width('100%')}.height('100%')}
}

@State

被他裝飾的變量值發(fā)生改變時(shí)，會(huì)觸發(fā)該變量所對(duì)應(yīng)的自定義組件的UI界面進(jìn)行刷新。

import {TitleComponent} from '../components/TitleComponent'@Entry
@Component
struct Index {@State message: string = 'Hello World'build() {Row() {Column() {TitleComponent()Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)}.width('100%')}.height('100%').onClick(()=>{})}
}

不同組件之間數(shù)據(jù)變化控制ui更新，通常使用@State 和 @Link配合實(shí)現(xiàn)

@Component
export struct TitleComponent{@Link isRefreshData: boolean;message: string = 'Hello World111'build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)}.width('100%').onClick(()=>{this.isRefreshData=!this.isRefreshData})}}
}

isRefreshData未出實(shí)話，需要父組件在創(chuàng)建組件時(shí)來(lái)賦值，在父組件中通過(guò) $ 操作符創(chuàng)建 引用

import {TitleComponent} from '../components/TitleComponent'@Entry
@Component
struct Index {@State message: string = 'Hello World'@State isSwitchData: boolean = true;build() {Row() {Column() {TitleComponent({isRefreshData:$isSwitchData})Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)}.width('100%')}.height('100%').onClick(()=>{})}
}