鴻蒙極速入門(四)-通過登錄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
  • 當使用Autofac處理一個介面有多個實現的情況時,通常會使用鍵(key)進行區分或者通過IIndex索引註入,也可以通過IEnumerable集合獲取所有實例,以下是一個具體的例子,演示如何在Autofac中註冊多個實現,並通過構造函數註入獲取指定實現。 首先,確保你已經安裝了Autofac Nu ...
  • 本篇將分享Prometheus+Grafana的監控平臺搭建,並監控之前文章所搭建的主機&服務,分享日常使用的一些使用經驗本篇將配置常用服務的監控與面板配置:包括 MySQL,MongoDB,CLickHouse,Redis,RabbitMQ,Linux,Windows,Nginx,站點訪問監控,已... ...
  • 使用Aspirate可以將Aspire程式部署到Kubernetes 集群 工具安裝 dotnet tool install -g aspirate --prerelease 註意:Aspirate 正在開發中,該軟體包將作為預覽版進行版本控制,--prelease 選項將獲得最新的預覽版。 容器註 ...
  • 前言 本文要說的這種開發模式,這種模式並不是只有blazor支持,js中有一樣的方案next.js nuxt.js;blazor還有很多其它內容,本文近關註漸進式開發模式。 是的,前後端是主流,不過以下情況也許前後端分離並不是最好的選擇: 小公司,人員不多,利潤不高,創業階段能省則省 個人開發者,接 ...
  • 在.NET中,Microsoft.Extensions.Logging是一個靈活的日誌庫,它允許你將日誌信息記錄到各種不同的目標,包括資料庫。在這個示例中,我將詳細介紹如何使用Microsoft.Extensions.Logging將日誌保存到MySQL資料庫。我們將使用Entity Framewo ...
  • chatgpt介面開發筆記3: 語音識別介面 1.文本轉語音 1、瞭解介面參數 介面地址: POST https://api.openai.com/v1/audio/speech 下麵是介面文檔描述內容: 參數: { "model": "tts-1", "input": "你好,我是饒坤,我是ter ...
  • 前面兩篇文章主要是介紹瞭如何解決高併發情況下資源爭奪的問題。但是現實的應用場景中除了要解決資源爭奪問題,高併發的情況還需要解決更多問題,比如快速處理業務數據等, 本篇文章簡要羅列一下與之相關的更多技術細節。 1、非同步編程:使用async和await關鍵字進行非同步編程,這可以避免阻塞線程,提高程式的響 ...
  • 大家好,我是棧長。 Nacos 2.3.0 前幾天正式發佈了,新增了不少實用性的新功能,真是史上最強版本。 Nacos 2.3.0 還真是一個比較重要的大版本,因為它涉及了太多重大更新,今天棧長給大家來解讀下。 Nacos 先掃個盲: Nacos 一個用於構建雲原生應用的動態服務發現、配置管理和服務 ...
  • IDEA的遠程開發功能,可以將本地的編譯、構建、調試、運行等工作都放在遠程伺服器上執行,而本地僅運行客戶端軟體進行常規的開發操作即可,舊版本IDEA目前不支持該功能.,本例使用的是IDEA2023.2.5版本 下麵介紹如何在IDEA中設置遠程連接伺服器開發環境並結合Cpolar內網穿透工具實現無公網 ...
  • 本文解釋為啥會有響應式編程,為什麼它在開發者中不太受歡迎,以及引入 Java 虛擬線程後它可能最終會消失。 命令式風格編程一直深受開發者喜愛,如 if-then-else、while 迴圈、函數和代碼塊等結構使代碼易理解、調試,異常易追蹤。然而,像所有好的東西一樣,通常也有問題。這種編程風格導致線程 ...