HarmonyOS是一款面向萬物互聯(lián)時(shí)代的、全新的分布式操作系統(tǒng)。在傳統(tǒng)的單設(shè)備系統(tǒng)能力基礎(chǔ)上，HarmonyOS提出了基于同一套系統(tǒng)能力、適配多種終端形態(tài)的分布式理念，能夠支持手機(jī)、平板、智能穿戴、智慧屏、車機(jī)等多種終端設(shè)備，提供全場(chǎng)景（移動(dòng)辦公、運(yùn)動(dòng)健康、社交通信、媒體娛樂等）業(yè)務(wù)能力。
ArkTS 是華為自研的開發(fā)語言。它在TypeScript（簡(jiǎn)稱TS）的基礎(chǔ)上，匹配 ArkUI 框架，擴(kuò)展了聲明式 UI 、狀態(tài)管理等相應(yīng)的能力，讓開發(fā)者以更簡(jiǎn)潔、更自然的方式開發(fā)跨端應(yīng)用。關(guān)于ArkTS，可以參考：ArkTS基礎(chǔ)知識(shí)
ArkUI-X 進(jìn)一步將 ArkUI 擴(kuò)展到了多個(gè) OS 平臺(tái)：目前支持 OpenHarmony、HarmonyOS、Android、iOS，后續(xù)會(huì)逐步增加更多平臺(tái)支持。到時(shí)，開發(fā)者就可以基于一套主代碼，就能夠構(gòu)建支持多平臺(tái)應(yīng)用。以下是ArkUI跨平臺(tái)框架整體架構(gòu)的示意圖。
一、環(huán)境搭建
1.1 下載IDE
DevEco Studio
首先，需要下載支持 ArkUI-X 套件的華為開發(fā)工具 DevEco ，版本為 4.0 以上，目前只能下載預(yù)覽版進(jìn)行體驗(yàn)。下載地址：
| 軟件 | 版本 | 備注 |
|---|---|---|
| OpenHarmony | 4.0 Beta2 | NA |
| Public SDK | Ohos_sdk_public 4.0.9.6 (API Version 10 Beta2) | 面向應(yīng)用開發(fā)者提供，不包含需要使用系統(tǒng)權(quán)限的系統(tǒng)接口。通過DevEco Studio默認(rèn)獲取的SDK為Public SDK。 |
| HUAWEI DevEco Studio（可選） | 4.0 Beta2 | OpenHarmony應(yīng)用開發(fā)推薦使用。獲取方式：Windows(64-bit)SHA256校驗(yàn)碼：ae9b228fb1f79e99441e10bdcf347ebfc42266be8b170bbce3c9764ba32d82a4Mac(X86)SHA256校驗(yàn)碼：5c9afc5b1262868b58376155f1e8576d33c1ade8b01091edc4d7d397cd34026cMac(ARM)SHA256校驗(yàn)碼：ea6c98cafd5036e4a6fd46b0b1cde3a306953b1eef423d5940f1af7c632205d6 |
| HUAWEI DevEco Device Tool（可選） | 4.0 Beta1 | OpenHarmony智能設(shè)備集成開發(fā)環(huán)境推薦使用。獲取方式：點(diǎn)擊跳轉(zhuǎn)至下載頁面 |
下載完成之后，安裝就可以了，這東西是基于 IDEA 做的，和 Android Studio 體驗(yàn)差不多。
Android Studio
由于ArkUI-X 可以將 ArkTS 項(xiàng)目編譯為一個(gè) Android 項(xiàng)目，需要需要使用 Android Studio 來進(jìn)行打包。Android Studio 安裝方法就不贅述了。下載地址：
Download Android Studio & App Tools - Android Developers (google.cn)
同樣，我們可以需要搭建iOS的原生環(huán)境，下載Xcode等，不再過多的說明。
1.2 安裝OpenHarmony SDK
安裝完后，當(dāng)我們啟動(dòng)DevEco Studio工具的時(shí)候，系統(tǒng)提示我們需要安裝Node，這是因?yàn)镠armonyOS應(yīng)用程序也支持使用JS進(jìn)行開發(fā)，我們只需要按照提示進(jìn)行安裝即可，如下圖。
相關(guān)依賴下載完成，進(jìn)入 IDE 首頁后，先不急著創(chuàng)建項(xiàng)目，需要先安裝 OpenHarmony SDK，類似于Android的SDK。
然后，打開Preferences面板，選擇OpenHarmony，如下圖。
選擇后需要指定一下路徑，然后它會(huì)進(jìn)行一些依賴下載，等它下載完成。下載完成后，勾選 API Version 10 相關(guān)的選項(xiàng)，點(diǎn)擊確定等它下載完成。
1.3 安裝 ArkUI-X SDK
OpenHarmony SDK 安裝完成后，接下來還需要安裝 ArkUI-X SDK，了。同樣的在設(shè)置里面選擇 ArkUI-X ，指定路徑，等待下載完成。
1.4 環(huán)境變量
ArkUI-X 需要設(shè)置好相應(yīng)的環(huán)境變量才能正確使用。若缺少相關(guān)環(huán)境變量，會(huì)有彈窗提示。所以在裝好 Android Studio 后，需要將 Android SDK 添加至環(huán)境變量中（如果之前添加過，就不用管了）：
Windows
在此【電腦】 >【 屬性】 > 【高級(jí)系統(tǒng)設(shè)置】 > 【高級(jí)】 > 【環(huán)境變量】中，新建系統(tǒng)變量。變量名為ANDROID_HOME，變量值為Android SDK安裝目錄。
?
macOS
打開終端工具，執(zhí)行以下命令，打開.bash_profile文件，然后配置Android SDK安裝目錄，命令如下：
vi ~/.bash_profile
export ANDROID_HOME=/Users/xxx/Library/Android/sdk
source ~/.bash_profile
環(huán)境變量配置完成后，關(guān)閉并重啟DevEco Studio。
二、快速上手
2.1 創(chuàng)建工程
首先，我們創(chuàng)建一個(gè)普通的Harmony OS工程，如下圖。
然后，按照提示填寫工程名、包名、編譯環(huán)境等內(nèi)容。
在創(chuàng)建了一個(gè) Harmon OS 工程后，我們就進(jìn)入到了 IDE 的實(shí)際界面，在此就可以找到創(chuàng)建 OpenHarmony 工程的選項(xiàng)。為什么要 OpenHarmony 呢？首先要認(rèn)識(shí)到 HarmonOS 和 OpenHarmony 的區(qū)別。
這個(gè)具體區(qū)別大家可以自己去對(duì)比下工程結(jié)構(gòu)，可能會(huì)被當(dāng)做引戰(zhàn)引起某些人不滿意，當(dāng)然我們可以理解為是借鑒，此處只說明一點(diǎn) ArkUI-X 是基于 OpenHarmony 的技術(shù)。
我們?cè)谏厦娌藛螜谶x擇 【File】->【New】-> 【Import - Import Sample】，如下圖。
然后，系統(tǒng)會(huì)讓我們選擇導(dǎo)入的Sample，此處選擇 OpenHarmony 以及ArkUI-X 下的 HelloWorld。
接著，系統(tǒng)會(huì)去下載對(duì)應(yīng)的依賴。不過，我執(zhí)行導(dǎo)入的時(shí)候，遇到了一個(gè)網(wǎng)絡(luò)超時(shí)的問題，所以我直接下載了源碼，然后再本地導(dǎo)入。
源碼的下載鏈接如下：https://gitee.com/arkui-x/samples
依賴安裝完成，在右上角選擇 Previewer ，點(diǎn)擊【運(yùn)行】按鈕，就可以通過 OpenHarmony 預(yù)覽界面進(jìn)行預(yù)覽。
2.2 移入代碼
回到之前創(chuàng)建的 Harmony OS 工程，將里面的 UI 代碼移入到OpenHarmony工程中。首先，進(jìn)入 Harmony OS 工程的 entry - src - main 目錄，復(fù)制里面的 ets、resources 和module.json5文件。然后替換OpenHarmony工程中對(duì)應(yīng)的三個(gè)文件，也可以直接覆蓋。
然后，再次預(yù)覽并運(yùn)行OpenHarmony工程，就可以看到之前通過 Harmony OS 工程模板創(chuàng)建的界面顯示在了這個(gè) OpenHarmony 預(yù)覽界面上，如下圖。
2.3 編譯 OpenHarmony 工程
打開OpenHarmony工程，在 DevEco 菜單欄，選擇 Build App，在編譯為 OpenHarmony App 的同時(shí)，也會(huì)生成 Android 與 IOS 項(xiàng)目。
編譯完成后，可以看到生成的 Android 工程了，如下圖。
2.4 在 Android 環(huán)境運(yùn)行
由于 ArkUI-X 編譯出來的為 native 文件只能運(yùn)行在ARM環(huán)境上，所以Android Studio 提供的模擬器如果為 x64 架構(gòu)是無法預(yù)覽程序的。
接著，將上述生成的 Android 工程使用 Android Studio打開，等待 Gradle 初始化完成，并編譯完成，如下圖。
然后，我們就可以使用Android Studio來運(yùn)行項(xiàng)目，也可以使用Android Studio打包apk。
同樣的，我們也可以使用Xcode來打開iOS的源碼，運(yùn)行以及打包。
三、應(yīng)用工程結(jié)構(gòu)
3.1 工程目錄結(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)用的能力。工程結(jié)構(gòu)目錄如下：
ArkUI-X應(yīng)用工程目錄結(jié)構(gòu)
├── .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
此應(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)用工程中完成編譯。
3.2 編譯構(gòu)建
理解OpenHarmony應(yīng)用工程的編譯構(gòu)建需要理解幾個(gè)概念：
- ArkTS源碼：ArkTS源碼通過OpenHarmony SDK工具鏈生成abc（Ark Byte Code），并分別拷貝到Android和iOS應(yīng)用工程，作為平臺(tái)應(yīng)用資源進(jìn)行管理。
- ArkUI應(yīng)用資源：ArkUI Resources資源也通過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)上通過assets管理ArkTS編譯產(chǎn)物、ArkUI應(yīng)用資源和ArkUI框架資源，iOS平臺(tái)上通過Bundle Resources管理ArkTS編譯產(chǎn)物、ArkUI應(yīng)用資源和ArkUI框架資源。
下面說一下原生應(yīng)用工程結(jié)構(gòu)：
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)引擎庫，在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
│ └── project.pbxproj
├── app
│ ├── Assets.xcassets
│ ├── Base.Iproj
│ ├── AppDelegate.h
│ ├── AppDelegate.m // 應(yīng)用入口, 驅(qū)動(dòng)StageApplication的生命周期
│ ├── 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)庫：包含ArkUI-X的框架以及插件
關(guān)于華為 ArkTS + ArkUI-X 跨平臺(tái)開發(fā)框架的基礎(chǔ)知識(shí)就介紹到這里，從中我看到了React Native、flutter的影子，事實(shí)上，從官方給出的架構(gòu)圖也能看到它們的影子，畢竟站在巨人的肩膀上，才能看的更遠(yuǎn)。相信，隨著鴻蒙的崛起，ArkTS + ArkUI-X技術(shù)的到來，國(guó)產(chǎn)自研技術(shù)將不再是 PPT ，不再是“套殼”。
文中涉及的代碼鏈接如下：https://gitee.com/arkui-x/samples
參考鏈接：文章來源：http://www.zghlxwxcb.cn/news/detail-647685.html
https://gitee.com/arkui-x
https://juejin.cn/post/7253240772840701989文章來源地址http://www.zghlxwxcb.cn/news/detail-647685.html
到了這里，關(guān)于初識(shí)鴻蒙跨平臺(tái)開發(fā)框架ArkUI-X的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
