ArkUI-X 跨平台開發快速上手詳情 - Android,環境變量,開發環境,HTML5,移動開發 Quarkn 博客

ArkUI-X簡介

ArkUI是一套構建分佈式應用的聲明式UI開發框架。它具備簡潔自然的UI信息語法、豐富的UI組件、多維的狀態管理，以及實時界面預覽等相關能力，幫助您提升應用開發效率，並能在多種設備上實現生動而流暢的用户體驗

ArkUI-X進一步將ArkUI擴展到了多個OS平台：目前支持OpenHarmony、HarmonyOS、Android、 iOS，後續會逐步增加更多平台支持。開發者基於一套主代碼，就可以構建支持多平台的精美、高性能應用。

關鍵特徵

ArKUI跨平台框架關鍵特徵如下：

簡潔自然的聲明式語法。
高效的渲染管線以及平台一致性的渲染機制。
高效的方舟編譯器以及運行時。
統一的跨平台API能力集以及擴展機制。
動態化特性。

假設和約束

本文提到的跨平台是指UI部分的跨平台，其UI代碼可以重用，其它應用對平台依賴的能力，需要應用層面進行適配，或通過JS API封裝機制（NAPI），進行實現暴露到JS層。

涉及平台能力的JS API（比如網絡、存儲等）請參考OpenHarmony中的定義，需要通過在不同平台的封裝實現達到複用的目的。

配置開發環境

您可以通過自己偏好的文本編輯器和ACE Tools命令行工具進行ArkUI-X應用開發。我們推薦您結合DevEco Studio進行應用開發以獲取更好的開發體驗，除提供代碼智能編輯和雙向預覽功能外，還會對ArkTS接口進行跨平台過濾和編譯提示。

DevEco Studio，是OpenHarmony和HarmonyOS默認的應用程序開發工具，同時支持ArkUI-X應用創建，構建，安裝，運行，調試和卸載等功能。
ACE Tools，是一套為ArkUI-X開發者提供的命令行工具，包括開發環境檢查，新建項目，編譯打包，安裝調試。

平台版本及構建工具要求：

OpenHarmony平台：支持API 10+；
Android平台：Android 8+，Level-26，version code: O，Codename: Oreo；
iOS平台：iOS 10+

在開發應用前，請先完成依賴環境準備。

表1 Windows平台環境要求

組件包名	説明
OpenHarmony SDK	OpenHarmony的SDK包。
ArkUI-X SDK	ArkUI-X的SDK包。
Android SDK	Android的SDK包。

表2 macOS平台環境要求

組件包名	説明
OpenHarmony SDK	OpenHarmony的SDK包。
ArkUI-X SDK	ArkUI-X的SDK包。
Android SDK	Android的SDK包。
Xcode	iOS應用開發環境，請參考官方環境搭建指導。

安裝OpenHarmony SDK

打開DevEco Studio設置界面，下載OpenHarmony SDK，這裏使用API13版本。

ArkUI-X 跨平台開發快速上手_Android

安裝ArkUI-X SDK

打開DevEco Studio設置界面，下載ArkUI-X SDK，這裏使用API13版本。

ArkUI-X 跨平台開發快速上手_Android_02

配置Java環境變量

説明：建議下載JDK17.0.10版本，下載請點擊此處

[macOS]

// 配置環境變量
export JAVA_HOME=/Users/usrername/path-to-java-sdk
export PATH=$JAVA_HOME/bin:$PATH

[Windows]

新建系統環境變量

ArkUI-X 跨平台開發快速上手_環境變量_03

將%JAVA_HOME%\bin添加到PATH環境變量下

ArkUI-X 跨平台開發快速上手_環境變量_04

配置Android SDK

通過Android Studio的 SDK管理器下載和管理Android SDK，SDK Platform版本為26及以上

ArkUI-X 跨平台開發快速上手_Android_05

接下來配置環境變量

[Windows]

新建系統環境變量，命名為：ANDROID_HOME = C:\Users\wangqi\Android\sdk
將 %ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools; 配置到Path路徑下

[MacOS]

// 配置環境變量
export ANDROID_HOME=/Users/usrername/path-to-android-sdk
export PATH=$ANDROID_HOME/tools:$ANDROID_HOME/tools/bin:$ANDROID_HOME/build-tools/28.0.3:$ANDROID_HOME/platform-tools:$PATH

配置IOS SDK 環境

Xcode和Command Line Tools for Xcode應用可前往Mac App Store應用商店下載安裝。
Command Line Tools也可使用命令方式安裝:

xcode-select --install

配置ACE Tools環境變量

ACE Tools，是一套為ArkUI-X開發者提供的命令行工具，包括開發環境檢查，新建項目，編譯打包，安裝調試。ACE Tools已經內置在ArkUI-X Sdk中。需要將ACE Tools運行腳本配置成全局生效的環境變量，參考如下配置方法：

[MacOS]

// 配置環境變量，實際示例如下：
export PATH=/Users/username/Library/ArkUI-X/Sdk/13/arkui-x/toolchains/bin:$PATH

