ArkTS 是華為自研的開發(fā)語言。它在TypeScript（簡稱TS）的基礎(chǔ)上，匹配 ArkUI 框架，擴(kuò)展了聲明式 UI 、狀態(tài)管理等相應(yīng)的能力，讓開發(fā)者以更簡潔、更自然的方式開發(fā)跨端應(yīng)用。

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

簡單來說，ArkTS + ArkUI-X 對標(biāo)的框架為 flutter，一次代碼，編譯為 native 全平臺運(yùn)行

本文內(nèi)容中會教大家如何用 ArkUI-X 開發(fā)一個(gè) Android APP

IDE 獲取

HUAWEI DevEco Studio

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

首先需要下載支持 ArkUI-X 套件的華為開發(fā)工具 DevEco ，版本為 4.0 以上，目前可以下載預(yù)覽版進(jìn)行體驗(yàn)。下載地址：

HUAWEI DevEco Studio 4.0 Beta2

安裝過程很簡單，這東西是基于 IDEA 做的，和 Android Studio 體驗(yàn)一致

Android Studio

ArkUI-X 可以將 ArkTS 項(xiàng)目編譯為一個(gè) Android 項(xiàng)目，使用 Android Studio 可以將其打包為 APK。

Android Studio 安裝方法就不贅述了。下載地址：

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

環(huán)境搭建

初次進(jìn)入

DevEco 安裝完成后，首次進(jìn)入需要設(shè)置 nodejs 與 ohpm。可以選擇本機(jī)已經(jīng)安裝好的路徑，若本機(jī)沒有安裝 nodejs 與 ohpm 也可以在這里下載安裝。

注意：目前鴻蒙開發(fā)支持的 nodejs 版本為 14 和 16，如果本機(jī)裝了 18 版本的 nodejs 需要先卸載，將全局 nodejs 替換為 16。不然后續(xù)項(xiàng)目開發(fā)中會遇到各種問題。

上面這段話加粗的目的就是，我昨天頭鐵使用 nodejs 18 ，踩坑太多了。所以建議大家直接將全局 nodejs 使用 16 版本就行，避免不必要的麻煩。這一點(diǎn)我給官方提了 issue 但是還未收到回復(fù)。

之后便是無腦下一步，等它下載完成 SDK 與相關(guān)依賴即可（你可以將 SDK 路徑設(shè)置為其他文件夾）。

安裝 OpenHarmony SDK

相關(guān)依賴下載完成，進(jìn)入 IDE 首頁后，先不急著創(chuàng)建項(xiàng)目，需要安裝 OpenHarmony SDK。

點(diǎn)擊 More Action ， 選擇 SDK Manager：

選擇 OpenHarmony：

選擇后需要指定一下路徑，然后它會進(jìn)行一些下載，等它下載完成：

下載完成后，勾選 API Version 10 相關(guān)的選項(xiàng)，點(diǎn)擊確定等它下載完成：

安裝 ArkUI-X SDK

OpenHarmony SDK 安裝完成后，就可以安裝 ArkUI-X SDK 了。同樣的在設(shè)置里面選擇 ArkUI-X ，指定路徑，等待下載完成。

設(shè)置環(huán)境變量

ArkUI-X 需要設(shè)置好相應(yīng)的環(huán)境變量才能正確使用。若缺少相關(guān)環(huán)境變量，會有彈窗提示：

所以在裝好 Android Studio 后，需要將 Android SDK 添加至環(huán)境變量中：

變量名：ANDROID_HOME

變量值：你的 Android SDK 路徑

創(chuàng)建項(xiàng)目

創(chuàng)建 Harmon OS 工程

上述步驟完成后，可以創(chuàng)建項(xiàng)目了。這里有很多 Harmon OS 的基礎(chǔ)模板，可以任意選擇一個(gè)進(jìn)行創(chuàng)建：

這里可以不用設(shè)置，保持默認(rèn)即可。我們需要的是這個(gè)模板里面的代碼：

創(chuàng)建 OpenHarmony 工程

在創(chuàng)建了一個(gè) Harmon OS 工程后，我們就進(jìn)入到了 IDE 的實(shí)際界面，在此就可以找到創(chuàng)建 OpenHarmony 工程的選項(xiàng)。

為什么要 OpenHarmony 呢？首先要認(rèn)識到 HarmonOS 和 OpenHarmony 的區(qū)別。這個(gè)具體區(qū)別在此我就不講了，可能會被當(dāng)做引戰(zhàn)引起某些人不滿意。只需要知道重點(diǎn)： ArkUI-X 是基于 OpenHarmony 的技術(shù) 。在上一節(jié)也可以看到，使用 ArkUI-X ， 需要安裝 OpenHarmony SDK ，而沒有去進(jìn)行 HarmonOS SDK 的相關(guān)操作。

在上面菜單欄選擇 File - New - Import - Import Sample：

然后選擇 OpenHarmony ，選擇 ArkUI-X 下的 HelloWorld

創(chuàng)建完成后進(jìn)入此項(xiàng)目，等它依賴安裝完成，在右上角選擇 Previewer ，點(diǎn)擊運(yùn)行，就可以通過 OpenHarmony 預(yù)覽界面進(jìn)行預(yù)覽：

這時(shí)一個(gè)基礎(chǔ)的 OpenHarmony APP 工程就創(chuàng)建完成了。

移入代碼

此時(shí)回到之前步驟創(chuàng)建的 Harmon OS 工程，將里面的 UI 代碼移入進(jìn)來。

進(jìn)入 Harmon OS 工程的 entry - src - main 目錄，復(fù)制里面的 ets 與 resources 目錄：

同樣的，在 OpenHarmony 工程中刪掉這兩個(gè)目錄，替換為從 Harmon OS 工程復(fù)制的 复制ets 與 复制resources。

上述兩個(gè)文件夾替換完成后，將同位置的 复制module.json5 文件中的內(nèi)容也替換過去

整體步驟就是這樣：

复制module.json5 的 deviceTypes 這樣寫，在預(yù)覽的時(shí)候就可以選擇用手機(jī)模式還是平板模式：

再次預(yù)覽，就可以看到之前通過 Harmony OS 工程模板創(chuàng)建的界面顯示在了這個(gè) OpenHarmony 預(yù)覽界面上

編譯 OpenHarmony 工程

在 DevEco 菜單欄，選擇 Build App，在編譯為 OpenHarmony App 的同時(shí)，也會生成 Android 與 IOS 項(xiàng)目

編譯完成后，可以看到生成的 Android 工程了：

在 Android 中運(yùn)行

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

由于 ArkUI-X 編譯出來的為 native 文件，只能在 ARM 上運(yùn)行。Android Studio 提供的模擬器為 x64 架構(gòu)，所以無法在 Android Studio 的模擬器中預(yù)覽程序。

將上述生成的 Android 工程導(dǎo)入至 Android Studio ，等待 Gradle 初始化完成：

然后將它打包為 APK ：

發(fā)送到手機(jī)上安裝運(yùn)行，可以看到一切正常 ：

在 LibChecker 中也可以看到該 APP 使用了 ArkUI 的依賴：

總結(jié)

至此基于 ArkUI-X 的跨平臺開發(fā)流程已經(jīng)初步了解了，后續(xù)就是根據(jù)華為的文檔，學(xué)習(xí) ArkTS ，開發(fā)實(shí)質(zhì)性的應(yīng)用程序，以及更深入地進(jìn)行相關(guān)探索。

審核編輯 黃宇