自从华为的鸿蒙系统出来后，这世上又多了一个岗位：鸿蒙开发工程师。我们将迈出第一步来搭建和学习鸿蒙开发。

鸿蒙开发用的是什么工具

鸿蒙使用的是HUAWEI DevEco Studio开发工具，是基于IntelliJ IDEA Community开源版本打造出来的版本。

DevEco Studio还具有如下特点：

• 智能的代码编辑：代码补全、代码高亮、错误检查等。
• 低代码UI开发：支持可视化的ui设计。
• 多端实时渲染预览：根据代码实时渲染并预览ui界面。
• 多端模拟仿真：支持harmonyOS本地模拟器进行模拟运行。

安装 HUAWEI DevEco Studio

运行环境要求

windows

操作系统：Windows 10/11 64 位内存：8GB 及以上硬盘：100GB 及以上分辨率：1280*800 像素及以上

macos

操作系统：macOS(X86) 10.15/11/12/13 macOS(ARM) 11/12/13 内存：8GB 及以上硬盘：100GB 及以上分辨率：1280*800 像素及以上

开始安装

DevEco下载地址：

https://developer.harmonyos.com/cn/develop/deveco-studio#download

选择自己的系统版本进行下载，我的电脑是Mac M1笔记本所有我这里选择的是Mac(ARM)架构的版本。

下载完成后是一个压缩包文件devecostudio-mac-arm-3.1.0.501.zip解压出里面的dmg文件进行双击安装。将DevEco-Studio

拖拽到应用程序中即可。首次安装可能需要安装一些必要的环境依赖，根据提示下一步下一步即可。由于我安装完成后再写的教程，所以该界面无法提供截图了。

创建一个Hello World程序

我们选择Create Project在弹出界面中选择一个模版进行开发。

在创建项目面板中我们选择Empty Ability空白面板。进行Next后会让我们填写项目的基本信息。

点击右侧的数字1标记的位置Previewer可以试试预览设计的ui界面。

数字2标记的位置是我们项目文件，项目目录大致如下：

• AppScope > app.json5：应用的全局配置信息。
• entry：HarmonyOS工程模块，编译构建生成一个HAP包。

• src > main > ets：用于存放ArkTS源码。
• src > main > ets > entryability：应用/服务的入口。
• src > main > ets > pages：应用/服务包含的页面。
• src > main > resources：用于存放应用/服务所用到的资源文件，如图形、多媒体、字符串、布局文件等。
• src > main > module.json5：Stage模型模块配置文件。主要包含HAP包的配置信息、应用/服务在具体设备上的配置信息以及应用/服务的全局配置信息。
• build-profile.json5：当前的模块信息、编译信息配置项，包括buildOption、targets配置等。其中targets中可配置当前运行环境，默认为HarmonyOS。
• hvigorfile.ts：模块级编译构建任务脚本，开发者可以自定义相关任务和代码实现。

• oh_modules：用于存放三方库依赖信息。
• build-profile.json5：应用级配置信息，包括签名、产品配置等。
• hvigorfile.ts：应用级编译构建任务脚本。

代码解析

在Index.ets中是我们项目启动的主界面。

@Entry
@Component
struct Index {
  // @State装饰的变量，或称为状态变量，一旦变量拥有了状态属性，就和自定义组件的渲染绑定起来。
  // 通俗的解释就是被@State修饰的变量发生改变时能够实时更新到ui界面上。
  @State message: string = 'Hello World'

  build() {
    // Row()布局容器 
    Row() {
      // Column()水平方向排列
      Column() {
        // 定一个文本标签 传入标签内容
        Text(this.message)
            // 设置字体大小
          .fontSize(50)
            // 设置字体粗细
          .fontWeight(FontWeight.Bold)
      }
      // 水平布局的宽度
      .width('100%')
    }
    // 整个布局容器的宽度 占整个屏幕尺寸
    .height('100%')
  }
}