大家好，我是潘Sir，持續(xù)分享IT技術(shù)，幫你少走彎路?！而櫭蓱?yīng)用開發(fā)從入門到項(xiàng)目實(shí)戰(zhàn)》系列文章持續(xù)更新中，陸續(xù)更新AI+編程、企業(yè)級(jí)項(xiàng)目實(shí)戰(zhàn)等原創(chuàng)內(nèi)容、歡迎關(guān)注！

一、HarmonyOS應(yīng)用開發(fā)相關(guān)概念

在具體開發(fā)鴻蒙應(yīng)用之前，需要先了解有關(guān)HarmonyOS應(yīng)用的一些基本概念：UI框架的簡(jiǎn)單說明、應(yīng)用模型的基本概念。

1.1 UI框架

HarmonyOS提供了一套UI開發(fā)框架，即方舟開發(fā)框架（ArkUI框架）。方舟開發(fā)框架可為開發(fā)者提供應(yīng)用UI開發(fā)所必需的能力，比如多種組件、布局計(jì)算、動(dòng)畫能力、UI交互、繪制等。

方舟開發(fā)框架針對(duì)不同目的和技術(shù)背景的開發(fā)者提供了兩種開發(fā)范式，分別是基于ArkTS的聲明式開發(fā)范式（簡(jiǎn)稱“聲明式開發(fā)范式”）和兼容JS的類Web開發(fā)范式（簡(jiǎn)稱“類Web開發(fā)范式”）。以下是兩種開發(fā)范式的簡(jiǎn)單對(duì)比。

1.2 應(yīng)用模型

應(yīng)用模型是HarmonyOS為開發(fā)者提供的應(yīng)用程序所需能力的抽象提煉，它提供了應(yīng)用程序必備的組件和運(yùn)行機(jī)制。有了應(yīng)用模型，開發(fā)者可以基于一套統(tǒng)一的模型進(jìn)行應(yīng)用開發(fā)，使應(yīng)用開發(fā)更簡(jiǎn)單、高效。

隨著系統(tǒng)的演進(jìn)發(fā)展，HarmonyOS先后提供了兩種應(yīng)用模型：

• FA（Feature Ability）模型： HarmonyOS API 7開始支持的模型，已經(jīng)不再主推。

• Stage模型： HarmonyOS API 9開始新增的模型，是目前主推且會(huì)長(zhǎng)期演進(jìn)的模型。在該模型中，由于提供了AbilityStage、WindowStage等類作為應(yīng)用組件和Window窗口的“舞臺(tái)”，因此稱這種應(yīng)用模型為Stage模型。

  了解鴻蒙應(yīng)用開發(fā)相關(guān)概念后，接下來進(jìn)入U(xiǎn)I的開發(fā)。

二、UI開發(fā)概述

方舟開發(fā)框架（簡(jiǎn)稱ArkUI）為HarmonyOS應(yīng)用的UI開發(fā)提供了完整的基礎(chǔ)設(shè)施，包括簡(jiǎn)潔的UI語法、豐富的UI功能（組件、布局、動(dòng)畫以及交互事件），以及實(shí)時(shí)界面預(yù)覽工具等，可以支持開發(fā)者進(jìn)行可視化界面開發(fā)。

1.1 基本概念

UI：

即用戶界面。開發(fā)者可以將應(yīng)用的用戶界面設(shè)計(jì)為多個(gè)功能頁面，每個(gè)頁面進(jìn)行單獨(dú)的文件管理，并通過頁面路由API完成頁面間的調(diào)度管理如跳轉(zhuǎn)、回退等操作，以實(shí)現(xiàn)應(yīng)用內(nèi)的功能解耦。 組件：

UI構(gòu)建與顯示的最小單位，如列表、網(wǎng)格、按鈕、單選框、進(jìn)度條、文本等。開發(fā)者通過多種組件的組合，構(gòu)建出滿足自身應(yīng)用訴求的完整界面。

1.2 兩種開發(fā)范式

針對(duì)不同的應(yīng)用場(chǎng)景及技術(shù)背景，方舟開發(fā)框架提供了兩種開發(fā)范式，分別是：基于ArkTS的聲明式開發(fā)范式（檢簡(jiǎn)稱”聲明式開發(fā)范式“）和兼容JS的類Web開發(fā)范式(簡(jiǎn)稱”類Web開發(fā)范式“ )。

