鸿蒙 App 开发零基础入门：从环境搭建到首个跨端应用实现

鸿蒙 App 开发的入门门槛远低于传统原生开发（Android/iOS），基于 ArkTS 的声明式开发体系让开发者可以快速上手，而一次开发、多端部署的核心优势让鸿蒙成为跨端开发的最优选择之一。本文从环境搭建到首个 App 实现，再到功能拓展和后续学习方向，覆盖了鸿蒙开发的全入门流程，只要掌握了声明式 UI、组件、状态管理这三个核心基础，再通过持续的实战练习，就能快速掌握鸿蒙 App 开发的核心能

m0_59315734

309人浏览 · 2026-02-07 20:24:53

m0_59315734 · 2026-02-07 20:24:53 发布

鸿蒙（HarmonyOS/OpenHarmony）凭借一次开发、多端部署的核心优势，成为跨端应用开发的主流选择，其基于 ArkTS 的开发体系简洁高效，适配手机、平板、PC、智能穿戴等全场景设备。本文从零基础视角出发，带你完成鸿蒙开发环境搭建、核心语法入门，最终实现一个可运行在多设备的基础鸿蒙 App，全程附实战代码和操作步骤，新手也能快速上手。

一、鸿蒙开发核心认知

1. 开发语言与核心优势

鸿蒙主流开发语言为ArkTS，它基于 TypeScript 扩展而来，兼容 JS/TS 语法，新增了声明式 UI、状态管理、跨端组件等特性，专为鸿蒙全场景生态设计。核心开发优势：

跨端高效：一套代码适配手机、平板、PC、智能手表等多种设备，无需单独开发；
声明式 UI：以 “描述式” 写法构建界面，无需手动操作 DOM，开发效率远高于命令式 UI；
生态完善：官方提供丰富的 UI 组件、系统 API 和开发工具，第三方库持续丰富；
性能优异：基于鸿蒙内核优化，应用启动速度、运行流畅度优于传统跨端框架。

2. 开发工具与环境要求

鸿蒙官方唯一开发工具为DevEco Studio，集成了代码编写、编译、调试、模拟器运行等全流程功能，对电脑配置要求适中：

硬件要求：CPU i5 及以上，内存 8GB+（推荐 16GB），硬盘 50GB + 可用空间，支持 GPU 硬件加速；
系统要求：Windows 10/11 64 位、macOS 10.15 及以上；
核心依赖：JDK 11（DevEco Studio 已内置，无需单独安装）、鸿蒙 SDK（工具内一键下载）。

二、开发环境搭建：DevEco Studio 安装与配置

2.1 DevEco Studio 下载与安装

进入鸿蒙开发者官网（https://developer.harmonyos.com/），找到「开发工具」板块，下载对应系统的 DevEco Studio 最新版本（推荐 4.1 及以上）；
运行安装包，全程默认下一步，可自定义安装路径（避免中文路径）；
安装完成后，首次启动选择「Do not import settings」，进入初始化界面。

2.2 鸿蒙 SDK 配置

首次启动 DevEco Studio，会自动提示下载 SDK，选择HarmonyOS SDK（面向鸿蒙官方设备）或OpenHarmony SDK（面向开源鸿蒙设备），建议两者都下载；
选择 SDK 版本：推荐API 9/10/11（兼容主流鸿蒙设备，API 11 为最新稳定版）；
勾选需要的组件：Toolchains（编译工具）、System Image（模拟器镜像）、Device Manager（设备管理），点击「Next」一键下载；
下载完成后，重启 DevEco Studio，环境配置完成。

2.3 模拟器创建（关键步骤）

为了无需真机即可运行调试 App，需创建鸿蒙模拟器，支持手机、平板等设备类型：

打开 DevEco Studio，点击顶部工具栏「Tools」→「Device Manager」；
切换到「Phone」/「Tablet」标签，点击「Create Device」；
选择设备型号（如 Phone P60、Tablet MatePad），选择系统版本（如 HarmonyOS 4.0），点击「Next」；
自定义模拟器名称，勾选「Start the device after creation」，点击「Finish」；
等待模拟器启动，成功后会显示鸿蒙系统桌面，模拟器配置完成。

三、鸿蒙开发核心基础：ArkTS 声明式 UI 与核心语法

在开发首个 App 前，快速掌握 ArkTS 的核心基础，重点理解声明式 UI、组件、状态管理三个核心概念，这是鸿蒙开发的基础。

3.1 声明式 UI 核心思想

ArkTS 采用声明式 UI，简单来说：开发者只需要描述 “界面长什么样”，无需关注 “如何绘制界面”，系统会自动完成界面渲染和更新。对比传统命令式 UI（如 Android 原生），声明式 UI 无需手动 findView、设置控件属性，代码量减少 50% 以上，示例对比：

命令式 UI：需要先创建按钮，再设置文字、大小、点击事件，步骤繁琐；
声明式 UI：一行代码描述按钮的样式和交互，简洁直观。

3.2 核心语法：组件与布局

鸿蒙的界面由基础组件和布局组件构成，基础组件负责展示内容（如文字、按钮、图片），布局组件负责控制组件的排列方式（如垂直、水平、网格）。

1. 常用基础组件

Text：显示文字，支持字体、颜色、大小、对齐方式等属性；
Button：交互按钮，支持点击事件、悬浮效果、背景样式；
Image：显示图片，支持本地图片、网络图片，适配多设备尺寸；
Input：输入框，支持文本、密码、数字等输入类型；
List：列表组件，展示大量结构化数据，支持懒加载。

2. 常用布局组件

Column：垂直布局，子组件从上到下依次排列（最常用）；
Row：水平布局，子组件从左到右依次排列；
Stack：层叠布局，子组件按顺序层叠显示（如图片上叠加文字）；
Grid：网格布局，子组件按行列排列（适合展示卡片、商品列表）。

3.3 状态管理：@State 装饰器

鸿蒙通过装饰器实现状态与界面的双向绑定：当状态变量的值发生变化时，界面会自动刷新，无需手动更新。最基础的状态装饰器为 **@State**，用于标记组件内部的状态变量，示例：

// 定义状态变量，界面会跟随其值变化自动刷新
@State message: string = "Hello HarmonyOS!";
// 修改变量值，界面自动更新
this.message = "Hello ArkTS!";

四、实战开发：鸿蒙首个基础 App（附完整代码）

本次开发一个鸿蒙基础问候 App，包含文字展示、按钮交互、状态更新、图片显示核心功能，适配手机 / 平板设备，代码带详细注释，零基础也能看懂。

4.1 新建鸿蒙项目

打开 DevEco Studio，点击「Create New Project」；
选择项目模板：Empty Ability（空应用，适合新手），点击「Next」；
项目核心配置（关键，避免报错）：
- Project Name：自定义项目名，如「MyFirstHarmonyApp」（英文，无空格）；
- Bundle Name：反向域名格式，如「com.demo.harmony」（唯一标识，发布时不可修改）；
- Save Location：项目保存路径，避免中文和空格；
- Language：选择ArkTS（核心开发语言）；
- API Level：选择11（最新稳定版）；
- Device Type：勾选Phone和Tablet（适配手机和平板）；
点击「Finish」，等待项目初始化（约 1-2 分钟，自动生成目录结构和基础代码）。

4.2 项目核心目录说明

鸿蒙项目采用模块化结构，新手只需关注核心开发目录，其余默认目录无需修改：

MyFirstHarmonyApp/
├── entry/                # 应用主模块（所有开发工作都在这里）
│   ├── src/main/
│   │   ├── arkts/        # ArkTS代码核心目录
│   │   │   ├── MainAbility/  # 应用入口能力（无需修改）
│   │   │   └── pages/        # 页面目录（编写UI和业务逻辑）
│   │   │       └── Index.ets # 首页（本次开发唯一需要修改的文件）
│   │   ├── media/        # 资源目录（存放图片、音频等资源）
│   │   └── module.json5  # 应用配置文件（设备、权限、路由）
└── build-profile.json5   # 编译配置文件（默认即可）

