《鸿蒙纪元》 是 张风捷特烈 计划打造的一套 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