• 聲明式開發(fā)范式：

  采用基于TypeScript聲明式UI語法擴(kuò)展而來的ArkTS語言，從組件、動(dòng)畫和狀態(tài)管理三個(gè)維度提供UI繪制能力。

• 類Web開發(fā)范式：

  采用經(jīng)典的HML、CSS、JavaScript三段式開發(fā)方式，即使用HML標(biāo)簽文件搭建布局、使用CSS文件描述樣式、使用JavaScript文件處理邏輯。該范式更符合于Web前端開發(fā)者的使用習(xí)慣，便于快速將已有的Web應(yīng)用改造成方舟開發(fā)框架應(yīng)用。

在開發(fā)一款新應(yīng)用時(shí)，推薦采用聲明式開發(fā)范式來構(gòu)建UI，主要基于以下幾點(diǎn)考慮：

• 開發(fā)效率：聲明式開發(fā)范式更接近自然語義的編程方式，開發(fā)者可以直觀地描述UI，無需關(guān)心如何實(shí)現(xiàn)UI繪制和渲染，開發(fā)高效簡(jiǎn)潔。

• 應(yīng)用性能：如下圖方舟開發(fā)框架示意圖所示，兩種開發(fā)范式的UI后端引擎和語言運(yùn)行時(shí)是共用的，但是相比類Web開發(fā)范式，聲明式開發(fā)范式無需JS框架進(jìn)行頁面DOM管理，渲染更新鏈路更為精簡(jiǎn)，占用內(nèi)存更少，應(yīng)用性能更佳。

1方舟開發(fā)框架示意圖.png

圖 方舟開發(fā)框架示意圖

• 發(fā)展趨勢(shì)：聲明式開發(fā)范式后續(xù)會(huì)作為主推的開發(fā)范式持續(xù)演進(jìn)，為開發(fā)者提供更豐富、更強(qiáng)大的能力。

1.3 不同應(yīng)用類型支持的開發(fā)范式

根據(jù)所選用HarmonyOS應(yīng)用模型（Stage模型、FA模型）和頁面形態(tài)（應(yīng)用或服務(wù)的普通頁面、卡片）的不同，對(duì)應(yīng)支持的UI開發(fā)范式也有所差異，詳見下表。

表 支持的UI開發(fā)范式

三、基于ArkTS的聲明式開發(fā)范式

基于ArkTS的聲明式開發(fā)范式的方舟開發(fā)框架是一套開發(fā)極簡(jiǎn)、高性能、支持跨設(shè)備的UI開發(fā)框架，提供了構(gòu)建HarmonyOS應(yīng)用UI所必需的能力，主要包括：

• ArkTS ArkTS是HarmonyOS優(yōu)選的主力應(yīng)用開發(fā)語言，圍繞應(yīng)用開發(fā)在TypeScript（簡(jiǎn)稱TS）生態(tài)基礎(chǔ)上做了進(jìn)一步擴(kuò)展。擴(kuò)展能力包含聲明式UI描述、自定義組件、動(dòng)態(tài)擴(kuò)展UI元素、狀態(tài)管理和渲染控制。狀態(tài)管理作為基于ArkTS的聲明式開發(fā)范式的特色，通過功能不同的裝飾器給開發(fā)者提供了清晰的頁面更新渲染流程和管道。狀態(tài)管理包括UI組件狀態(tài)和應(yīng)用程序狀態(tài)，兩者協(xié)作可以使開發(fā)者完整地構(gòu)建整個(gè)應(yīng)用的數(shù)據(jù)更新和UI渲染。

• 布局

  布局是UI的必要元素，它定義了組件在界面中的位置。ArkUI框架提供了多種布局方式，除了基礎(chǔ)的線性布局、層疊布局、彈性布局、相對(duì)布局、柵格布局外，也提供了相對(duì)復(fù)雜的列表、宮格、輪播。

