ArkTS 是華為自研的開發語言。它在TypeScript(簡稱TS)的基礎上,匹配 ArkUI 框架,擴展了聲明式 UI 、狀態管理等相應的能力,讓開發者以更簡潔、更自然的方式開發跨端應用。
ArkUI-X 進一步將 ArkUI 擴展到了多個 OS 平臺:目前支持 OpenHarmony、HarmonyOS、Android、iOS,后續會逐步增加更多平臺支持。開發者基于一套主代碼,就可以構建支持多平臺應用。
簡單來說,ArkTS + ArkUI-X 對標的框架為 flutter,一次代碼,編譯為 native 全平臺運行
本文內容中會教大家如何用 ArkUI-X 開發一個 Android APP
IDE 獲取
HUAWEI DevEco Studio
鴻蒙開發指導文檔:[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md
]
首先需要下載支持 ArkUI-X 套件的華為開發工具 DevEco ,版本為 4.0 以上,目前可以下載預覽版進行體驗。下載地址:
HUAWEI DevEco Studio 4.0 Beta2
標題 | 地址 |
---|---|
Windows x64 | [下載地址] |
Mac(Intel) | [下載地址] |
Mac(Arm) | [下載地址] |
安裝過程很簡單,這東西是基于 IDEA 做的,和 Android Studio 體驗一致
Android Studio
ArkUI-X 可以將 ArkTS 項目編譯為一個 Android 項目,使用 Android Studio 可以將其打包為 APK。
Android Studio 安裝方法就不贅述了。下載地址:
[Download Android Studio & App Tools - Android Developers (google.cn)]
環境搭建
初次進入
DevEco 安裝完成后,首次進入需要設置 nodejs 與 ohpm。可以選擇本機已經安裝好的路徑,若本機沒有安裝 nodejs 與 ohpm 也可以在這里下載安裝。
注意:目前鴻蒙開發支持的 nodejs 版本為 14 和 16,如果本機裝了 18 版本的 nodejs 需要先卸載,將全局 nodejs 替換為 16。不然后續項目開發中會遇到各種問題。
上面這段話加粗的目的就是,我昨天頭鐵使用 nodejs 18 ,踩坑太多了。所以建議大家直接將全局 nodejs 使用 16 版本就行,避免不必要的麻煩。這一點我給官方提了 issue 但是還未收到回復。
之后便是無腦下一步,等它下載完成 SDK 與相關依賴即可(你可以將 SDK 路徑設置為其他文件夾)。
安裝 OpenHarmony SDK
相關依賴下載完成,進入 IDE 首頁后,先不急著創建項目,需要安裝 OpenHarmony SDK。
點擊 More Action , 選擇 SDK Manager:
選擇 OpenHarmony:
選擇后需要指定一下路徑,然后它會進行一些下載,等它下載完成:
下載完成后,勾選 API Version 10 相關的選項,點擊確定等它下載完成:
安裝 ArkUI-X SDK
OpenHarmony SDK 安裝完成后,就可以安裝 ArkUI-X SDK 了。同樣的在設置里面選擇 ArkUI-X ,指定路徑,等待下載完成。
設置環境變量
ArkUI-X 需要設置好相應的環境變量才能正確使用。若缺少相關環境變量,會有彈窗提示:
所以在裝好 Android Studio 后,需要將 Android SDK 添加至環境變量中:
變量名:ANDROID_HOME
變量值:你的 Android SDK 路徑
創建項目
創建 Harmon OS 工程
上述步驟完成后,可以創建項目了。這里有很多 Harmon OS 的基礎模板,可以任意選擇一個進行創建:
這里可以不用設置,保持默認即可。我們需要的是這個模板里面的代碼:
創建 OpenHarmony 工程
在創建了一個 Harmon OS 工程后,我們就進入到了 IDE 的實際界面,在此就可以找到創建 OpenHarmony 工程的選項。
為什么要 OpenHarmony 呢?首先要認識到 HarmonOS 和 OpenHarmony 的區別。這個具體區別在此我就不講了,可能會被當做引戰引起某些人不滿意。只需要知道重點: ArkUI-X 是基于 OpenHarmony 的技術 。在上一節也可以看到,使用 ArkUI-X , 需要安裝 OpenHarmony SDK ,而沒有去進行 HarmonOS SDK 的相關操作。
在上面菜單欄選擇 File - New - Import - Import Sample:
然后選擇 OpenHarmony ,選擇 ArkUI-X 下的 HelloWorld
創建完成后進入此項目,等它依賴安裝完成,在右上角選擇 Previewer ,點擊運行,就可以通過 OpenHarmony 預覽界面進行預覽:
這時一個基礎的 OpenHarmony APP 工程就創建完成了。
移入代碼
此時回到之前步驟創建的 Harmon OS 工程,將里面的 UI 代碼移入進來。
進入 Harmon OS 工程的 entry - src - main 目錄,復制里面的 ets 與 resources 目錄:
同樣的,在 OpenHarmony 工程中刪掉這兩個目錄,替換為從 Harmon OS 工程復制的 ets
與 resources
。
上述兩個文件夾替換完成后,將同位置的 module.json5
文件中的內容也替換過去
整體步驟就是這樣:
module.json5
的 deviceTypes 這樣寫,在預覽的時候就可以選擇用手機模式還是平板模式:
再次預覽,就可以看到之前通過 Harmony OS 工程模板創建的界面顯示在了這個 OpenHarmony 預覽界面上
編譯 OpenHarmony 工程
在 DevEco 菜單欄,選擇 Build App,在編譯為 OpenHarmony App 的同時,也會生成 Android 與 IOS 項目
編譯完成后,可以看到生成的 Android 工程了:
在 Android 中運行
HarmonyOS與OpenHarmony鴻蒙文檔籽料:mau123789是v直接拿
由于 ArkUI-X 編譯出來的為 native 文件,只能在 ARM 上運行。Android Studio 提供的模擬器為 x64 架構,所以無法在 Android Studio 的模擬器中預覽程序。
將上述生成的 Android 工程導入至 Android Studio ,等待 Gradle 初始化完成:
然后將它打包為 APK :
發送到手機上安裝運行,可以看到一切正常 :
在 LibChecker 中也可以看到該 APP 使用了 ArkUI 的依賴:
總結
至此基于 ArkUI-X 的跨平臺開發流程已經初步了解了,后續就是根據華為的文檔,學習 ArkTS ,開發實質性的應用程序,以及更深入地進行相關探索。
審核編輯 黃宇
-
ARM
+關注
關注
134文章
9165瀏覽量
369194 -
Android
+關注
關注
12文章
3945瀏覽量
127930 -
模擬器
+關注
關注
2文章
881瀏覽量
43421 -
鴻蒙
+關注
關注
57文章
2392瀏覽量
43050
發布評論請先 登錄
相關推薦
鴻蒙ArkUI-X跨平臺開發:【命令行工具(ACE Tools)】
![<b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkUI-X</b>跨平臺<b class='flag-5'>開發</b>:【命令行工具(ACE Tools)】](https://file1.elecfans.com/web2/M00/E7/65/wKgaomZHTraAVXmkAABqDt1o7NY191.jpg)
鴻蒙ArkUI-X跨平臺開發:【SDK目錄結構介紹】
![<b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkUI-X</b>跨平臺<b class='flag-5'>開發</b>:【SDK目錄結構介紹】](https://file1.elecfans.com/web2/M00/C5/D1/wKgZomYChGOAUaiiAADe1d8SeRY102.jpg)
鴻蒙開發ArkUI-X基礎知識:【ArkUI代碼工程及構建介紹】
![<b class='flag-5'>鴻蒙</b><b class='flag-5'>開發</b><b class='flag-5'>ArkUI-X</b>基礎知識:【<b class='flag-5'>ArkUI</b>代碼工程及構建介紹】](https://file1.elecfans.com/web2/M00/C5/CD/wKgZomYCdwyAIFf5AAB_7E1pFms943.jpg)
ArkUI-X開發指南:【SDK配置和構建說明】
![<b class='flag-5'>ArkUI-X</b><b class='flag-5'>開發</b>指南:【SDK配置和構建說明】](https://file1.elecfans.com/web2/M00/C5/D1/wKgZomYChGOAUaiiAADe1d8SeRY102.jpg)
資訊速遞 | ArkUI-X 預覽版已正式開源!
資訊速遞 | ArkUI-X 預覽版已正式開源!
![資訊速遞 | <b class='flag-5'>ArkUI-X</b> 預覽版已正式開源!](https://file1.elecfans.com/web2/M00/94/59/wKgZomTkw-uABWN4AAAbJZq7QKc293.png)
鴻蒙ArkUI-X跨平臺開發:【 應用工程結構說明】
![<b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkUI-X</b>跨平臺<b class='flag-5'>開發</b>:【 應用工程結構說明】](https://file1.elecfans.com/web2/M00/C6/C5/wKgaomYCyYKAZp6HAAB4LWPdpdQ014.jpg)
評論