ArkUI-X跨平台開發之環境搭建

1.ArkUI-X簡介

ArkUI是一套構建分佈式應用的聲明式UI開發框架。它具備簡潔自然的UI信息語法、豐富的UI組件、多維的狀態管理,以及實時界面預覽等相關能力,幫助您提升應用開發效率,並能在多種設備上實現生動而流暢的用户體驗
ArkUI-X進一步將ArkUI擴展到了多個OS平台:目前支持OpenHarmony、HarmonyOS、Android、 iOS,後續會逐步增加更多平台支持。開發者基於一套主代碼,就可以構建支持多平台的精美、高性能應用。

1.1 關鍵特徵

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

1.2 假設和約束

本文提到的跨平台是指UI部分的跨平台,其UI代碼可以重用,其它應用對平台依賴的能力,需要應用層面進行適配,或通過JS API封裝機制(NAPI),進行實現暴露到JS層。
涉及平台能力的JS API(比如網絡、存儲等)請參考OpenHarmony中的定義,需要通過在不同平台的封裝實現達到複用的目的。

2. 配置開發環境

您可以通過自己偏好的文本編輯器和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平台環境要求

[.net 面向對象程序設計深入](9).NET Core 跨平台開發環境搭建_weixin_跨平台


表2 macOS平台環境要求

[.net 面向對象程序設計深入](9).NET Core 跨平台開發環境搭建_weixin_跨平台_02

2.1 安裝OpenHarmony SDK

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

[.net 面向對象程序設計深入](9).NET Core 跨平台開發環境搭建_weixin_Android_03

2.2 安裝ArkUI-X SDK

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

[.net 面向對象程序設計深入](9).NET Core 跨平台開發環境搭建_weixin_跨平台_04

2.3 配置Java環境變量

説明: 建議下載JDK17.0.10版本,下載請點擊此處
[macOS]

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

[Windows]

新建系統環境變量

[.net 面向對象程序設計深入](9).NET Core 跨平台開發環境搭建_weixin_環境變量_05


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

[.net 面向對象程序設計深入](9).NET Core 跨平台開發環境搭建_weixin_跨平台_06

2.4 配置Android SDK

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

[.net 面向對象程序設計深入](9).NET Core 跨平台開發環境搭建_weixin_環境變量_07


接下來配置環境變量

[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

2.5 配置IOS SDK 環境

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

xcode-select --install

2.6 配置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

2.7 開發環境檢查

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.

3.編寫第一個ArkUI-X應用

3.1 創建工程

[.net 面向對象程序設計深入](9).NET Core 跨平台開發環境搭建_weixin_跨平台_08

3.2 編寫代碼

[.net 面向對象程序設計深入](9).NET Core 跨平台開發環境搭建_weixin_環境變量_09

3.3 編譯構建生成跨平台應用

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

[.net 面向對象程序設計深入](9).NET Core 跨平台開發環境搭建_weixin_環境變量_10


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

3.4 使用ACE Tools工具運行

● 先打開Android、IOS模擬器、或者直接連接真機測試。

● 使用 ace devices 命令查看是否有可用設備。

[.net 面向對象程序設計深入](9).NET Core 跨平台開發環境搭建_weixin_跨平台_11

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

    IOS 設備