[Windows]
可在桌面工具欄搜索框鍵入"環境變量"，然後選擇編輯系統環境變量，進行環境變量配置。另外，也可在控制枱通過如下命令進行配置。

// 配置環境變量，實際示例如下：
set PATH=%PATH%;D:\\ArkUI-X\\11\\arkui-x\\toolchains\\bin

開發環境檢查

ace check -v

執行 ace check -v 命令可以檢查ArkUI-X應用開發環境是否完備。

説明：開發環境檢查只識別IDE和SDK默認的安裝路徑，如果提示結果與您的預期不符，請您通過ace config命令指定實際的IDE安裝和SDK下載路徑。

執行完檢查命令後輸出結果如下，如果全是[√]則表示環境正確，如果有[x]則表示該項配置有問題，按照提示修改即可。

wangqi@wangqis-MacBook-Pro ~ % ace check -v
[√] ArkUI-X (ArkUI-X SDK version 5.1.1.100)
  • ArkUI-X SDK at /Users/wangqi/Library/ArkUI-X/Sdk
  • Node.js (v22.11.0) Runtime Environment at /usr/local
  • libimobiledevice 1.3.0
  • ios-deploy 1.12.2
[√] OpenHarmony toolchains - develop for OpenHarmony devices (OpenHarmony SDK version 5.1.0.107)
  • OpenHarmony SDK at /Users/wangqi/Library/OpenHarmony/Sdk
  • Ohpm at /Users/wangqi/Applications/command-line-tools
  • Java SDK at /Applications/deveco-studio.app/Contents/jbr/Contents/Home
  • OpenJDK Runtime Environment JBR-17.0.12+1-1087.25-jcef (build 17.0.12+1-b1087.25)
[√] HarmonyOS toolchains - develop for HarmonyOS devices (HarmonyOS SDK version 5.1.0)
  • HarmonyOS SDK at /Users/wangqi/Applications/command-line-tools/sdk
  • Ohpm at /Users/wangqi/Applications/command-line-tools
  • Java SDK at /Applications/deveco-studio.app/Contents/jbr/Contents/Home
  • OpenJDK Runtime Environment JBR-17.0.12+1-1087.25-jcef (build 17.0.12+1-b1087.25)
[√] Android toolchains - develop for Android devices (Android SDK version 36.0.0)
  • Android SDK at /Users/wangqi/Library/Android/sdk
  • Java SDK at /Applications/Android Studio.app/Contents/jbr/Contents/Home
  • OpenJDK Runtime Environment (build 21.0.5+-13047016-b750.29)
[√] DevEco Studio (version 5.1.1)
  • DevEco Studio at /Applications/deveco-studio.app
  • Java SDK at /Applications/deveco-studio.app/Contents/jbr/Contents/Home
  • OpenJDK Runtime Environment JBR-17.0.12+1-1087.25-jcef (build 17.0.12+1-b1087.25)
[√] Android Studio (version 2024.3)
  • Android Studio at /Applications/Android Studio.app
  • Java SDK at /Applications/Android Studio.app/Contents/jbr/Contents/Home
  • OpenJDK Runtime Environment (build 21.0.5+-13047016-b750.29)
[√] Xcode - develop for iOS (Xcode 16.2)
  • Xcode at /Applications/Xcode.app
  • Build version 16C5032a
Tools info :[√] OpenHarmony hdc installed
            [√] HarmonyOS hdc installed
            [√] adb installed
            [√] ios-deploy installed
[!] No connected device

  ! ACE Tools found issues in 1 category.
wangqi@wangqis-MacBook-Pro ~ %

編寫第一個ArkUI-X應用

創建工程

ArkUI-X 跨平台開發快速上手_環境變量_06

編寫代碼

ArkUI-X 跨平台開發快速上手_環境變量_07

編譯構建生成跨平台應用

DevEco Studio可打包生成不同平台的應用包。在主菜單欄，單擊Build > Build Hap(s)/APP(s) > Build APP(s)。

ArkUI-X 跨平台開發快速上手_Android_08

編譯後的ArkTS代碼、資源和平台膠水代碼已生成到Android和iOS應用工程中，後續安裝、運行和調試請使用Android Studio和Xcode，也可使用ACE Tools。

使用ACE Tools工具運行

先打開Android、IOS模擬器、或者直接連接真機測試。
使用 ace devices 命令查看是否有可用設備。

ArkUI-X 跨平台開發快速上手_環境變量_09

進入到項目所在文件夾，使用 ace run 命令運行到模擬器或者真機上，如果有多個設備需要輸入編號選擇需要運行的設備，如果只有一個設備直接運行到模擬器或者真機上。

ArkUI-X 跨平台開發快速上手_Android_10

Android 設備

ArkUI-X 跨平台開發快速上手_開發環境_11

IOS 設備

ArkUI-X 跨平台開發快速上手_環境變量_12

我正在參與鴻蒙開發者推廣活動，免費獲得鴻蒙開發者認證評論免費領取考試資料。

Quarkn 博客

Quarkn 博客

博客 / 詳情