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

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

簡(jiǎn)單來(lái)說(shuō)，ArkTS + ArkUI-X 對(duì)標(biāo)的框架為 flutter，一次代碼，編譯為 native 全平臺(tái)運(yùn)行

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

IDE 獲取

HUAWEI DevEco Studio

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

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

HUAWEI DevEco Studio 4.0 Beta2

安裝過(guò)程很簡(jiǎn)單，這東西是基于 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ī)沒(méi)有安裝 nodejs 與 ohpm 也可以在這里下載安裝。

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

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

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

安裝 OpenHarmony SDK

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

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

選擇 OpenHarmony：

選擇后需要指定一下路徑，然后它會(huì)進(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)境變量，會(huì)有彈窗提示：

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

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

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

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

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

移入代碼

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

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

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

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

整體步驟就是這樣：

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

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

編譯 OpenHarmony 工程

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

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

在 Android 中運(yùn)行

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

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

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

然后將它打包為 APK ：

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

在 LibChecker 中也可以看到該 APP 使用了 ArkUI 的依賴(lài)：

總結(jié)

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

審核編輯 黃宇