鸿蒙纪·梦始卷#01 - 环境搭建与初始项目

1,794 阅读5分钟

《鸿蒙纪元》张风捷特烈 计划打造的一套 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 会进行配置开发环境阶段,需要下载一些东西。第一步如下 nodeohpm ,可以选择 Install 自己配置一下希望下载到哪个文件夹中。

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

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

接下来,下一步等待下载完成即可:


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

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

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

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

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


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

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

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

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

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

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

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

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


二、鸿蒙初始项目代码

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


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