第2章 鸿蒙应用开发基础

2.1 应用结构

鸿蒙应用一般是由以下部分组成的：

• entry：
  主模块（类似 Android 的 app），包含主 Ability、页面代码和资源。

• ability：
  应用的功能单元，类似于 Android 的 Activity/Service。

  • 每个 ability 负责一类任务，例如：显示页面、后台任务、跨设备通信。

• profile：
  配置文件（JSON 格式），定义应用属性：

  • config.json（旧版）或 module.json5（新版），配置应用 ID、权限、Ability 信息。

• resources：
  应用资源文件，包括：

  • base/media（图片、音频等多媒体资源）
  • base/element（字符串、颜色、尺寸定义）
  • base/layout（布局文件，ArkTS 一般写在 .ets 页面里）

📌 结构示例：

HelloHarmony/
 └── entry/
     ├── src/main/
     │   ├── ets/                // ArkTS 页面与逻辑
     │   │   └── MainAbility/
     │   │       └── pages/
     │   │           └── index.ets
     │   ├── resources/
     │   │   ├── base/media/     // 图片
     │   │   ├── base/element/   // 字符串/颜色/尺寸
     │   │   └── base/profile/   // 配置文件
     │   └── module.json5
     └── build.gradle

---

2.2 Ability 类型

鸿蒙应用的核心是 Ability，分为三种：

1. FA（Feature Ability）

   • 带 UI 的功能单元，负责显示界面和交互。
   • 类似于 Android 的 Activity。

2. PA（Particle Ability）

   • 无 UI 的功能单元，运行在后台，适合做任务调度。
   • 类似于 Android 的 Service。

3. Service Ability（分布式能力）

   • 主要用于 跨设备交互，让不同设备共享能力（例如：手机调用手表的传感器）。

✅ 一般我们初学时，主要用 FA 来创建界面。

---

2.3 页面结构和路由机制

鸿蒙 ArkTS 页面结构基于 组件（Component） ：

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text("我是首页")
    }
  }
}

• @Entry：标记应用的入口页面。
• @Component：定义组件。
• build()：页面 UI 的构建函数。
• Column / Row：布局容器。

页面跳转（路由机制）

鸿蒙提供 router 模块管理页面跳转：

import router from '@system.router';

// 跳转到另一个页面
router.push({ url: 'pages/detail' });

// 返回上一个页面
router.back();

✅ 页面一般放在 entry/src/main/ets/MainAbility/pages/ 目录下。

---

2.4 常用资源管理

1. 字符串（resources/base/element/string.json）

{
  "hello_world": "你好，鸿蒙！",
  "app_name": "HelloHarmony"
}

使用方式：

Text($r('app.string.hello_world'))

---

2. 图片（resources/base/media/）

例如：放入一张图片 logo.png。
使用方式：

Image($r('app.media.logo'))
  .width(100)
  .height(100)

---

3. 颜色（resources/base/element/color.json）

{
  "primary": "#007DFF",
  "secondary": "#FF5722"
}

使用方式：

Text("带颜色的文字")
  .fontColor($r('app.color.primary'))

---

2.5 实操：创建一个简单的应用，显示文本和图片

下面我们做一个小 Demo：显示欢迎文字 + 应用 Logo。

1. 在 resources/base/media/ 里放入一张 logo.png

例如：

resources/base/media/logo.png

---

2. 编辑首页 index.ets

@Entry
@Component
struct Index {
  build() {
    Column({ space: 20, alignItems: HorizontalAlign.Center }) {
      Text($r('app.string.hello_world'))
        .fontSize(26)
        .fontWeight(FontWeight.Bold)
        .fontColor(Color.Black)
        .margin(20)

      Image($r('app.media.logo'))
        .width(150)
        .height(150)
        .borderRadius(20)
        .margin(10)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F5F5F5')
  }
}

---

3. 修改 resources/base/element/string.json

{
  "hello_world": "欢迎来到鸿蒙世界！",
  "app_name": "HelloHarmony"
}

---

4. 运行效果

• 页面居中显示一段文字：欢迎来到鸿蒙世界！
• 下方显示一张 Logo 图片（带圆角）。

---

✅ 到这里，你已经掌握了：

• 鸿蒙应用的基本结构
• Ability 的概念
• 页面结构与跳转机制
• 常用资源管理
• 实战：文字 + 图片展示