ArkUI-X概覽

項(xiàng)目介紹

ArkUI是一套構(gòu)建分布式應(yīng)用的聲明式UI開發(fā)框架。它具備簡(jiǎn)潔自然的UI信息語(yǔ)法、豐富的UI組件、多維的狀態(tài)管理，以及實(shí)時(shí)界面預(yù)覽等相關(guān)能力，幫助您提升應(yīng)用開發(fā)效率，并能在多種設(shè)備上實(shí)現(xiàn)生動(dòng)而流暢的用戶體驗(yàn)。

ArkUI-X進(jìn)一步將ArkUI擴(kuò)展到了多個(gè)OS平臺(tái)：目前支持OpenHarmony、HarmonyOS、Android、 iOS，后續(xù)會(huì)逐步增加更多平臺(tái)支持。開發(fā)者基于一套主代碼，就可以構(gòu)建支持多平臺(tái)的精美、高性能應(yīng)用。

熟悉鴻蒙開發(fā)指導(dǎo)文檔：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]

關(guān)鍵特征

ArKUI跨平臺(tái)框架關(guān)鍵特征如下：

1. 簡(jiǎn)潔自然的聲明式語(yǔ)法。
2. 高效的渲染管線以及平臺(tái)一致性的渲染機(jī)制。
3. 高效的方舟編譯器以及運(yùn)行時(shí)。
4. 統(tǒng)一的跨平臺(tái)API能力集以及擴(kuò)展機(jī)制。
5. 動(dòng)態(tài)化特性

技術(shù)架構(gòu)

ArkUI跨平臺(tái)框架整體架構(gòu)如下圖所示。

簡(jiǎn)介

本文檔描述ArkUI開發(fā)框架跨平臺(tái)運(yùn)行能力相關(guān)的總體技術(shù)方案。

范圍

ArkUI是面向全設(shè)備的UI開發(fā)框架，已通過(guò)OpenHarmony代碼倉(cāng)開源，其關(guān)鍵組成包括：

• 開發(fā)模型;
• 應(yīng)用界面&交互;
• 擴(kuò)展機(jī)制-使能三方組件&平臺(tái)API擴(kuò)展機(jī)制。

ArkUI-X旨在將ArkUI開發(fā)框架擴(kuò)展至其他OS平臺(tái)（Android/iOS/Windows等），使開發(fā)者能夠基于ArkUI開發(fā)框架，復(fù)用絕大部分的應(yīng)用代碼（UI以及主要應(yīng)用邏輯），即可部署到不同OS平臺(tái)上。

假設(shè)和約束

本文提到的跨平臺(tái)是指UI部分的跨平臺(tái)，其UI代碼可以重用，其它應(yīng)用對(duì)平臺(tái)依賴的能力，需要應(yīng)用層面進(jìn)行適配，或通過(guò)JS API封裝機(jī)制（NAPI），進(jìn)行實(shí)現(xiàn)暴露到JS層。

涉及平臺(tái)能力的JS API（比如網(wǎng)絡(luò)、存儲(chǔ)等）請(qǐng)參考OpenHarmony中的定義，需要通過(guò)在不同平臺(tái)的封裝實(shí)現(xiàn)達(dá)到復(fù)用的目的。

本文主要是通用方案設(shè)計(jì)說(shuō)明，并以Android平臺(tái)做為示例說(shuō)明，其他平臺(tái)的基本設(shè)計(jì)思路類似，但相關(guān)設(shè)計(jì)需進(jìn)一步細(xì)化補(bǔ)充。

總體視圖

從設(shè)計(jì)之初，跨平臺(tái)就作為ArkUI最基本的設(shè)計(jì)目標(biāo)之一，當(dāng)前已支持基礎(chǔ)的跨平臺(tái)架構(gòu)。相關(guān)的設(shè)計(jì)思路如下：

1. 采用 C++ 編寫整體后端引擎代碼，保持在多平臺(tái)的可移植性，最小化平臺(tái)依賴，降低平臺(tái)移植成本。
2. 整體繪制采用自渲染機(jī)制，降低平臺(tái)依賴，同時(shí)進(jìn)一步提升繪制效果的一致性。
3. 抽象出平臺(tái)適配層以及平臺(tái)橋接層，以便不同平臺(tái)的適配。

