HarmonyOS是一款面向萬物互聯時代的、全新的分布式操作系統。在傳統的單設備系統能力基礎上，HarmonyOS提出了基于同一套系統能力、適配多種終端形態的分布式理念，能夠支持手機、平板、智能穿戴、智慧屏、車機等多種終端設備，提供全場景（移動辦公、運動健康、社交通信、媒體娛樂等）業務能力。

ArkTS 是華為自研的開發語言。它在TypeScript（簡稱TS）的基礎上，匹配 ArkUI 框架，擴展了聲明式 UI 、狀態管理等相應的能力，讓開發者以更簡潔、更自然的方式開發跨端應用。關于ArkTS，可以參考：ArkTS基礎知識

ArkUI-X 進一步將 ArkUI 擴展到了多個 OS 平臺：目前支持 OpenHarmony、HarmonyOS、Android、iOS，后續會逐步增加更多平臺支持。到時，開發者就可以基于一套主代碼，就能夠構建支持多平臺應用。以下是ArkUI跨平臺框架整體架構的示意圖。

一、環境搭建

1.1 下載IDE

DevEco Studio

首先，需要下載支持 ArkUI-X 套件的華為開發工具 DevEco ，版本為 4.0 以上，目前只能下載預覽版進行體驗。下載地址：

軟件	版本	備注
OpenHarmony	4.0 Beta2	NA
Public SDK	Ohos_sdk_public 4.0.9.6 (API Version 10 Beta2)	面向應用開發者提供，不包含需要使用系統權限的系統接口。通過DevEco Studio默認獲取的SDK為Public SDK。
HUAWEI DevEco Studio（可選）	4.0 Beta2	OpenHarmony應用開發推薦使用。獲取方式：Windows(64-bit)SHA256校驗碼：ae9b228fb1f79e99441e10bdcf347ebfc42266be8b170bbce3c9764ba32d82a4Mac(X86)SHA256校驗碼：5c9afc5b1262868b58376155f1e8576d33c1ade8b01091edc4d7d397cd34026cMac(ARM)SHA256校驗碼：ea6c98cafd5036e4a6fd46b0b1cde3a306953b1eef423d5940f1af7c632205d6
HUAWEI DevEco Device Tool（可選）	4.0 Beta1	OpenHarmony智能設備集成開發環境推薦使用。獲取方式：點擊跳轉至下載頁面

下載完成之后，安裝就可以了，這東西是基于 IDEA 做的，和 Android Studio 體驗差不多。

Android Studio

由于ArkUI-X 可以將 ArkTS 項目編譯為一個 Android 項目，需要需要使用 Android Studio 來進行打包。Android Studio 安裝方法就不贅述了。下載地址：

Download Android Studio & App Tools - Android Developers (google.cn)

同樣，我們可以需要搭建iOS的原生環境，下載Xcode等，不再過多的說明。

1.2 安裝OpenHarmony SDK

安裝完后，當我們啟動DevEco Studio工具的時候，系統提示我們需要安裝Node，這是因為HarmonyOS應用程序也支持使用JS進行開發，我們只需要按照提示進行安裝即可，如下圖。

相關依賴下載完成，進入 IDE 首頁后，先不急著創建項目，需要先安裝 OpenHarmony SDK，類似于Android的SDK。

然后，打開Preferences面板，選擇OpenHarmony，如下圖。

選擇后需要指定一下路徑，然后它會進行一些依賴下載，等它下載完成。下載完成后，勾選 API Version 10 相關的選項，點擊確定等它下載完成。

1.3 安裝 ArkUI-X SDK

OpenHarmony SDK 安裝完成后，接下來還需要安裝 ArkUI-X SDK，了。同樣的在設置里面選擇 ArkUI-X ，指定路徑，等待下載完成。

1.4 環境變量

ArkUI-X 需要設置好相應的環境變量才能正確使用。若缺少相關環境變量，會有彈窗提示。所以在裝好 Android Studio 后，需要將 Android SDK 添加至環境變量中（如果之前添加過，就不用管了）：

Windows

在此【電腦】 >【 屬性】 > 【高級系統設置】 > 【高級】 > 【環境變量】中，新建系統變量。變量名為ANDROID_HOME，變量值為Android SDK安裝目錄。
?

macOS

打開終端工具，執行以下命令，打開.bash_profile文件，然后配置Android SDK安裝目錄，命令如下：

vi ~/.bash_profile
export ANDROID_HOME=/Users/xxx/Library/Android/sdk
source ~/.bash_profile

環境變量配置完成后，關閉并重啟DevEco Studio。

二、快速上手

2.1 創建工程

首先，我們創建一個普通的Harmony OS工程，如下圖。

然后，按照提示填寫工程名、包名、編譯環境等內容。

在創建了一個 Harmon OS 工程后，我們就進入到了 IDE 的實際界面，在此就可以找到創建 OpenHarmony 工程的選項。為什么要 OpenHarmony 呢？首先要認識到 HarmonOS 和 OpenHarmony 的區別。

