#HarmonyOS NEXT体验官#ArkUI-X构建应用第一篇 原创

ArkUI-X构建应用第一篇

ArkUI-X

ArkUI是一套构建分布式应用的声明式UI开发框架。它具备简洁自然的UI信息语法、丰富的UI组件、多维的状态管理，以及实时界面预览等相关能力，帮助您提升应用开发效率，并能在多种设备上实现生动而流畅的用户体验。

ArkUI-X进一步将ArkUI扩展到了多个OS平台：目前支持OpenHarmony、HarmonyOS、Android、 iOS，后续会逐步增加更多平台支持。开发者基于一套主代码，就可以构建支持多平台的精美、高性能应用。

ArKUI跨平台框架关键特征

1. 简洁自然的声明式语法。
2. 高效的渲染管线以及平台一致性的渲染机制。
3. 高效的方舟编译器以及运行时。
4. 统一的跨平台API能力集以及扩展机制。
5. 动态化特性

使用DevEco Studio开发ArkUI-X约束

• ArkUI-X支持在Android/iOS平台真机和模拟器上运行调试；
• 平台版本及构建工具要求：
  • OpenHarmony平台：支持API 10+；
  • HarmonyOS平台：支持API 11+；
  • Android平台：Android 8+，Level-26，version code: O，Codename: Oreo；
  • iOS平台：iOS 10+

依赖环境准备

在开发应用前，请先完成依赖环境准备。

表1 Windows平台环境要求

表2 macOS平台环境要求

安装ArkUI-X SDK

在File > Settings > ArkUI-X（macOS为DevEco Studio > Preferences > ArkUI-X）下，点击Location右侧的Edit，为SDK选择存储路径。

配置Android SDK安装目录环境变量

配置环境变量ANDROID_HOME，设置Android SDK安装目录。

1. 打开终端工具，执行以下命令，打开.bash_profile文件。

   vi ~/.bash_profile
   1.

   复制

2. 单击字母“i”，进入Insert模式。

3. 输入以下内容，配置Android SDK安装目录。

   export ANDROID_HOME=/Users/xxx/Library/Android/sdk
   1.

   复制

4. 编辑完成后，单击Esc键，退出编辑模式，然后输入“:wq”，单击Enter键保存。

5. 执行以下命令，使配置的环境变量生效。

   source ~/.bash_profile
   1.

   复制

接下来我们就到了创建项目的环节

以创建一个 Stage模型‘demo’项目为例：

ohos@user Desktop % ace create demo
? Enter the project name(demo): # 输入工程名称，不输入默认为文件夹名称
? Enter the bundleName (com.example.demo):  # 输入包名，不输入默认为com.example.工程名
? Enter the runtimeOS (1: OpenHarmony, 2: HarmonyOS): 1 # 输入RuntimeOS系统
? Please select the Complie SDk (1: 10, 2: 11, 3: 12): 2 # 输入编译SDK版本
Signing iOS app for device deployment using developer identity: "Apple Development: xxxxx"

Project created. Target directory:  ${当前目录}/demo.
In order to run your app, type:

   $ cd demo
   $ ace run

Your app code is in demo/entry.
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

应用运行

• 安装运行到Android/iOS/OpenHarmony设备（注：iOS设备执行ace run前请先打开Xcode完成应用签名）

cd demo
ace run
1.
2.

这里我们用到ACE Tools命令行，首先来看一下

ACE Tools命令行工具模块结构

这里给大家以ace config为例

ace config 使用方法

设置ACE工具链相关配置，包括OpenHarmony SDK路径，HarmonyOS SDK路径、ArkUI-X SDK路径、Android SDK路径、Node.js路径、编译输出路径等。

语法：

ace config [arguments]
1.

• arguments

例如使用ace config配置OpenHarmony SDK路径：

ohos@user ~ % ace config --openharmony-sdk /Users/ohos/Library/OpenHarmony/Sdk
Set "openharmony-sdk" value to "/Users/ohos/Library/OpenHarmony/Sdk" succeeded.
1.
2.

注意：如果配置路径中有空格，路径需要添加双引号，比如：

ohos@user ~ % ace config --openharmony-sdk "/Users/ohos/Library/Open Harmony/Sdk"
Set "openharmony-sdk" value to "/Users/ohos/Library/Open Harmony/Sdk" succeeded.
1.
2.

配置好开发环境，下一篇我们就来创建项目。