• 組件

  組件是UI的必要元素，形成了在界面中的樣子，由框架直接提供的稱為系統(tǒng)組件，由開發(fā)者定義的稱為自定義組件。系統(tǒng)內(nèi)置組件包括按鈕、單選框、進(jìn)度條、文本等。開發(fā)者可以通過鏈?zhǔn)秸{(diào)用的方式設(shè)置系統(tǒng)內(nèi)置組件的渲染效果。開發(fā)者可以將系統(tǒng)內(nèi)置組件組合為自定義組件，通過這種方式將頁面組件化為一個(gè)個(gè)獨(dú)立的UI單元，實(shí)現(xiàn)頁面不同單元的獨(dú)立創(chuàng)建、開發(fā)和復(fù)用，具有更強(qiáng)的工程性。

• 頁面路由和組件導(dǎo)航

  應(yīng)用可能包含多個(gè)頁面，可通過頁面路由實(shí)現(xiàn)頁面間的跳轉(zhuǎn)。一個(gè)頁面內(nèi)可能存在組件間的導(dǎo)航如典型的分欄，可通過導(dǎo)航組件實(shí)現(xiàn)組件間的導(dǎo)航。

• 圖形

  方舟開發(fā)框架提供了多種類型圖片的顯示能力和多種自定義繪制的能力，以滿足開發(fā)者的自定義繪圖需求，支持繪制形狀、填充顏色、繪制文本、變形與裁剪、嵌入圖片等。

• 動(dòng)畫

  動(dòng)畫是UI的重要元素之一。優(yōu)秀的動(dòng)畫設(shè)計(jì)能夠極大地提升用戶體驗(yàn)，框架提供了豐富的動(dòng)畫能力，除了組件內(nèi)置動(dòng)畫效果外，還包括屬性動(dòng)畫、顯式動(dòng)畫、自定義轉(zhuǎn)場(chǎng)動(dòng)畫以及動(dòng)畫API等，開發(fā)者可以通過封裝的物理模型或者調(diào)用動(dòng)畫能力API來實(shí)現(xiàn)自定義動(dòng)畫軌跡。

• 交互事件

  交互事件是UI和用戶交互的必要元素。方舟開發(fā)框架提供了多種交互事件，除了觸摸事件、鼠標(biāo)事件、鍵盤按鍵事件、焦點(diǎn)事件等通用事件外，還包括基于通用事件進(jìn)行進(jìn)一步識(shí)別的手勢(shì)事件。手勢(shì)事件有單一手勢(shì)如點(diǎn)擊手勢(shì)、長(zhǎng)按手勢(shì)、拖動(dòng)手勢(shì)、捏合手勢(shì)、旋轉(zhuǎn)手勢(shì)、滑動(dòng)手勢(shì)，以及通過單一手勢(shì)事件進(jìn)行組合的組合手勢(shì)事件。

2.1 特點(diǎn)

• 開發(fā)效率高，開發(fā)體驗(yàn)好

  • 代碼簡(jiǎn)潔：通過接近自然語義的方式描述UI，不必關(guān)心框架如何實(shí)現(xiàn)UI繪制和渲染。

  • 數(shù)據(jù)驅(qū)動(dòng)UI變化：讓開發(fā)者更專注自身業(yè)務(wù)邏輯的處理。當(dāng)UI發(fā)生變化時(shí)，開發(fā)者無需編寫在不同的UI之間進(jìn)行切換的UI代碼， 開發(fā)人員僅需要編寫引起界面變化的數(shù)據(jù)，具體UI如何變化交給框架。

  • 開發(fā)體驗(yàn)好：界面也是代碼，讓開發(fā)者的編程體驗(yàn)得到提升。

• 性能優(yōu)越

  • 聲明式UI前端和UI后端分層：UI后端采用C++語言構(gòu)建，提供對(duì)應(yīng)前端的基礎(chǔ)組件、布局、動(dòng)效、交互事件、組件狀態(tài)管理和渲染管線。

  • 語言編譯器和運(yùn)行時(shí)的優(yōu)化：統(tǒng)一字節(jié)碼、高效FFI-Foreign Function Interface、AOT-Ahead Of Time、引擎極小化、類型優(yōu)化等。

• 生態(tài)容易快速推進(jìn)

  能夠借力主流語言生態(tài)快速推進(jìn)，語言相對(duì)中立友好，有相應(yīng)的標(biāo)準(zhǔn)組織可以逐步演進(jìn)。

2.2 整體架構(gòu)

2聲明式開發(fā)范式整體架構(gòu).png

聲明式開發(fā)范式整體架構(gòu)

• 聲明式UI前端

  提供了UI開發(fā)范式的基礎(chǔ)語言規(guī)范，并提供內(nèi)置的UI組件、布局和動(dòng)畫，提供了多種狀態(tài)管理機(jī)制，為應(yīng)用開發(fā)者提供一系列接口支持。

• 語言運(yùn)行時(shí)

  選用方舟語言運(yùn)行時(shí)，提供了針對(duì)UI范式語法的解析能力、跨語言調(diào)用支持的能力和TS語言高性能運(yùn)行環(huán)境。

• 聲明式UI后端引擎

  后端引擎提供了兼容不同開發(fā)范式的UI渲染管線，提供多種基礎(chǔ)組件、布局計(jì)算、動(dòng)效、交互事件，提供了狀態(tài)管理和繪制能力。

• 渲染引擎

  提供了高效的繪制能力，將渲染管線收集的渲染指令，繪制到屏幕的能力。

• 平臺(tái)適配層

  提供了對(duì)系統(tǒng)平臺(tái)的抽象接口，具備接入不同系統(tǒng)的能力，如系統(tǒng)渲染管線、生命周期調(diào)度等。

2.3 開發(fā)流程

通過構(gòu)建一個(gè)簡(jiǎn)單的具有頁面跳轉(zhuǎn)/返回功能的應(yīng)用（如下圖所示），快速了解工程目錄的主要文件，熟悉HarmonyOS應(yīng)用開發(fā)流程。

3ui開發(fā)案例.png

本例演示使用Stage模型構(gòu)建ArkTS應(yīng)用，如果使用FA模型請(qǐng)參考官網(wǎng)。當(dāng)前主推Stage模型，所以FA模型不再演示。

2.3.1 創(chuàng)建ArkTS工程

前面章節(jié)一演示創(chuàng)建過第一個(gè)HarmonyOS應(yīng)用，按相同方法創(chuàng)建項(xiàng)目：

（1）若首次打開DevEco Studio，請(qǐng)點(diǎn)擊Create Project創(chuàng)建工程。如果已經(jīng)打開了一個(gè)工程，請(qǐng)?jiān)诓藛螜谶x擇File > New > Create Project來創(chuàng)建一個(gè)新工程。

