鴻蒙極速入門(四)-通過登錄Demo瞭解ArkTS

来源:https://www.cnblogs.com/anywherego/archive/2023/10/26/17789931.html
-Advertisement-
Play Games

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.tsonWindowStageCreate方法中通過windowStage.loadContent方法載入了登錄頁面作為啟動頁面:

windowStage.loadContent("pages/LoginPage")

2.頁面分析

pages和view文件夾

通過目錄可以發現,ArkTS將頁面分為兩類分別放在pagesview文件夾中:

兩者的區別:

  • 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,建議還是閱讀官方文檔:

ArkTS官方文檔地址


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 【學習課程】:【【小白入門 通俗易懂】2021韓順平 一周學會Linux】 https://www.bilibili.com/video/BV1Sv411r7vd/?p=14&share_source=copy_web&vd_source=2c07d62293f5003c919b2df9b2e054 ...
  • 電腦數據的表示 1. 數值數據的表示 1.1 各種進位數的表示 二進位 (Binary) :以 0b 或 0B 開頭,字元僅含0和1. 用下標2或者數字後面加B表示。如 $(1011)_2$ 或 $1011B$ 八進位 (Octal) :以 0o 或 0O 開頭,字元含0-7. 用下標8或者數字後 ...
  • 1. 圖論 1.1. 起源於萊昂哈德·歐拉在1736年發表的一篇關於“哥尼斯堡七橋問題”的論文 1.2. 要解決這個問題,該圖需要零個或兩個具有奇數連接的節點 1.3. 任何滿足這一條件的圖都被稱為歐拉圖 1.4. 如果路徑只訪問每條邊一次,則該圖具有歐拉路徑 1.5. 如果路徑起點和終點相同,則該 ...
  • 天下武功,無堅不摧,唯快不破!我的名字叫 Redis,全稱是 Remote Dictionary Server。 有人說,組 CP,除了要瞭解她外,還要給機會讓她瞭解你。 那麼,作為開發工程師的你,是否願意認真閱讀此心法抓住機會來瞭解我,運用到你的系統中提升性能。 我遵守 BSD 協議,由義大利人 ...
  • 一、背景 公元2023-10-12(周四)上午,組內的亞梅反饋,用戶生成標簽報死鎖異常 二、排查異常日誌 查到當時報錯的日誌 具體異常信息如下 server-provider-info-2023-10-12.0.log:2023-10-12 09:40:50.593 [TID:bf623bded18 ...
  • 在資料庫中,對象的創建者將成為該對象的所有者,具有對該對象進行查詢、修改和刪除等操作的許可權。同時,系統管理員也擁有與所有者相同的許可權。 ...
  • 本文介紹了視頻黑屏的可能原因和解決方案。主要原因包括用戶主動關閉視頻、網路問題和渲染問題。解決方案包括優化網路穩定性、確保視頻渲染視圖設置正確、提供清晰的提示、實時監測網路質量、使用詳細的日誌系統、開啟視頻預覽功能、使用視頻流回調、處理編解碼問題、處理許可權問題、自定義視頻渲染邏輯和使用實時反饋系統。... ...
  • 頁面路由指在應用程式中實現不同頁面之間的跳轉和數據傳遞。HarmonyOS提供了Router模塊,通過不同的url地址,可以方便地進行頁面路由,輕鬆地訪問不同的頁面。 一、基礎使用 Router模塊提供了兩種跳轉模式,分別是router.pushUrl()和router.replaceUrl()。這 ...
一周排行
    -Advertisement-
    Play Games
  • 一個自定義WPF窗體的解決方案,借鑒了呂毅老師的WPF製作高性能的透明背景的異形視窗一文,併在此基礎上增加了滑鼠穿透的功能。可以使得透明窗體的滑鼠事件穿透到下層,在下層窗體中響應。 ...
  • 在C#中使用RabbitMQ做個簡單的發送郵件小項目 前言 好久沒有做項目了,這次做一個發送郵件的小項目。發郵件是一個比較耗時的操作,之前在我的個人博客裡面回覆評論和友鏈申請是會通過發送郵件來通知對方的,不過當時只是簡單的進行了非同步操作。 那麼這次來使用RabbitMQ去統一發送郵件,我的想法是通過 ...
  • 當你使用Edge等瀏覽器或系統軟體播放媒體時,Windows控制中心就會出現相應的媒體信息以及控制播放的功能,如圖。 SMTC (SystemMediaTransportControls) 是一個Windows App SDK (舊為UWP) 中提供的一個API,用於與系統媒體交互。接入SMTC的好 ...
  • 最近在微軟商店,官方上架了新款Win11風格的WPF版UI框架【WPF Gallery Preview 1.0.0.0】,這款應用引入了前沿的Fluent Design UI設計,為用戶帶來全新的視覺體驗。 ...
  • 1.簡單使用實例 1.1 添加log4net.dll的引用。 在NuGet程式包中搜索log4net並添加,此次我所用版本為2.0.17。如下圖: 1.2 添加配置文件 右鍵項目,添加新建項,搜索選擇應用程式配置文件,命名為log4net.config,步驟如下圖: 1.2.1 log4net.co ...
  • 之前也分享過 Swashbuckle.AspNetCore 的使用,不過版本比較老了,本次演示用的示例版本為 .net core 8.0,從安裝使用開始,到根據命名空間分組顯示,十分的有用 ...
  • 在 Visual Studio 中,至少可以創建三種不同類型的類庫: 類庫(.NET Framework) 類庫(.NET 標準) 類庫 (.NET Core) 雖然第一種是我們多年來一直在使用的,但一直感到困惑的一個主要問題是何時使用 .NET Standard 和 .NET Core 類庫類型。 ...
  • WPF的按鈕提供了Template模板,可以通過修改Template模板中的內容對按鈕的樣式進行自定義。結合資源字典,可以將自定義資源在xaml視窗、自定義控制項或者整個App當中調用 ...
  • 實現了一個支持長短按得按鈕組件,單擊可以觸發Click事件,長按可以觸發LongPressed事件,長按鬆開時觸發LongClick事件。還可以和自定義外觀相結合,實現自定義的按鈕外形。 ...
  • 一、WTM是什麼 WalkingTec.Mvvm框架(簡稱WTM)最早開發與2013年,基於Asp.net MVC3 和 最早的Entity Framework, 當初主要是為瞭解決公司內部開發效率低,代碼風格不統一的問題。2017年9月,將代碼移植到了.Net Core上,併進行了深度優化和重構, ...