《鸿蒙纪元》 是 张风捷特烈 计划打造的一套 HarmonyOS 开发系列教程合集。致力于创作优质的鸿蒙原生学习资源，帮助开发者进入纯血鸿蒙的开发之中。本系列的所有代码将开源在 HarmonyUnit 项目中:
github: github.com/toly1994328…
gitee: gitee.com/toly1994328…
本文是《鸿蒙纪·梦始卷》 的第一章，将介绍鸿蒙应用开发环境的搭建，以及运行并简单介绍初始项目的代码。这样就相当于站在了鸿蒙开发的门槛之前。
一、 开发环境搭建
万里长征第一步，首先需要把开发环境搭建起来。HarmonyOS 应用开发的环境，主要由 DevEco Studio 来处理。有如下几个部分：
1. IDE 工具的下载和安装：
IDE 是编程过程中编辑代码的场所，也是编译、运行、调试、发布等功能的工具箱。安装好 IDE 这一步将至关重要:
DevEco Studio 下载地址: developer.huawei.com/consumer/cn…
可以根据自己的电脑的平台选择下载的安装包:
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工程目录结构》
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 开发者无缝衔接体验。
下一章我们将从梦的起点开始，真正进入鸿蒙应用代码编写。完成最简单的交互式功能应用 - 计数器，大家可以自己先动手实践一下，我们下期再见 ~
| 系统中文语言 | 系统英文语言 |
|---|---|
更多文章和视频知识资讯，大家可以关注我的公众号、掘金和 B 站 。
- 鸿蒙纪元 QQ交流群： 727300436
