ArkTS是HarmonyOS優選的主力應用開發語言。ArkTS圍繞應用開發在TypeScript(簡稱TS)生態基礎上做了進一步擴展,繼承了TS的所有特性,是TS的超集。 ArkTS在TS的基礎上主要擴展瞭如下能力: 基本語法:ArkTS定義了聲明式UI描述、自定義組件和動態擴展UI元素的能力,再 ...
ArkTS是HarmonyOS優選的主力應用開發語言。ArkTS圍繞應用開發在TypeScript(簡稱TS)生態基礎上做了進一步擴展,繼承了TS的所有特性,是TS的超集。
ArkTS在TS的基礎上主要擴展瞭如下能力:
- 基本語法:ArkTS定義了聲明式UI描述、自定義組件和動態擴展UI元素的能力,再配合ArkUI開發框架中的系統組件及其相關的事件方法、屬性方法等共同構成了UI開發的主體。
- 狀態管理:ArkTS提供了多維度的狀態管理機制。在UI開發框架中,與UI相關聯的數據可以在組件內使用,也可以在不同組件層級間傳遞,比如父子組件之間、爺孫組件之間,還可以在應用全局範圍內傳遞或跨設備傳遞。另外,從數據的傳遞形式來看,可分為只讀的單向傳遞和可變更的雙向傳遞。開發者可以靈活的利用這些能力來實現數據和UI的聯動
- 渲染控制:ArkTS提供了渲染控制的能力。條件渲染可根據應用的不同狀態,渲染對應狀態下的UI內容。迴圈渲染可從數據源中迭代獲取數據,併在每次迭代過程中創建相應的組件。數據懶載入從數據源中按需迭代數據,併在每次迭代過程中創建相應的組件。
以上就是官方對於ArkTS的介紹,對於初學者來說並不算友好,所以我們通過一個登錄Demo來瞭解一下ArkTS。
一、創建工程
打開DevEco Studio,點擊Create Project,或通過DevEco Studio的菜單File > New > Create Project
下拉工程模版,在最後選擇Login Ability
創建完成後的源碼目錄:
啟動工程
二、工程分析
1.UIAbility管理應用的生命周期方法
根據官方文檔UIAbility組件生命周期中的描述,下麵是一個應用的生命周期
和對應的生命周期時序圖:
所以,登錄demo中的EntryAbility.ts
在onWindowStageCreate
方法中通過windowStage.loadContent方法載入了登錄頁面作為啟動頁面:
windowStage.loadContent("pages/LoginPage")
2.頁面分析
pages和view文件夾
通過目錄可以發現,ArkTS將頁面分為兩類分別放在pages
和view
文件夾中:
兩者的區別:
pages
文件夾存放的是一個個獨立的頁面文件,每個文件有@Entry
註解來告訴系統這是一個獨立頁面的入口,也有@Component
註解說明是一個頁面文件view
文件夾存放的是一個個可以被覆用的頁面文件,每個文件只有@Component
註解
簡單類比@Entry和@Component
的文件就是iOS中的ViewController和Android中的Activity,@Component
註解的文件就是iOS中的View和Android中的Fragment+View
@Entry頁面
進入LoginPages.ets主頁面:
- 通過
@Entry和@Component
的頁面才是獨立頁面 - 頁面使用
struct
作為定義關鍵字,不是class - 通過
import
關鍵字引入頁面和自定義組件 - 頁面的內容必須通過
build
方法構建,與Flutter的寫法類似 - 如果不是自定義組件,只是構建一個小模塊,比如標題內容的方法
Title()
,前面要使用@Builder
註解進行說明
@Component組件
進入LoginComponent.ets子組件:
與@Entry不一樣的地方:
- 通過
@Component
的頁面是一個獨立頁面的子組件,無法獨立展示 - 它的生命周期受到父組件的管理
三、狀態管理和渲染控制
與Flutter與SwifitUI類似,ArkTS也是通過State來進行狀態管理和渲染控制,在上面的登錄demo中的LoginComponent.ets
中:
- 通過
@State
定義了userName和password兩個狀態對象 - 通過監聽TextInput的onChange方法修改狀態對象的值
- userName和password的值變更後,會自動觸發Button的enable的渲染狀態的變更
四、官方文檔
通過上面的登錄demo,對ArkTS有了一個基本瞭解,如果需要更進一步瞭解ArkTS,建議還是閱讀官方文檔: