体验用ArkUI-X开发一款跨平台应用之安装开发工具

背景

最近需要开发一个内部工具主要是获取服务器上应用的通知，因此需要开发一个简单的应用并且同时支持Android和iOS端，经过考虑有两个备选方案，一个是使用传统的Flutter来开发，另一个是使用华为出品的ArkUI这个框架来开发，两者对我来说都是需要从头开始学的，因此决定支持一下国产，就暂时选择了ArkUI。

关于ArkUI-X

ArkUI是一套构建分布式应用界面的声明式UI开发框架。它使用极简的UI信息语法、丰富的UI组件、以及实时界面预览工具，帮助您提升HarmonyOS应用界面开发效率30%。您只需使用一套ArkTS API，就能在多个HarmonyOS设备上提供生动而流畅的用户界面体验。

来自官网介绍。

虽然这里没有提到Android和iOS平台，但是从代码仓库的说明文档中可以看到它是支持的。

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

关于ArkTS

ArkTS是HarmonyOS优选的主力应用开发语言。ArkTS围绕应用开发在TypeScript（简称TS）生态基础上做了进一步扩展，继承了TS的所有特性，是TS的超集。因此，在学习ArkTS语言之前，建议开发者具备TS语言开发能力。

当前，ArkTS在TS的基础上主要扩展了如下能力：

基本语法：ArkTS定义了声明式UI描述、自定义组件和动态扩展UI元素的能力，再配合ArkUI开发框架中的系统组件及其相关的事件方法、属性方法等共同构成了UI开发的主体。 状态管理：ArkTS提供了多维度的状态管理机制。在UI开发框架中，与UI相关联的数据可以在组件内使用，也可以在不同组件层级间传递，比如父子组件之间、爷孙组件之间，还可以在应用全局范围内传递或跨设备传递。另外，从数据的传递形式来看，可分为只读的单向传递和可变更的双向传递。开发者可以灵活地利用这些能力来实现数据和UI的联动。 渲染控制：ArkTS提供了渲染控制的能力。条件渲染可根据应用的不同状态，渲染对应状态下的UI内容。循环渲染可从数据源中迭代获取数据，并在每次迭代过程中创建相应的组件。数据懒加载从数据源中按需迭代数据，并在每次迭代过程中创建相应的组件。

未来，ArkTS会结合应用开发/运行的需求持续演进，逐步提供并行和并发能力增强、系统类型增强、分布式开发范式等更多特性。

引自官网说明。

安装DevEco Studio开发工具

image-20240118223405714

点击立即下载后进入如下画面，根据自己的电脑系统进行下载即可

image-20240118223503645

由于我这边后期需要发布iOS的应用所以我使用的是Mac电脑，所以我选择的是Mac(ARM)版本。

解压好zip后是一个dmg的安装包

image-20240118223722972

双击后，按照提示将工具拖到Applications文件夹即可

image-20240118223817334

整个文件2个多G，还是稍微有点大的。

image-20240118223904335

image-20240118223943824

首次使用配置

image-20240118224159184

选择同意

image-20240118224215011

由于我们第一次使用，因此选择默认的即可。

需要安装nodejs以及ohpm

image-20240118224542600

这里对nodejs的版本是有要求的需要注意。

image-20240118224630309

选择下一步

image-20240118224649563

选择接受

image-20240118224705369

选择下一步

image-20240118224723871

等待安装完成。

image-20240118225117546

点击完成

image-20240118225206146

看到欢迎页面。

image-20240118225433718

我们点击问号图标，然后选择第一个，它可以自动帮我们检查环境是否正确。

image-20240118225735281

运行后可以看到，有一个感叹号，但问题不大。谁让我是丐版Mac呢。

创建Hello World示例程序

image-20240118230001393

我们选择默认的空白项目即可

image-20240118230136761

设置好项目名和包名，其他保持默认即可。

由于我们没有华为的手机，因此就选在模拟器中运行了。

我选择Tools > Device Manager

image-20240118230551204

可以看到没有模拟器，我们选择点击install

image-20240118230634923

会自动下载SDK

image-20240118230723880

完成下载后，点击右下角的新建模拟器按钮

image-20240118230803537

选择下一步

image-20240118230842337

点击下载，并等待下载完成。

image-20240118230910817

image-20240118231028738

选择下一步

image-20240118231057281

取一个名字

image-20240118231148400

可以看到我们创建好的模拟器已经显示出来了。

运行示例

点击run > select device选择设备

image-20240118231517481

选择Device Manager

image-20240118231634501

点击箭头运行模拟器

image-20240118231744541

启动成功后会看到上面的画面

image-20240118231848413

点击开发工具右上角的运行按钮，查看效果。

image-20240118231943747

至此我们完成了简单的项目环境搭建。

总结

我们今天这篇文章简单的介绍了一下开发工具的安装以及如何运行示例代码，需要注意的是nodejs的版本，以及硬盘空间的大小，因为整个工具包括SDK估计需要大概4~5G。

下篇文章我们一起来看看如何将这个示例项目发布到Android手机和iOS手机上。

我是Tango，一个热爱分享技术的程序猿我们下期见。

我正在参与2024腾讯技术创作特训营第五期有奖征文，快来和我瓜分大奖！