模塊功能介紹

ArkUI主要包括以下幾個(gè)模塊：

1. 研發(fā)模型，兼容OpenHarmony應(yīng)用的Stage開發(fā)模型，支持基于ArkTS的聲明式開發(fā)范式，可跨平臺(tái)。
2. 聲明式UI后端引擎，包括布局，渲染，C++ UI組件，事件機(jī)制等，可跨平臺(tái)。
3. API擴(kuò)展機(jī)制，基于NAPI機(jī)制，可跨平臺(tái)。 不同平臺(tái)需要各自擴(kuò)展具體的API實(shí)現(xiàn)。
4. 工具鏈/SDK, 工具鏈可跨平臺(tái)，SDK需基于不同平臺(tái)構(gòu)建。

另外，ArkUI依賴的ArkTS引擎以及圖形引擎，也可跨平臺(tái)。

ArkUI聲明式UI后端引擎，主要完成整體pipeline流程控制、視圖更新、布局系統(tǒng)、多頁(yè)面管理、事件分發(fā)和回調(diào)、焦點(diǎn)管理、動(dòng)畫機(jī)制、主題機(jī)制、資源管理/緩存/provider等。 其中的UI組件，主要通過(guò)顯示相關(guān)組件細(xì)粒度化，動(dòng)畫、事件、焦點(diǎn)等機(jī)制組件化，滿足適配不同前端所需要的靈活性。

整體的跨平臺(tái)需求，就是擴(kuò)展ArkUI開發(fā)框架到其他OS平臺(tái)，幫助開發(fā)者降低多平臺(tái)應(yīng)用開發(fā)成本。

通過(guò)ACE Tools命令行工具創(chuàng)建跨平臺(tái)應(yīng)用工程，開發(fā)者基于一套主代碼，就可以構(gòu)建支持多平臺(tái)的精美、高性能應(yīng)用。

方案設(shè)計(jì)

跨平臺(tái)應(yīng)用包結(jié)構(gòu)設(shè)計(jì)

跨平臺(tái)應(yīng)用目錄結(jié)構(gòu)，包含一套為ArkUI-X開發(fā)者提供的應(yīng)用工程模板，提供構(gòu)建OpenHarmony應(yīng)用、Android應(yīng)用、iOS應(yīng)用的能力。應(yīng)用工程包結(jié)構(gòu)設(shè)計(jì)如下：

ArkUI-X應(yīng)用工程
  ├── .arkui-x
  │   ├── android                 // Android平臺(tái)相關(guān)代碼
  │   └── ios                     // iOS平臺(tái)相關(guān)代碼
  ├── .hvigor
  ├── .idea
  ├── AppScope
  ├── entry
  ├── hvigor
  ├── oh_modules
  ├── build-profile.json5
  ├── hvigorfile.ts
  ├── local.properties
  └── oh-package.json5

ArkUI-X應(yīng)用目錄結(jié)構(gòu)設(shè)計(jì)思想是從OpenHarmony應(yīng)用工程原生支持跨平臺(tái)角度出發(fā)，在OpenHarmony應(yīng)用工程之上疊加Android和iOS應(yīng)用工程，ArkTS代碼和resources資源編輯仍在OpenHarmony側(cè)完成，Native代碼在各自平臺(tái)應(yīng)用工程中完成。詳細(xì)包結(jié)構(gòu)設(shè)計(jì)。

ArkUI-X應(yīng)用工程結(jié)構(gòu)說(shuō)明

簡(jiǎn)介

本文檔配套ArkUI-X，將OpenHarmony ArkUI開發(fā)框架擴(kuò)展到不同的OS平臺(tái)，比如Android和iOS平臺(tái)，讓開發(fā)者基于ArkUI，可復(fù)用大部分的應(yīng)用代碼（UI以及主要應(yīng)用邏輯）并可以部署到相應(yīng)的OS平臺(tái)，降低跨平臺(tái)應(yīng)用開發(fā)成本。

應(yīng)用工程目錄結(jié)構(gòu)介紹

