体验一下使用 ArkUI 进行 HarmonyOS 开发并与 Compose 简单对比

最新推荐文章于 2025-04-22 22:29:15 发布

愿天堂没有996

最新推荐文章于 2025-04-22 22:29:15 发布

阅读量1.1k

点赞数 20

CC 4.0 BY-SA版权

分类专栏： HarmonyOS 鸿蒙开发移动开发文章标签： harmonyos openharmony 移动开发应用开发鸿蒙开发

本文链接：https://blog.csdn.net/m0_70748458/article/details/138194205

作者：equationl

前言

最近几年各个技术公众号和技术群都在唱衰原生安卓开发，疯狂贩卖焦虑。

搞得我也焦虑的不行，在谷歌的 Compose 推出后就赶紧去学，但是又觉得好像 Compose 的热度也不算太高，又去学 Flutter 。

转头两个都还没学明白呢，大佬们又在说鸿蒙下次更新不兼容安卓了，再不学鸿蒙开发就等着失业吧。

啊？这？这能忍？这必须学啊！

于是抽出时间来简单了解了一下使用 ArkUI 的鸿蒙应用开发。

编写第一个鸿蒙应用

搭建环境

鸿蒙应用开发有它自己的一个 IDE ，叫做 DevEco Studio 。

可以在官网下载到，按照你自己的系统选择对应的安装包后直接下载安装即可。

安装过程不用我多介绍吧，毕竟都是老程序员了，这点基础知识还是得有吧。

然后，等你安装完打开你就会发现，这个 IDE 怎么会这么眼熟呢？

眼熟就对了啊，因为：

它也是基于 Intellij PLatform 开发的。

安装好后，首次打开 DevEco Studio 会要求你进行环境下载和配置，因为鸿蒙开发使用的 ArkUI 框架是基于 ArkTS 语言的，而 ArkTS 语言是 TS 语言的超集，所以我们需要配置对应的环境。

按照 IDE 提示首先下载并安装 Node.js 和 Ohpm ，因为上面说过 ArkTS 是基于 TS 的超集，所以需要 Node.js 的支持；而 Ohpm 是华为自己的依赖管理工具。

安装好 Node.js 和 Ohpm 后需要安装鸿蒙的 SDK ，依旧是按照 IDE 提示直接下载安装即可。

安装完成后即可正常使用 IDE 了。

Hello, World!

打开刚安装配置好的 DevEco Studio，在欢迎页面选择 Create Project - Application - Empty Ability 然后点击 Next ：

在这个页面会要求填写一些应用的基本信息，和安卓开发类似：

Project name 是项目名称
Bundle name 是包名，也是应用的唯一 ID
Save location 就是项目保存位置
Compile SDK 要使用的编译 SDK 版本
Model 应用程序开发模型，Stage 是新版的模型，FA 是老版本使用的模型，这里选择 Stage 即可，他俩的区别看这里（吐槽一下，华为的文档链接居然是错的，还得我自己去搜索正确的文档）

修改完后点击 Finsh 即可创建我们的第一个 Hello World 项目。

打开这个项目的主页UI文件：

./entry/src/main/ets/pages/index.ets

然后在右边侧栏点击 Previewer 按钮即可打开 UI 预览：

如果想要运行这个程序的话，我们需要创建一个模拟器：

在顶栏菜单中的运行按钮旁边点击 No devies 下拉框，选择 Device Manager，然后按照提示创建一个模拟器并启动。

（吐槽一下华为魔改的这个 IDE 明明我已经创建过模拟器了，却不能像 Android Studio 一样直接在运行菜单中选择这个模拟器并直接一键启动运行，非得手动进入 Device Manager 里面启动了模拟器才能运行程序）

启动好模拟器后，运行菜单应该已经默认选中了这个模拟器，点击运行图标运行即可：

这样我们就能看到它的运行效果了：

项目结构

接下来，我们来了解一下 ArkUI 的项目的结构，不然我们连需要改哪儿个文件都不知道了，哈哈。

项目整体结构如图：

其中，

AppScope

这个目录存放应用全局所需要的资源文件。

在其下有一个 app.json5 配置文件，该文件是应用的全局配置文件，一个典型的全局配置文件包含以下内容：

{
  "app": {
    "bundleName": "com.example.myapplication",
    "vendor": "example",
    "versionCode": 1000000,
    "versionName": "1.0.0",
    "icon": "$media:app_icon",
    "label": "$string:app_name"
  }
}

其中的配置分别表示：