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平台环境要求

表2 macOS平台环境要求

2.1 安装OpenHarmony SDK

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

2.2 安装ArkUI-X SDK

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

2.3 配置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环境变量下

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

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 创建工程

3.2 编写代码

3.3 编译构建生成跨平台应用

DevEco Studio可打包生成不同平台的应用包。在主菜单栏，单击Build > Build Hap(s)/APP(s) > Build APP(s)。

编译后的ArkTS代码、资源和平台胶水代码已生成到Android和iOS应用工程中，后续安装、运行和调试请使用Android Studio和Xcode，也可使用ACE Tools。