4.3 编写核心代码：Index.ets

清空pages/Index.ets原有代码，复制以下带详细注释的代码，实现首个鸿蒙 App 的核心功能：

// 导入鸿蒙官方弹窗API，用于实现点击按钮后的提示效果
import promptAction from '@ohos.promptAction';

// 1. 入口装饰器：@Entry标记该组件为应用的首页入口，必加
@Entry
// 2. 组件装饰器：@Component标记这是一个自定义ArkTS组件，必加
@Component
// 3. 组件结构体：所有代码写在struct内部，命名与文件名一致（首字母大写）
struct Index {
  // 状态变量：@State标记，值变化时界面自动刷新
  // 问候语文本
  @State helloText: string = "Hello 鸿蒙App开发！";
  // 按钮点击次数
  @State clickCount: number = 0;

  // 4. 构建函数：build()是组件的核心，用于描述界面布局和内容，必加
  build() {
    // 根布局：Column垂直布局，占满整个屏幕，内容水平+垂直居中
    Column() {
      // 基础组件1：Text文字展示
      Text(this.helloText)
        .fontSize(30) // 字体大小（鸿蒙单位为vp，自动适配多设备）
        .fontWeight(FontWeight.Bold) // 字体加粗
        .color('#007DFF') // 字体颜色（鸿蒙官方主色调）
        .margin({ bottom: 50 }) // 底部外边距，与按钮拉开距离
        .textAlign(TextAlign.Center) // 文字居中

      // 基础组件2：Image图片展示（需先在media目录放入一张图片，命名为icon_harmony）
      Image($r('app.media.icon_harmony')) // 引用media目录下的图片
        .width(200) // 图片宽度
        .height(200) // 图片高度
        .borderRadius(100) // 圆形图片（宽高的一半）
        .margin({ bottom: 50 }) // 底部外边距

      // 基础组件3：Button按钮，实现点击交互
      Button(`点击我（已点击${this.clickCount}次）`)
        .width(280) // 按钮宽度
        .height(60) // 按钮高度
        .fontSize(20) // 按钮文字大小
        .backgroundColor('#007DFF') // 按钮背景色
        .borderRadius(30) // 圆角按钮
        .hoverEffect(HoverEffect.Scale) // 鼠标悬浮缩放效果（适配平板/PC）
        // 按钮点击事件：箭头函数调用自定义方法
        .onClick(() => this.onBtnClick())
    }
    // 根布局样式：占满整个屏幕，内容水平+垂直居中
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .backgroundColor('#F5F7FA') // 页面背景色（浅灰色，护眼）
  }

  // 自定义方法：按钮点击事件的业务逻辑
  onBtnClick() {
    // 1. 状态变量自增，更新点击次数
    this.clickCount++;
    // 2. 修改问候语文本，界面会自动刷新
    this.helloText = `鸿蒙开发真简单！已点击${this.clickCount}次`;
    // 3. 调用鸿蒙弹窗API，显示提示信息
    promptAction.showToast({
      message: '点击成功！鸿蒙App开发入门啦', // 弹窗文字
      duration: 2000, // 弹窗显示时间（毫秒）
      position: 'middle' // 弹窗位置（middle/top/bottom）
    });
  }
}

4.4 资源准备：添加图片

在entry/src/main/media目录下，放入一张图片（建议 PNG/JPG 格式，尺寸 200×200）；
将图片重命名为icon_harmony（与代码中$r('app.media.icon_harmony')对应），若重命名其他名称，需同步修改代码中的引用名称。

4.5 应用配置检查：module.json5