跨平臺(tái)應(yīng)用工程目錄結(jié)構(gòu)，包含一套為ArkUI開發(fā)者提供的應(yīng)用工程模板，提供構(gòu)建OpenHarmony應(yīng)用，HarmonyOS應(yīng)用，Android應(yīng)用，iOS應(yīng)用的能力。

ArkUI-X應(yīng)用工程目錄結(jié)構(gòu)
  ├── .arkui-x
  │   ├── android                 // Android平臺(tái)相關(guān)代碼
  │   └── ios                     // iOS平臺(tái)相關(guān)代碼
  ├── AppScope
  ├── entry
  ├── hvigor
  ├── build-profile.json5
  ├── hvigorfile.ts
  ├── hvigorw
  ├── hvigorw.bat
  ├── local.properties
  └── oh-package.json5

此應(yīng)用目錄結(jié)構(gòu)設(shè)計(jì)思想是從OpenHarmony應(yīng)用工程原生支持跨平臺(tái)角度出發(fā)，在OpenHarmony應(yīng)用工程之上疊加Android和iOS應(yīng)用工程，ArkTS代碼和resources資源在OpenHarmony側(cè)完成編譯，Native代碼仍在各自平臺(tái)應(yīng)用工程中完成編譯。

編譯構(gòu)建說(shuō)明

• ArkTS源碼

ArkTS源碼通過(guò)OpenHarmony SDK工具鏈生成abc（Ark Byte Code），并分別拷貝到Android和iOS應(yīng)用工程，作為平臺(tái)應(yīng)用資源進(jìn)行管理。

• ArkUI應(yīng)用資源

ArkUI Resources資源也通過(guò)OpenHarmony SDK工具鏈進(jìn)行編譯，編譯后的ArkUI資源分別拷貝到Android和iOS應(yīng)用工程，作為平臺(tái)應(yīng)用資源進(jìn)行管理。

• ArkUI框架資源

ArkUI框架資源隨ArkUI-X SDK進(jìn)行發(fā)布，應(yīng)用構(gòu)建時(shí)會(huì)自動(dòng)打包到ArkUI-X應(yīng)用中，可保證ArkUI-X應(yīng)用在各平臺(tái)上UX渲染一致性。

綜上所述，Android平臺(tái)上通過(guò)assets管理ArkTS編譯產(chǎn)物、ArkUI應(yīng)用資源和ArkUI框架資源，iOS平臺(tái)上通過(guò)Bundle Resources管理ArkTS編譯產(chǎn)物、ArkUI應(yīng)用資源和ArkUI框架資源。

Android應(yīng)用工程結(jié)構(gòu)

ArkUI-X Android應(yīng)用工程
├── app
│   ├── libs
│   │   ├── arkui_android_adapter.jar                   // ArkUI-X跨平臺(tái)適配層，在SDK中發(fā)布
│   │   └── arm64-v8a
│   │       └── libarkui_android.so                     // ArkUI-X跨平臺(tái)引擎庫(kù)，在SDK中發(fā)布
│   │       └── libhilog.so                             // ArkUI-X日志庫(kù)，在SDK中發(fā)布
│   │       └── libresourcemanager.so                   // ArkUI-X資源管理庫(kù)，在SDK中發(fā)布
│   ├── src
│   │   ├── androidTest
│   │   ├── main
│   │   │   ├── assets
│   │   │   │   └── arkui-x                             // ArkUI應(yīng)用編譯后的字節(jié)碼文件和Resources，作為資源文件存放在assets/arkui-x中
│   │   │   │       ├── entry                           // ArkUI單個(gè)模塊的編譯結(jié)果
│   │   │   │       │   ├── ets                         // ArkUI單個(gè)模塊代碼的編譯結(jié)果：包括字節(jié)碼文件以及sourceMap文件
│   │   │   │       │   │   ├── sourceMaps.map
│   │   │   │       │   │   └── modules.abc
│   │   │   │       │   ├── resources.index             // ArkUI單個(gè)模塊資源的編譯結(jié)果：resources資源的編譯結(jié)果
│   │   │   │       │   ├── resources                   // resources資源中的rawfile資源，不會(huì)進(jìn)行編譯。
│   │   │   │       │   └── module.json
│   │   │   │       ├── entry_test                      // ohosTest，僅僅Debug模式構(gòu)建包含。
│   │   │   │       └── systemres                       // ArkUI框架自帶的系統(tǒng)資源
│   │   │   ├── java/com/example/mayapp
│   │   │   │   ├── MyApplication.java                  // 基于StageApplication擴(kuò)展MyApplication
│   │   │   │   └── EntryEntryAbilityActivity.java      // 基于StageActivity擴(kuò)展EntryEntryAbilityActivity
│   │   │   ├── res
│   │   │   └── AndroidManifest.xml
│   │   └── test
│   ├── build.gradle
│   └── proguard-rules.pro
├── gradle/wrapper
├── build.gradle
├── gradle.properties
├── gradlew
├── gradlew.bat
└── settings.gradle