（2）選擇Application應(yīng)用開發(fā)（本文以應(yīng)用開發(fā)為例，Atomic Service對(duì)應(yīng)為元服務(wù)開發(fā)），選擇模板“Empty Ability”，點(diǎn)擊Next進(jìn)行下一步配置。

image.png

（3）進(jìn)入配置工程界面，Compile SDK選擇“3.1.0(API 9)”，Model 選擇“Stage”，其他參數(shù)保持默認(rèn)設(shè)置即可。

5配置項(xiàng)目.png

支持使用ArkTS低代碼開方式。

低代碼開發(fā)方式具有豐富的UI界面編輯功能，通過可視化界面開發(fā)方式快速構(gòu)建布局，可有效降低開發(fā)者的上手成本并提升開發(fā)者構(gòu)建UI界面的效率。

如需使用低代碼開發(fā)方式，請(qǐng)打開上圖中的Enable Super Visual開關(guān)。

(4) 點(diǎn)擊Finish，工具會(huì)自動(dòng)生成示例代碼和相關(guān)資源，等待工程創(chuàng)建完成。

6stage模型目錄結(jié)構(gòu).png

ArkTS工程目錄結(jié)構(gòu)（Stage模型）

目錄含義解釋：

• AppScope > app.json5：應(yīng)用的全局配置信息。