确保module.json5中已正确配置设备支持和页面路由，默认配置即可，关键部分如下：

{
  "module": {
    "name": "entry",
    "type": "ability",
    "deviceTypes": ["phone", "tablet"], // 适配手机、平板
    "abilities": [
      {
        "name": "MainAbility",
        "type": "page",
        "launchType": "standard",
        "pages": ["pages/Index"], // 首页路由，指向Index.ets
        "icon": "$media:icon",
        "label": "我的首个鸿蒙App"
      }
    ]
  }
}

四、编译与运行：让鸿蒙 App 跑起来

4.1 编译项目

点击 DevEco Studio 顶部工具栏「Build」→「Build Project」；
等待编译完成，控制台显示BUILD SUCCESS即表示编译成功；
- 若编译报错，大概率是代码语法错误（如少分号、变量名错误）或资源引用错误（如图片名称不匹配），根据控制台提示修改即可。

4.2 运行到模拟器

确保之前创建的鸿蒙模拟器已启动（在 Device Manager 中查看，若未启动，点击「Start」）；
点击 DevEco Studio 顶部工具栏「Run」→「Run 'entry'」，或直接点击绿色三角运行按钮；
选择已启动的鸿蒙模拟器，点击「OK」；
等待应用安装运行，模拟器中会自动启动该 App，实现文字、图片展示和按钮点击交互效果。

4.3 运行到真机（可选）

若有鸿蒙真机（HarmonyOS 3.0 及以上），可将 App 运行到真机，步骤如下：

鸿蒙真机开启「开发者模式」：设置→关于手机→连续点击「版本号」7 次，激活开发者模式；
进入开发者选项，开启「USB 调试」和「允许安装未知来源应用」；
用 USB 数据线将真机连接到电脑，DevEco Studio 会自动识别设备；
点击运行按钮，选择连接的真机，即可将 App 安装到真机运行。

五、App 功能拓展：快速实现更多核心特性

掌握首个基础 App 后，可基于现有代码快速拓展功能，以下为常用功能的代码片段，直接复制到Index.ets中即可使用，快速提升开发能力。

5.1 实现输入框交互（获取用户输入）

添加Input输入框，实现 “用户输入文字，点击按钮后展示输入内容” 的功能，在Image和Button之间添加以下代码：

// 新增状态变量，存储用户输入
@State inputText: string = "";

// 输入框组件
Input({
  placeholder: "请输入你想说的话", // 占位提示文字
  value: this.inputText // 绑定状态变量
})
  .width(280)
  .height(60)
  .fontSize(18)
  .padding(10)
  .border({ width: 1, color: '#007DFF', radius: 30 })
  .margin({ bottom: 30 })
  // 输入框内容变化事件，更新状态变量
  .onChange((value) => this.inputText = value)

修改onBtnClick方法，展示用户输入内容：

onBtnClick() {
  this.clickCount++;
  // 判断用户是否输入内容
  if (this.inputText) {
    this.helloText = `你说：${this.inputText}`;
  } else {
    this.helloText = `鸿蒙开发真简单！已点击${this.clickCount}次`;
  }
  promptAction.showToast({
    message: '点击成功！',
    duration: 2000,
    position: 'middle'
  });
}

5.2 实现列表展示（List 组件）

添加List列表组件，展示结构化数据，在Button下方添加以下代码：

// 定义列表数据
@State listData: string[] = ["鸿蒙基础组件", "状态管理", "布局组件", "系统API", "跨端适配"];

// 列表组件
List() {
  // 遍历列表数据，生成列表项
  ForEach(this.listData, (item) => {
    ListItem() {
      Text(item)
        .fontSize(20)
        .color('#333333')
        .width('100%')
        .padding(20)
    }
    .borderBottom({ width: 1, color: '#EEEEEE' }) // 列表项下边框
  })
}
.width(280)
.height(200)
.margin({ top: 50 })
.borderRadius(10)
.backgroundColor('#FFFFFF')