第2章第一个ArkUI应用

第2章第一个ArkUI应用：创建项目、项目结构解析、预览与运行、Hello World页面编写

好，咱们正式开始动手了。

这一章，我会带你从零创建一个ArkUI应用。说白了，就是让你亲眼看到自己的第一行代码跑在模拟器上。我当年第一次跑通Hello World时，那种感觉还挺奇妙的——虽然就几个字，但意味着你正式踏入了鸿蒙开发的大门。

2.1 创建项目：从DevEco Studio开始

首先，你得装好DevEco Studio。这个IDE是华为官方提供的，专门用来开发鸿蒙应用。我个人习惯用最新稳定版，省得踩一些奇奇怪怪的坑。

打开DevEco Studio后，你会看到欢迎页。点击“Create Project”，进入项目创建向导。

这里有几个关键选项，我列一下：

Application：选这个，咱们做的是手机App
Empty Ability：模板选空的，从零开始学
语言：选ArkTS，这是ArkUI的主力语言
兼容API版本：建议选API 9或以上，新特性支持更好

嗯，这里要注意一点：项目名称别用中文，也别带空格。我见过有新手用“我的第一个应用”做项目名，结果编译报错，排查了半天。老老实实用英文，比如 HelloArkUI。

小技巧：包名（Package name）系统会自动生成，一般不用改。但如果你打算以后上架应用市场，记得用自己公司的域名倒序，比如 com.yourcompany.helloarkui。

点击Finish后，IDE会开始下载依赖。第一次可能会慢一点，喝杯咖啡的功夫就好了。

2.2 项目结构解析：这些文件夹都是干嘛的？

项目创建完成后，你会看到左侧的项目文件树。别慌，我带你捋一遍核心目录。

目录/文件	作用
`entry/src/main/ets/`	这是你写代码的主战场。所有的ArkTS页面都放这里
`entry/src/main/resources/`	资源文件夹。图片、字符串、颜色配置都在这
`entry/src/main/module.json5`	模块配置文件。应用名称、图标、权限声明都在这里
`build-profile.json5`	构建配置。签名、版本号之类的
`oh-package.json5`	第三方依赖管理。类似前端的package.json

你想想看，这么多文件，其实你平时主要打交道的就两个地方：ets目录写代码，resources目录放资源。其他文件IDE会自动维护，不用太操心。

  重点：每个Ability（能力）对应一个页面。默认生成的 pages/Index.ets 就是你的首页。咱们的Hello World就写在这里。

2.3 预览与运行：看到你的第一个界面

代码写完了，总得看看效果吧？

DevEco Studio提供了两种方式：

Previewer（预览器）：在IDE右侧直接预览，不用开模拟器。改代码实时刷新，非常方便。我开发时基本都靠它快速调UI。
模拟器/真机运行：点击顶部工具栏的三角形运行按钮。第一次运行需要先配置模拟器或连接真机。

我个人建议：先学会用Previewer。为什么呢？因为它快。你改一行代码，1秒内就能看到效果。真机调试虽然更真实，但每次编译打包都要等几十秒，效率低。

避坑指南：我曾经遇到过Previewer显示正常，但真机上布局错乱的情况。原因是Previewer的屏幕尺寸和真机不一样。所以最终上线前，一定要在真机上跑一遍。

2.4 Hello World页面编写：动手写第一行代码

好，重头戏来了。

打开 entry/src/main/ets/pages/Index.ets，你会看到类似这样的代码：

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('Hello World')
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
    }
    .width('100%')
    .height('100%')
  }
}

这段代码干了什么呢？

@Entry：标记这个组件是页面的入口
@Component：声明这是一个自定义组件
struct Index：定义了一个叫Index的结构体，里面包含UI描述
build()：这是核心方法，描述你的界面长什么样
Column：一个垂直布局容器，子组件会从上往下排列
Text('Hello World')：显示文本“Hello World”
.fontSize(30)：设置字体大小为30
.fontWeight(FontWeight.Bold)：加粗

说白了，这就是一个垂直居中的页面，中间显示一行加粗的“Hello World”。

你可以试着改一下：把 Hello World 换成你自己的名字，或者改改字体颜色。比如加一行 .fontColor(Color.Red)，看看效果。

小练习：试着在Text下面再加一个Button组件。代码很简单：Button('点击我')。看看它会不会出现在文字下方。

嗯，到这里，你的第一个ArkUI应用就跑起来了。虽然只是几个字，但你已经掌握了最核心的流程：创建项目 → 理解结构 → 编写页面 → 预览运行。后面的章节，咱们会在这个基础上不断加料。

记住这个感觉。以后你写复杂页面时，回头看看这个Hello World，会发现——其实万变不离其宗。

📚 课程目录