ArkUI：提供HarmonyOS應(yīng)用UI開發(fā)框架，幾件開發(fā)、精致體驗、跨設(shè)備/跨平臺。

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

• 聲明式開發(fā)范式：采用基于TypeScript聲明式UI語法擴展而來的ArkTS語言，從組件、動畫和狀態(tài)管理三個維度提供UI繪制能力。

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

1、ArkUI框架結(jié)構(gòu)

• ?開發(fā)模型層：提供了UI開發(fā)范式的基礎(chǔ)語言規(guī)范，并提供內(nèi)置的UI組件、布局和動畫，提供了多種狀態(tài)管理機制，為應(yīng)用開發(fā)者提供一系列接口支持。
• 引擎層：后端引擎提供了兼容不同開發(fā)范式的UI渲染管線，提供多種基礎(chǔ)組件、布局計算、動銷、交互事件，提供了狀態(tài)管理和繪制能力。提供了高效的繪制能力，將渲染管線收集的渲染指令，會知道屏幕能力。
• 平臺抽象層：提供了針對不同操作系統(tǒng)渲染層的適配，可抹平不同平臺的接口差異，實現(xiàn)ArkUI框架的多平臺一致性，

?

????????????????????????????????方舟UI框架示意圖

2、ArkUI的優(yōu)點

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

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

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

3、ArkUI的特性

?

應(yīng)用模型	頁面形態(tài)	支持的UI開發(fā)范式
Stage模型（推薦）	應(yīng)用或服務(wù)的頁面	聲明式開發(fā)范式（推薦）
	卡片	聲明式開發(fā)范式（推薦） 類Web開發(fā)范式
FA模型	應(yīng)用或服務(wù)的頁面	聲明式開發(fā)范式 類Web開發(fā)范式
	卡片	類Web開發(fā)范式

?4、ArkUI、ArkTS、聲明式開發(fā)范式

? ? ? ? ArkUI：為應(yīng)用的UI開發(fā)提供了完整的基礎(chǔ)設(shè)施，包括簡潔的UI語法、豐富的UI功能（組件、布局、動畫以及交互事件），以及實時界面預(yù)覽工具等，可以支持開發(fā)者進行豐富頁面的開發(fā)。

? ? ? ? ArkTS：是UI開發(fā)語言，基于typescript語言擴展而來，是TS的超集。擴展能力包含各種裝飾器、自定義組件、UI描述機制。

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

5、聲明式UI和命令式UI對比

????????命令式開發(fā)范式代碼如下：

<DirectionalLayout ...><Text ...ohos:text="HarmonyOS Developer World" /><Button ...ohos:text="Join Now" />
</DirectionalLayout>

? ? ? ? 基于ArkTS的聲明式開發(fā)范式代碼如下：

Column() {Text("HarmonyOS Developer World")Button("Join Now")
}

? ? ? ? ?與命令式開發(fā)范式相比，聲明式主要有以下幾個優(yōu)點：

• 對于系統(tǒng)使用方，通過設(shè)計聲明式的接口，開發(fā)者無需關(guān)心底層實現(xiàn)，而更多關(guān)注上層業(yè)務(wù)；
• 對于系統(tǒng)的實現(xiàn)方通過聲明式的接口，上層使用者接口相對穩(wěn)定，系統(tǒng)可以不斷的迭代優(yōu)化；
• 對整個系統(tǒng)而言，能夠更系統(tǒng)的收集更多信息，能夠依據(jù)策略進行系統(tǒng)行為優(yōu)化，提升系統(tǒng)效率。

?6、聲明式UI和類Web開發(fā)范式對比

? ? ? ? ArkUI為不同的開發(fā)者，提供了兩種開發(fā)范式：基于ArkTS擴展的聲明式開發(fā)范式和基于JS擴展的類Web開發(fā)范式?。

? ? ? ? 基于JS擴展的類Web開發(fā)范式，代碼如下：

<div class="container"><text class="text">{{ "HarmonyOS Developer World" }}</text><button class="button">{{ "Join Now" }}</button>
</div>

? 7、聲明式開發(fā)范式

? ? ? ? 基于ArkTS的聲明式開發(fā)范式的核心是：數(shù)據(jù)驅(qū)動UI頁面更新? ? ?

?????????

? ? ? ? 聲明式UI是西永選用的新一代開發(fā)范式，通過數(shù)據(jù)驅(qū)動UI變化，UI邏輯分離，更直觀，更高效。

? ? ? ? 關(guān)鍵特征：

? ? ? ? ? ? ? ? a、類自然語言的UI結(jié)構(gòu)描述

? ? ? ? ? ? ? ? b、積木式組件組合

? ? ? ? ? ? ? ? c、極簡語法?

?????????

8、常用組件?

?????????a、按鈕（Button）

? ? ? ? 通常用于響應(yīng)用戶的點擊操作，其類型包括膠囊按鈕、圓形按鈕、普通按鈕。Button作為容器使用時，可以通過添加子組件實現(xiàn)包含文字、圖片等元素的按鈕。

Button('OK', { type: ButtonType.Normal, stateEffect: true}).borderRadius(8).backgroundColor(0x317aff).width(90).onClick(() => {console.log('Button is OK')})

? ? ? ? b、文本顯示（Text）

? ? ? ? 通常用于展示用戶視圖，如顯示文章的文字。

Text('文本').fontSize(20).width(300).border({width:1})

? ? ? ? c、顯示圖片（Image）

? ? ? ? 在應(yīng)用中顯示圖片需要使用Image實現(xiàn)，支持多種圖片格式，如png、jpg、bmp、gif、svg等。

Image($r('app.media.pic_name')).width(100).height(100).margin(15)

? ? ? ? d、線性布局（Row/Column）

? ? ? ? 是開發(fā)中最常用的布局，通過線性容器Row和Column構(gòu)建。線形圖布局的子元素在線性方向上依次排列，Column容器內(nèi)子元素按照垂直方向排列，Row容器內(nèi)子元素按照水平方向排列。

Column( {space: 50}) {Column().width('90%').height(50).backgroundColor(0xAFEEEE)Column().width('90%').height(50).backgroundColor(0x0FFFFF)Column().width('90%').height(50).backgroundColor(0x00FFFF)
}
.width('100%')Row( {space: 50}) {Row().width('20%').height(350).backgroundColor(0xAFEEEE)Row().width('20%').height(350).backgroundColor(0x0FFFFF)Row().width('20%').height(350).backgroundColor(0x00FFFF)
}
.width('100%')

????????

? ? ? ? e、其他組件

?????????

????????