iOS應(yīng)用工程結(jié)構(gòu)

ArkUI-X iOS應(yīng)用工程
├── app.xcodeproj
│   ├── project.xcworkspace
│   ├── xcuserdata
│   └── project.pbxproj
├── app
│   ├── Assets.xcassets
│   ├── Base.Iproj
│   ├── AppDelegate.h
│   ├── AppDelegate.m                               // 應(yīng)用入口, 驅(qū)動(dòng)StageApplication的生命周期
│   ├── EntryEntryAbilityViewController.h           
│   ├── EntryEntryAbilityViewController.m           // 基于StageViewController擴(kuò)展EntryEntryViewController
│   ├── Info.plist
│   └── main.m
├── arkui-x                                         // ArkUI應(yīng)用編譯后的字節(jié)碼文件和Resources，作為資源文件存放在assets/arkui-x中
│   ├── entry                                       // ArkUI單個(gè)模塊的編譯結(jié)果
│   │   ├── ets                                     // ArkUI單個(gè)模塊代碼的編譯結(jié)果：包括字節(jié)碼文件以及sourceMap文件
│   │   │   ├── sourceMaps.map
│   │   │   └── modules.abc
│   │   ├── resources.index                         // ArkUI單個(gè)模塊資源的編譯結(jié)果：resources資源的編譯結(jié)果
│   │   ├── resources                               // resources資源中的rawfile資源，不會(huì)進(jìn)行編譯。
│   │   └── module.json
│   ├── entry_test                                  // ohosTest，僅僅Debug模式構(gòu)建包含。
│   └── systemres                                   // ArkUI框架自帶的系統(tǒng)資源
└── frameworks                                      // ArkUI跨平臺(tái)Framework動(dòng)態(tài)庫(kù)：包含ArkUI-X的框架以及插件

跨平臺(tái)框架構(gòu)建系統(tǒng)

ArkUI-X編譯構(gòu)建提供了一套基于GN和Ninja的編譯構(gòu)建框架，基礎(chǔ)構(gòu)建基于OpenHarmony的build倉(cāng)，并在OpenHarmony構(gòu)建基礎(chǔ)上新增Android和iOS編譯工具鏈，以支持ArkUI跨平臺(tái)SDK編譯輸出。

跨平臺(tái)SDK結(jié)構(gòu)設(shè)計(jì)

跨平臺(tái)SDK主要用于支持ACE Tools命令行跨平臺(tái)應(yīng)用構(gòu)建和DevEco StudioAndroid StudioXcode集成跨平臺(tái)應(yīng)用開發(fā)。內(nèi)容范圍主要包括：

1. 提供ArkUI跨平臺(tái)開發(fā)框架基礎(chǔ)引擎動(dòng)態(tài)庫(kù)，API插件動(dòng)態(tài)庫(kù)。
2. 提供ArkUI跨平臺(tái)應(yīng)用構(gòu)建命令行工具。
3. 提供ArkUI組件渲染一致性系統(tǒng)資源包，應(yīng)用資源編譯工具。

ArkUI-X SDK組成結(jié)構(gòu)如下：