這個具體區別大家可以自己去對比下工程結構，可能會被當做引戰引起某些人不滿意，當然我們可以理解為是借鑒，此處只說明一點 ArkUI-X 是基于 OpenHarmony 的技術。

我們在上面菜單欄選擇 【File】->【New】-> 【Import - Import Sample】，如下圖。

然后，系統會讓我們選擇導入的Sample，此處選擇 OpenHarmony 以及ArkUI-X 下的 HelloWorld。

接著，系統會去下載對應的依賴。不過，我執行導入的時候，遇到了一個網絡超時的問題，所以我直接下載了源碼，然后再本地導入。

源碼的下載鏈接如下：https://gitee.com/arkui-x/samples

依賴安裝完成，在右上角選擇 Previewer ，點擊【運行】按鈕，就可以通過 OpenHarmony 預覽界面進行預覽。

2.2 移入代碼

回到之前創建的 Harmony OS 工程，將里面的 UI 代碼移入到OpenHarmony工程中。首先，進入 Harmony OS 工程的 entry - src - main 目錄，復制里面的 ets、resources 和module.json5文件。然后替換OpenHarmony工程中對應的三個文件，也可以直接覆蓋。

然后，再次預覽并運行OpenHarmony工程，就可以看到之前通過 Harmony OS 工程模板創建的界面顯示在了這個 OpenHarmony 預覽界面上，如下圖。

2.3 編譯 OpenHarmony 工程

打開OpenHarmony工程，在 DevEco 菜單欄，選擇 Build App，在編譯為 OpenHarmony App 的同時，也會生成 Android 與 IOS 項目。

編譯完成后，可以看到生成的 Android 工程了，如下圖。

2.4 在 Android 環境運行

由于 ArkUI-X 編譯出來的為 native 文件只能運行在ARM環境上，所以Android Studio 提供的模擬器如果為 x64 架構是無法預覽程序的。

接著，將上述生成的 Android 工程使用 Android Studio打開，等待 Gradle 初始化完成，并編譯完成，如下圖。

然后，我們就可以使用Android Studio來運行項目，也可以使用Android Studio打包apk。

同樣的，我們也可以使用Xcode來打開iOS的源碼，運行以及打包。

三、應用工程結構

3.1 工程目錄結構

跨平臺應用工程目錄結構，包含一套為ArkUI開發者提供的應用工程模板，提供構建OpenHarmony應用，HarmonyOS應用，Android應用，iOS應用的能力。工程結構目錄如下：

ArkUI-X應用工程目錄結構├── .arkui-x│   ├── android                 // Android平臺相關代碼│   └── ios                     // iOS平臺相關代碼├── .hvigor├── .idea├── AppScope├── entry├── hvigor├── oh_modules├── build-profile.json5├── hvigorfile.ts├── local.properties└── oh-package.json5

此應用目錄結構設計思想是從OpenHarmony應用工程原生支持跨平臺角度出發，在OpenHarmony應用工程之上疊加Android和iOS應用工程，ArkTS代碼和resources資源在OpenHarmony側完成編譯，Native代碼仍在各自平臺應用工程中完成編譯。

3.2 編譯構建

理解OpenHarmony應用工程的編譯構建需要理解幾個概念：

• ArkTS源碼：ArkTS源碼通過OpenHarmony SDK工具鏈生成abc（Ark Byte Code），并分別拷貝到Android和iOS應用工程，作為平臺應用資源進行管理。
• ArkUI應用資源：ArkUI Resources資源也通過OpenHarmony SDK工具鏈進行編譯，編譯后的ArkUI資源分別拷貝到Android和iOS應用工程，作為平臺應用資源進行管理。
• ArkUI框架資源：ArkUI框架資源隨ArkUI-X SDK進行發布，應用構建時會自動打包到ArkUI-X應用中，可保證ArkUI-X應用在各平臺上UX渲染一致性。

綜上所述，Android平臺上通過assets管理ArkTS編譯產物、ArkUI應用資源和ArkUI框架資源，iOS平臺上通過Bundle Resources管理ArkTS編譯產物、ArkUI應用資源和ArkUI框架資源。

下面說一下原生應用工程結構：

Android應用工程結構

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

iOS應用工程結構

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

關于華為 ArkTS + ArkUI-X 跨平臺開發框架的基礎知識就介紹到這里，從中我看到了React Native、flutter的影子，事實上，從官方給出的架構圖也能看到它們的影子，畢竟站在巨人的肩膀上，才能看的更遠。相信，隨著鴻蒙的崛起，ArkTS + ArkUI-X技術的到來，國產自研技術將不再是 PPT ，不再是“套殼”。

文中涉及的代碼鏈接如下：https://gitee.com/arkui-x/samples

參考鏈接：

https://gitee.com/arkui-x
https://juejin.cn/post/7253240772840701989