鴻蒙極速入門(四)-通過登錄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
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...