专栏名称: 鸿洋

你好，欢迎关注鸿洋的公众号，每天为您推送高质量文章，让你每天都能涨知识。点击历史消息，查看所有已推送的文章，喜欢可以置顶本公众号。此外，本公众号支持投稿，如果你有原创的文章，希望通过本公众号发布，欢迎投稿。

鸿蒙纪·系列教程#01 - 环境搭建与项目结构

鸿洋 · 公众号 · android · 2024-11-08 08:35

正文

《鸿蒙纪元》是张风捷特烈[1] 计划打造的一套 HarmonyOS 开发系列教程合集。致力于创作优质的鸿蒙原生学习资源，帮助开发者进入纯血鸿蒙的开发之中。本系列的所有代码将开源在 HarmonyUnit[2] 项目中:

github: https://github.com/toly1994328/HarmonyUnit
gitee: https://gitee.com/toly1994328/HarmonyUnit

本文是《鸿蒙纪·梦始卷》的第一章，将介绍鸿蒙应用开发环境的搭建，以及运行并简单介绍初始项目的代码。这样就相当于站在了鸿蒙开发的门槛之前。

开发环境搭建

万里长征第一步，首先需要把开发环境搭建起来。HarmonyOS 应用开发的环境，主要由 DevEco Studio 来处理。有如下几个部分：

1. IDE 工具的下载和安装：

IDE 是编程过程中编辑代码的场所，也是编译、运行、调试、发布等功能的工具箱。安装好 IDE 这一步将至关重要:

DevEco Studio 下载地址: https://developer.huawei.com/consumer/cn/download/

可以根据自己的电脑的平台选择下载的安装包:

DevEco Studio 是基于IntelliJ IDEA 开源社区版开发，所以之前使用过 IntelliJ 系列 IDE(包括 Android Studio) 的开发者，可以无缝衔接到 DevEco Studio 的使用中。安装过程非常简单，下载压缩包后解压，双击即可安装。

2. 通过 DevEco Studio 配置开发环境

第一次打开 DevEco Studio 会进行配置开发环境阶段，需要下载一些东西。第一步如下 node 和 ohpm ，可以选择 Install 自己配置一下希望下载到哪个文件夹中。

第二步，选择 HarmonyOS SDK 下载的位置，可以自己任意指定:

下一步中需要点击一下箭头所示条目，将右侧滑动条拉到最底部，点击 Accept 接受证书:

接下来，下一步等待下载完成即可：

3.通过 DevEco Studio 创建初始项目

环境下载完后，可以通过 Create Project 创建一个项目:

这里可以选择一个最简单的模版，在屏幕上展示 hello world

填写应用的基本信息和选择项目的存储位置:

创建完后，我们可以得到一个如下所示的鸿蒙初始项目，项目结构如下:

4.通过 DevEco Studio 创建模拟器并运行项目

在 Tools/Device Manager 中可以创建和管理模拟器。

其中选择安装模拟器，然后等待下载完成：

下载完后，选择新建模拟器，左侧可以修改模拟器所在的磁盘位置：

如果没有模拟器的系统镜像，需要先下载：

下载完镜像后，在创建模拟器时选择对应的镜像，填写基本信息之后。回到列表面板，需要刷新一下才能看到。点击运行即可打开模拟器。

点击顶部的绿的三角按钮，可以运行项目，然后在模拟器的界面上就可以看到 Hello World 的字样。

到这里，环境搭建完毕，你的第一个 HarmonyOS 应用就完成了，下面来简单认识一下这个初始项目的代码。

鸿蒙初始项目代码

创建的初始项目结构如下，主要包含 AppScope 和 entry 两个文件夹，以及其他零散的配置文件。下面来简单认识一下它们的作用：

1. entry 文件夹

entry 是入口的意思，它表示一个 HarmonyOS工程模块，这样的模块可以编译构建成应用软件。项目创建后会自动打开其下的 src/main/ets/page/Index.ets 文件，这个文件中的代码决定了界面的呈现。

src  源代码
|-- main
    |-- ets: 存放 ArkTS 源码
        |--- entryability: 应用/服务的入口
        |--- entrybackupability: 应用提供扩展的备份恢复能力。
        |--- pages: 界面构建的源码
    |-- resources: 存放各种资源文件

在前期的很长时间，我们只需要关心在哪里写代码可以控制界面，哪里可以放置图形、多媒体、字符串等资源即可。所以这里就不一一列举每个零散文件的作用了，后期在打包发布时再做详细的介绍。如果现在就非常想知道，官方的文档介绍的非常详细：《ArkTS工程目录结构》[3]

2. 界面预览

我们可以通过右栏的 Previewer 页签预览界面，其中的 Hello World 文字对应着代码中 message 指代的字符串。你可以试着将文字改为 鸿蒙纪元 ，查看一下效果：

3. 初始界面代码

从代码中可以看到：

• message 变量被用在了 Text 的构造中，所以 Text 决定了文字的展示；

• Text 可以通过 fontSize、fontWeight 等方法设置文字样式；

• RelativeContainer 的宽高占满屏幕，Text 对象通过设置 alignRules 在水平和竖直方向居中。

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    RelativeContainer() {
      Text(this.message)
        .id('HelloWorld')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
    }
    .height('100%')
    .width('100%')  }}

大家可以在代码中改一下颜色、大小、文字等，重新运行观察效果。

尾声

到这里，我们就已经搭建好了鸿蒙开发环境，并简单地认识了一下项目中决定界面展示的代码。如果熟悉 Flutter 的朋友可以会对此非常熟悉，同样作为声名式 UI 框架的 ArkTS, 几乎可以让 Flutter 开发者无缝衔接体验。

下一章我们将从梦的起点开始，真正进入鸿蒙应用代码编写。完成最简单的交互式功能应用 - 计数器，大家可以自己先动手实践一下，我们下期再见 ~

系统中文语言	系统英文语言

引用链接

[1] 张风捷特烈:

https://juejin.cn/user/149189281194766

[2] 《ArkTS工程目录结构》:

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/start-with-ets-stage-V5#arkts%E5%B7%A5%E7%A8%8B%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84stage%E6%A8%A1%E5%9E%8B

最后推荐一下我做的网站，玩Android: wanandroid.com ，包含详尽的知识体系、好用的工具，还有本公众号文章合集，欢迎体验和收藏！