arkui-x
  ├── engine                   // ArkUI-X的引擎庫(kù)
  │   ├── lib                  // ArkUI-X的引擎庫(kù)：包括Android平臺(tái)及架構(gòu)的動(dòng)態(tài)庫(kù)
  │   ├── framework            // ArkUI-X的引擎庫(kù)：包括iOS平臺(tái)及架構(gòu)的Framework庫(kù)
  │   ├── xcframework          // ArkUI-X的引擎庫(kù)：包括iOS平臺(tái)及架構(gòu)的XCFramework庫(kù)
  │   ├── ets                  // ArkUI-X增量接口，比如：@arkui-x.bridge
  │   ├── apiConfig.json       // engine庫(kù)配置文件，用于IDE和ACE Tools解析，以支持應(yīng)用構(gòu)建按需打包。
  │   └── systemres            // ArkUI-X框架自帶的資源
  ├── plugins                  // ArkUI-X官方提供的插件庫(kù)
  │   ├── component            // ArkUI組件插件庫(kù)，apiConfig.json
  │   └── api                  // @ohos接口插件庫(kù)，apiConfig.json
  ├── toolchains               // ArkUI-X應(yīng)用開發(fā)工具，比如：ACE Tools。
  ├── sdkConfig.json           // 增量d.ts路徑和接口前綴配置
  ├── arkui-x.json             // SDK管理配置，流水線自動(dòng)生成
  └── NOTICE.txt

操作系統(tǒng)抽象層

基于C++實(shí)現(xiàn)的OS Abstract Layer (下文縮寫為OSAL)，屏蔽不同平臺(tái)的OS相關(guān)的實(shí)現(xiàn)，主要包含功能列表：

• 日志、Trace抽象層
• 網(wǎng)絡(luò)接口抽象層
• 文件/資源讀寫抽象層
• 基礎(chǔ)線程抽象層
• 系統(tǒng)資源管理抽象及實(shí)現(xiàn)
• 系統(tǒng)Prop配置讀取抽象層
• 打點(diǎn)能力抽象層

以Log調(diào)用流程為例，整體交互流程如下：

如上述流程，Core模塊直接使用Base提供的接口，Base模塊對(duì)接口進(jìn)行定義，對(duì)于依賴平臺(tái)的能力，在編譯期就選擇了對(duì)應(yīng)OS的平臺(tái)抽象層OSAL。運(yùn)行時(shí)，直接通過(guò)OSAL的實(shí)現(xiàn)，調(diào)用到具體平臺(tái)相關(guān)的庫(kù)中。

跨平臺(tái)啟動(dòng)入口

開發(fā)框架對(duì)應(yīng)平臺(tái)語(yǔ)言實(shí)現(xiàn)的Entrance，提供不同平臺(tái)的基礎(chǔ)入口環(huán)境，跨平臺(tái)啟動(dòng)入口功能列表：

• 提供多個(gè)平臺(tái)的加載入口，如OpenHarmony側(cè)為一個(gè)Ability，Android側(cè)為一個(gè)Activity。
• 對(duì)接不同平臺(tái)的生命周期、事件輸入、Vsync。
• 對(duì)接不同平臺(tái)的窗口系統(tǒng)、硬件渲染加速。
• 對(duì)接不同平臺(tái)的應(yīng)用信息。
• 不同平臺(tái)的原生語(yǔ)言轉(zhuǎn)換到統(tǒng)一的C++后端，公共代碼復(fù)用。

以Android的啟動(dòng)流程為例，整體交互流程如下：

Stage模型下，Ability聲明周期的入口為StageAbility，生命周期一直會(huì)通知到JsAbility，執(zhí)行用戶的生命周期回調(diào)方法，UI的頁(yè)面是在onWindowStageCreated的生命周期中，調(diào)用Window的loadContent接口進(jìn)行加載，創(chuàng)建ArkUI的實(shí)例并初始化渲染管線，將頁(yè)面進(jìn)行渲染顯示。

跨平臺(tái)能力橋接

跨平臺(tái)能力橋接包含框架內(nèi)部需要用到的不同的平臺(tái)能力模塊，如：剪切板、輸入法、視頻等，提供基礎(chǔ)能力模塊的定義，不同平臺(tái)按照定義實(shí)現(xiàn)對(duì)應(yīng)的功能模塊。功能列表：

