从零搭建完整 HarmonyOS 应用实战教程

本文将带你从零开始搭建一个完整的 HarmonyOS 应用。我们以 MoodLite(心情日记)为实战案例,手把手讲解项目初始化、模块结构、配置文件、入口页面等核心环节,让你快速上手鸿蒙开发。
在这里插入图片描述

一、开发环境准备

1.1 安装 DevEco Studio

DevEco Studio 是华为官方提供的 HarmonyOS 集成开发环境,基于 IntelliJ IDEA 构建。前往华为开发者官网下载最新版本。
推荐使用 DevEco Studio 5.0+ 版本,内置 HarmonyOS SDK 6.0,支持最新的 ArkTS 语法特性。
在这里插入图片描述

1.2 配置 SDK

安装完成后,进入 File → Settings → HarmonyOS SDK,确保已下载以下组件:

组件 说明 是否必须
HarmonyOS SDK 核心开发包 ✅ 必须
Toolchains 编译与构建工具 ✅ 必须
Previewer UI 预览器 推荐
SysCap 系统能力集 可选

在这里插入图片描述

二、创建项目

2.1 新建工程

在这里插入图片描述
打开 DevEco Studio,选择 Create HarmonyOS Project,模板选择 Empty Ability。填写项目信息:

配置项 示例值 说明
Project Name MoodLite 项目名称
Bundle Name com.example.moodlite 应用包名(唯一标识)
Compile SDK 6.0.1(21) 编译 SDK 版本
Module Name entry 主模块名称
Language ArkTS 开发语言

在这里插入图片描述

2.2 项目目录结构

MoodLite/
├── AppScope/                    # 应用级配置
│   ├── app.json5                # 应用配置(包名、版本等)
│   └── resources/               # 应用级资源(图标等)
├── entry/                       # 主模块
│   ├── src/
│   │   ├── main/
│   │   │   ├── ets/             # ArkTS 源代码
│   │   │   │   ├── pages/       # 页面
│   │   │   │   ├── model/       # 数据模型
│   │   │   │   ├── viewmodel/   # 视图模型
│   │   │   │   ├── data/        # 数据层
│   │   │   │   ├── common/      # 公共模块
│   │   │   │   └── widget/      # 桌面小组件
│   │   │   ├── resources/       # 模块资源
│   │   │   └── module.json5     # 模块配置
│   │   ├── mock/                # Mock 数据
│   │   ├── ohosTest/            # 鸿蒙测试
│   │   └── test/                # 单元测试
│   ├── build-profile.json5      # 模块构建配置
│   └── oh-package.json5         # 模块依赖
├── build-profile.json5          # 项目构建配置
├── oh-package.json5             # 项目依赖
└── hvigorfile.ts                # 构建脚本

三、核心配置文件详解

3.1 应用配置 — app.json5

{
  "app": {
    "bundleName": "com.example.moodlite",
    "vendor": "MoodLite",
    "versionCode": 1000000,
    "versionName": "1.0.0",
    "icon": "$media:app_icon",
    "label": "$string:app_name"
  }
}

3.2 模块配置 — module.json5

{
  "module": {
    "name": "entry",
    "type": "entry",
    "description": "$string:module_desc",
    "mainElement": "EntryAbility",
    "deviceTypes": ["phone", "tablet"],
    "deliveryWithInstall": true,
    "installationFree": false,
    "pages": "$profile:main_pages"
  }
}

3.3 构建配置 — build-profile.json5

{
  "app": {
    "products": [{
      "name": "default",
      "targetSdkVersion": "6.0.1(21)",
      "compatibleSdkVersion": "6.0.1(21)",
      "runtimeOS": "HarmonyOS"
    }]
  },
  "modules": [{
    "name": "entry",
    "srcPath": "./entry"
  }]
}

四、编写第一个页面

4.1 入口能力 — EntryAbility

import { AbilityConstant, UIAbility, Want } from "@kit.AbilityKit";
import { hilog } from "@kit.PerformanceAnalysisKit";
import { window } from "@kit.ArkUI";

export default class EntryAbility extends UIAbility {
  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    hilog.info(0x0000, "MoodLite", "Ability onCreate");
  }

  onDestroy(): void {
    hilog.info(0x0000, "MoodLite", "Ability onDestroy");
  }

  onWindowStageCreate(windowStage: window.WindowStage): void {
    hilog.info(0x0000, "MoodLite", "Ability onWindowStageCreate");
    windowStage.loadContent("pages/MainPage", (err) => {
      if (err.code) {
        hilog.error(0x0000, "MoodLite", "Failed to load content: %{public}s", JSON.stringify(err));
        return;
      }
      hilog.info(0x0000, "MoodLite", "Succeeded in loading content");
    });
  }
}

4.2 主页面 — MainPage

@Entry
@Component
struct MainPage {
  @State message: string = "Hello MoodLite";

  build() {
    Column() {
      Text(this.message)
        .fontSize(32)
        .fontWeight(FontWeight.Bold)
        .margin({ bottom: 20 })

      Button("开始记录心情")
        .fontSize(18)
        .width("60%")
        .height(50)
        .onClick(() => {
          this.message = "欢迎使用 MoodLite!";
        })
    }
    .width("100%")
    .height("100%")
    .justifyContent(FlexAlign.Center)
  }
}

4.3 注册页面路由

{
  "src": [
    "pages/MainPage",
    "pages/Welcome",
    "pages/AddEntry"
  ]
}

五、运行与调试

5.1 模拟器运行

DevEco Studio 内置 HarmonyOS 模拟器,点击工具栏的 Run 按钮即可启动。
在这里插入图片描述

5.2 真机调试

连接鸿蒙手机后,在 File → Project Structure → Signing Configs 中配置签名证书,即可部署到真机。
真机调试必须配置签名。开发阶段可使用自动签名,上架时需替换为正式证书。

在这里插入图片描述

总结

本文以 MoodLite 心情日记为案例,简要讲解了从零搭建鸿蒙应用的核心流程,包括开发环境准备、项目创建、核心配置文件解析、页面编写及运行调试,覆盖鸿蒙开发入门关键要点,帮助快速上手 ArkTS 及 HarmonyOS 应用开发。

Logo

作为“人工智能6S店”的官方数字引擎,为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。

更多推荐