ArkUI-X跨平台开发：快速开始

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中的定义，需要通过在不同平台的封装实现达到复用的目的。

技术架构

ArkUI跨平台框架整体架构如下图所示。

相关的设计思路如下：

• 采用 C++ 编写整体后端引擎代码，保持在多平台的可移植性，最小化平台依赖，降低平台移植成本。
• 整体绘制采用自渲染机制，降低平台依赖，同时进一步提升绘制效果的一致性。
• 抽象出平台适配层以及平台桥接层，以便不同平台的适配。

ArkUI声明式UI后端引擎，主要完成整体pipeline流程控制、视图更新、布局系统、多页面管理、事件分发和回调、焦点管理、动画机制、主题机制、资源管理/缓存/provider等。 其中的UI组件，主要通过显示相关组件细粒度化，动画、事件、焦点等机制组件化，满足适配不同前端所需要的灵活性。

整体的跨平台需求，就是扩展ArkUI开发框架到其他OS平台，帮助开发者降低多平台应用开发成本。

通过ACE Tools命令行工具创建跨平台应用工程，开发者基于一套主代码，就可以构建支持多平台的精美、高性能应用。

配置开发环境

您可以通过自己偏好的文本编辑器和ACE Tools命令行工具进行ArkUI-X应用开发。我们推荐您结合DevEco Studio进行应用开发以获取更好的开发体验，除提供代码智能编辑和双向预览功能外，还会对ArkTS接口进行跨平台过滤和编译提示。

• ACE Tools，是一套为ArkUI-X开发者提供的命令行工具，包括开发环境检查，新建项目，编译打包，安装调试。
• DevEco Studio，是OpenHarmony和HarmonyOS默认的应用程序开发工具，同时支持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 SDK

打开DevEco Studio设置界面，下载ArkUI-X SDK，这里使用API13版本。

配置Java环境变量

说明： 建议下载JDK17.0.10版本，下载请点击此处

[macOS]

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

[Windows] 新建系统环境变量

将%JAVA_HOME%\bin添加到PATH环境变量下

配置Android SDK

通过Android Studio的 SDK管理器下载和管理Android SDK，SDK Platform版本为26及以上

接下来配置环境变量

[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 ~ %