【鸿蒙实战开发】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平台环境要求

组件包名	说明
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应用开发环境，请参考官方环境搭建指导。

安装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
   
   

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

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

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

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

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

   source ~/.bash_profile
   
   

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

以创建一个 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.

应用运行

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

cd demo
ace run

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

ACE Tools命令行工具模块结构

这里给大家以ace config为例

ace config 使用方法

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

语法：

ace config [arguments]

• arguments

参数	说明
–android-sdk	Android SDK路径。
–android-studio-path	Android Studio安装路径（可选参数）。
–arkui-x-sdk	ArkUI-X SDK路径。
–build-dir	编译输出的路径。
–deveco-studio-path	DevEco Studio安装路径（可选参数）。
–harmonyos-sdk	HarmonyOS SDK路径。
–java-sdk	JDK路径。
–nodejs-dir	Node.js 路径。
–ohpm-dir	Ohpm路径。
–openharmony-sdk	OpenHarmony SDK路径。
–source-dir	ArkUI-X源码路径。

例如使用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.

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

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

写在最后

●如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
●点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
●关注小编，同时可以期待后续文章ing🚀，不定期分享原创知识。
●更多鸿蒙最新技术知识点，请移步前往小编：https://gitee.com/