• entry：HarmonyOS工程模塊，編譯構(gòu)建生成一個(gè)HAP包。

  • src > main > ets：用于存放ArkTS源碼。

  • src > main > ets > entryability：應(yīng)用/服務(wù)的入口。

  • src > main > ets > pages：應(yīng)用/服務(wù)包含的頁面。

  • src > main > resources：用于存放應(yīng)用/服務(wù)所用到的資源文件，如圖形、多媒體、字符串、布局文件等。

  • src > main > module.json5：Stage模型模塊配置文件。主要包含HAP包的配置信息、應(yīng)用/服務(wù)在具體設(shè)備上的配置信息以及應(yīng)用/服務(wù)的全局配置信息。

  • build-profile.json5：當(dāng)前的模塊信息、編譯信息配置項(xiàng)，包括buildOption、targets配置等。其中targets中可配置當(dāng)前運(yùn)行環(huán)境，默認(rèn)為HarmonyOS。

  • hvigorfile.ts：模塊級(jí)編譯構(gòu)建任務(wù)腳本，開發(fā)者可以自定義相關(guān)任務(wù)和代碼實(shí)現(xiàn)。

• oh_modules：用于存放三方庫依賴信息。

• build-profile.json5：應(yīng)用級(jí)配置信息，包括簽名、產(chǎn)品配置等。

• hvigorfile.ts：應(yīng)用級(jí)編譯構(gòu)建任務(wù)腳本。

2.3.2 構(gòu)建第一個(gè)頁面

（1）默認(rèn)界面使用文本組件

工程同步完成后，在“Project”窗口，點(diǎn)擊“entry > src > main > ets > pages”，打開“Index.ets”文件，可以看到頁面由Text組件組成?！?strong>Index.ets”文件的示例如下：

// Index.ets
@Entry
@Component
struct Index {
 @State message: string = 'Hello World'

 build() {
 Row() {
 Column() {
 Text(this.message)
 .fontSize(50)
 .fontWeight(FontWeight.Bold)
 }
 .width('100%')
 }
 .height('100%')
 }
}

(2) 添加按鈕

在默認(rèn)頁面基礎(chǔ)上，我們添加一個(gè)Button組件，作為按鈕響應(yīng)用戶點(diǎn)擊，從而實(shí)現(xiàn)跳轉(zhuǎn)到另一個(gè)頁面?！?strong>Index.ets”文件的示例如下：

// Index.ets
@Entry
@Component
struct Index {
 @State message: string = 'Hello World'

 build() {
 Row() {
 Column() {
 Text(this.message)
 .fontSize(50)
 .fontWeight(FontWeight.Bold)
 // 添加按鈕，以響應(yīng)用戶點(diǎn)擊
 Button() {
 Text('Next')
 .fontSize(30)
 .fontWeight(FontWeight.Bold)
 }
 .type(ButtonType.Capsule)
 .margin({
 top: 20
 })
 .backgroundColor('#0D9FFB')
 .width('40%')
 .height('5%')
 }
 .width('100%')
 }
 .height('100%')
 }
}

(3) 在編輯窗口右上角的側(cè)邊工具欄，點(diǎn)擊Previewer，打開預(yù)覽器。第一個(gè)頁面效果如下圖所示：

7第一個(gè)界面.png

2.4.3 構(gòu)建第二個(gè)頁面

（1）新建第二個(gè)頁面文件。在“Project”窗口，打開“entry > src > main > ets ”，右鍵點(diǎn)擊“pages”文件夾，選擇“New > ArkTS File”，命名為“Second”，點(diǎn)擊“Finish”?？梢钥吹轿募夸浗Y(jié)構(gòu)如下：

8新建第二個(gè)界面.png

也可以在右鍵點(diǎn)擊“pages”文件夾時(shí)，選擇“New > Page”，則無需手動(dòng)配置相關(guān)頁面路由。

(2) 配置第二個(gè)頁面的路由。在“Project”窗口，打開“entry > src > main > resources > base > profile”，在main_pages.json文件中的“src”下配置第二個(gè)頁面的路由“pages/Second”。示例如下：

{
 "src": [
 "pages/Index",
 "pages/Second"
 ]
}

(3) 添加文本及按鈕

參照第一個(gè)頁面，在第二個(gè)頁面添加Text組件、Button組件等，并設(shè)置其樣式?！?strong>Second.ets”文件的示例如下：

// Second.ets
@Entry
@Component
struct Second {
 @State message: string = 'Hi there'

 build() {
 Row() {
 Column() {
 Text(this.message)
 .fontSize(50)
 .fontWeight(FontWeight.Bold)
 Button() {
 Text('Back')
 .fontSize(25)
 .fontWeight(FontWeight.Bold)
 }
 .type(ButtonType.Capsule)
 .margin({
 top: 20
 })
 .backgroundColor('#0D9FFB')
 .width('40%')
 .height('5%')
 }
 .width('100%')
 }
 .height('100%')
 }
}