• 剪切板抽象接口，及不同平臺(tái)的實(shí)現(xiàn)。
• 輸入法抽象接口，及不同平臺(tái)的實(shí)現(xiàn)。
• 視頻媒體等抽象接口，及不同平臺(tái)的實(shí)現(xiàn)。
• 其它框架內(nèi)部需要用到的不同的平臺(tái)能力模塊。

以剪切板ClipBoard為例，整體交互流程如下：

如上圖，例如在框架核心層的TextField組件中，需要用到剪切板的能力，通過(guò)Proxy創(chuàng)建具體的ClipBoard實(shí)現(xiàn)，返回抽象的ClipBoard接口。在組件實(shí)現(xiàn)層即可實(shí)現(xiàn)平臺(tái)無(wú)關(guān)的調(diào)用。以Android平臺(tái)為例，GetData的調(diào)用會(huì)通過(guò)JNI調(diào)用到平臺(tái)實(shí)現(xiàn)的Plugin中，然后Plugin通過(guò)訪問(wèn)剪切板服務(wù)實(shí)現(xiàn)對(duì)應(yīng)的功能。

API擴(kuò)展機(jī)制

1、JS API擴(kuò)展機(jī)制，用于Native接口能力暴露到JS層，該機(jī)制直接復(fù)用OpenHarmony上的統(tǒng)一封裝機(jī)制，擴(kuò)展API （C++實(shí)現(xiàn)），并實(shí)現(xiàn)部分內(nèi)置API，NAPI的整體結(jié)構(gòu)如下圖。

對(duì)于不同平臺(tái)， JS API需要遵循OpenHarmony的API定義 ，在不同平臺(tái)上通過(guò)API擴(kuò)展機(jī)制進(jìn)行擴(kuò)展。

跨平臺(tái)命令行工具ACE Tools

ACE Tools命令行工具作為ArkUI-X跨平臺(tái)應(yīng)用構(gòu)建工具，具有創(chuàng)建/編譯/安裝/運(yùn)行調(diào)試OpenHarmony、Android和iOS應(yīng)用的能力。

`HarmonyOS與OpenHarmony鴻蒙文檔籽料：mau123789是v直接拿`

ACE Tools代碼結(jié)構(gòu)
 cli
  ├─node_modules
  ├─src
  │  ├─ace-build                 // 構(gòu)建跨平臺(tái)應(yīng)用安裝包
  │  │  ├─ace-compiler
  │  │  └─ace-packager
  │  ├─ace-check                 // 查驗(yàn)ArkUI跨平臺(tái)應(yīng)用開發(fā)依賴的的庫(kù)和工具鏈?zhǔn)欠裢暾?/span>
  │  ├─ace-clean                 // 清理跨平臺(tái)應(yīng)用編譯結(jié)果
  │  ├─ace-config                // 配置ArkUI跨平臺(tái)應(yīng)用開發(fā)環(huán)境
  │  ├─ace-create                // 創(chuàng)建ArkUI跨平臺(tái)應(yīng)用工程
  │  │  ├─aar
  │  │  ├─ability
  │  │  ├─component
  │  │  ├─framework
  │  │  ├─module
  │  │  └─project
  │  ├─ace-devices               // 列出當(dāng)前PC所鏈接的各平臺(tái)設(shè)備
  │  ├─ace-install               // 將跨平臺(tái)應(yīng)用安裝到連接的設(shè)備上
  │  ├─ace-launch                // 在設(shè)備上運(yùn)行跨平臺(tái)應(yīng)用
  │  ├─ace-log                   // 滾動(dòng)展示正在運(yùn)行的跨平臺(tái)應(yīng)用的日志
  │  ├─ace-run                   // 運(yùn)行跨平臺(tái)應(yīng)用包
  │  ├─ace-test                  // 執(zhí)行測(cè)試代碼
  │  ├─ace-uninstall             // 將跨平臺(tái)應(yīng)用從設(shè)備上卸載
  │  ├─bin                       // 命令行入口腳本
  │  └─util
  └─templates                    // 跨平臺(tái)應(yīng)用工程模板

審核編輯 黃宇