2.4.4 實(shí)現(xiàn)頁面間的跳轉(zhuǎn)

頁面間的導(dǎo)航可以通過頁面路由router來實(shí)現(xiàn)。頁面路由router根據(jù)頁面url找到目標(biāo)頁面，從而實(shí)現(xiàn)跳轉(zhuǎn)。使用頁面路由請(qǐng)導(dǎo)入router模塊。

（1）第一個(gè)頁面跳轉(zhuǎn)到第二個(gè)頁面

在第一個(gè)頁面中，跳轉(zhuǎn)按鈕綁定onClick事件，點(diǎn)擊按鈕時(shí)跳轉(zhuǎn)到第二頁?！?strong>Index.ets”文件的示例如下：

// Index.ets
// 導(dǎo)入頁面路由模塊
import router from '@ohos.router';

@Entry
@Component
struct Index {
 @State message: string = 'Hello World'

 build() {
 Row() {
 Column() {
 Text(this.message)
 .fontSize(50)
 .fontWeight(FontWeight.Bold)
 // 添加按鈕，以響應(yīng)用戶點(diǎn)擊
 Button() {
 Text('Next')
 .fontSize(30)
 .fontWeight(FontWeight.Bold)
 }
 .type(ButtonType.Capsule)
 .margin({
 top: 20
 })
 .backgroundColor('#0D9FFB')
 .width('40%')
 .height('5%')
 // 跳轉(zhuǎn)按鈕綁定onClick事件，點(diǎn)擊時(shí)跳轉(zhuǎn)到第二頁
 .onClick(() => {
 console.info(`Succeeded in clicking the 'Next' button.`)
 // 跳轉(zhuǎn)到第二頁
 router.pushUrl({ url: 'pages/Second' }).then(() => {
 console.info('Succeeded in jumping to the second page.')
 }).catch((err) => {
 console.error(`Failed to jump to the second page.Code is ${err.code}, message is ${err.message}`)
 })
 })
 }
 .width('100%')
 }
 .height('100%')
 }
}

(2) 第二個(gè)頁面返回到第一個(gè)頁面

在第二個(gè)頁面中，返回按鈕綁定onClick事件，點(diǎn)擊按鈕時(shí)返回到第一頁。“Second.ets”文件的示例如下：

// Second.ets
// 導(dǎo)入頁面路由模塊
import router from '@ohos.router';

@Entry
@Component
struct Second {
 @State message: string = 'Hi there'

 build() {
 Row() {
 Column() {
 Text(this.message)
 .fontSize(50)
 .fontWeight(FontWeight.Bold)
 Button() {
 Text('Back')
 .fontSize(25)
 .fontWeight(FontWeight.Bold)
 }
 .type(ButtonType.Capsule)
 .margin({
 top: 20
 })
 .backgroundColor('#0D9FFB')
 .width('40%')
 .height('5%')
 // 返回按鈕綁定onClick事件，點(diǎn)擊按鈕時(shí)返回到第一頁
 .onClick(() => {
 console.info(`Succeeded in clicking the 'Back' button.`)
 try {
 // 返回第一頁
 router.back()
 console.info('Succeeded in returning to the first page.')
 } catch (err) {
 console.error(`Failed to return to the first page.Code is ${err.code}, message is ${err.message}`)
 }
 })
 }
 .width('100%')
 }
 .height('100%')
 }
}

(3) 打開“Index.ets”文件，點(diǎn)擊預(yù)覽器中的”Refresh“刷新按鈕進(jìn)行刷新。效果如下圖所示

9預(yù)覽效果.png

除了采用預(yù)覽方式外，還可以按前面章節(jié)講解的通過模擬器或真機(jī)進(jìn)行調(diào)試。

《鴻蒙應(yīng)用開發(fā)從入門到項(xiàng)目實(shí)戰(zhàn)》系列文章持續(xù)更新中，陸續(xù)更新AI+編程、企業(yè)級(jí)項(xiàng)目實(shí)戰(zhàn)等原創(chuàng)內(nèi)容，防止迷路，歡迎關(guān)注！