文章目录

在这里插入图片描述

每日一句正能量

这世界本就没有任何一句话可以让你醍醐灌顶，真正让你醍醐灌顶的只能是一段经历。
再精辟的道理，若没有亲身经历做底子，都只是别人的故事。听来如风过耳，无法真正改变行为。只有自己痛过、输过、失去过，那些话才会突然从纸面上站起来，击中你。所以不要迷信金句，要去生活。

系列导读：本系列文章面向HarmonyOS开发者，从开发环境搭建到企业级应用实战，系统讲解HarmonyOS NEXT（API 23）应用开发核心技术。第一篇介绍了开发环境搭建，第二篇深入讲解了DevEco Studio配置与模拟器使用。本文将带领读者创建第一个HarmonyOS应用——Hello World，掌握项目创建、目录结构、ArkTS声明式UI开发以及真机运行调试的完整流程。

一、前言：从零到一的跨越

在完成了HarmonyOS开发环境的搭建和DevEco Studio的配置之后，我们终于迎来了开发者旅程中最具仪式感的时刻——创建第一个HarmonyOS应用。正如学习任何编程语言时都会从"Hello World"开始，这个看似简单的应用却蕴含着HarmonyOS应用开发的核心范式：ArkTS声明式UI、Stage应用模型、状态驱动视图等关键技术理念。

HarmonyOS NEXT（API 23）作为华为自研操作系统的纯血版本，彻底摒弃了AOSP兼容层，采用全新的ArkUI框架和方舟编译器，为开发者提供了更加高效、流畅的原生开发体验。本文将基于HarmonyOS 6.1.0(23)版本，手把手教你创建并运行第一个HarmonyOS应用，同时深入解析其背后的技术原理。

二、创建新项目

2.1 启动项目创建向导

打开DevEco Studio，在欢迎界面点击**“Create Project”**按钮，启动项目创建向导。

在这里插入图片描述

图1：DevEco Studio欢迎界面

欢迎界面提供了多种快捷入口，包括创建新项目、打开已有项目、从版本控制系统获取代码等。对于初学者，我们选择**“Create Project”**开始创建新工程。

2.2 选择项目模板

在模板选择界面，左侧选择**“Application”（应用），然后在右侧选择"Empty Ability"**模板。这是HarmonyOS应用开发中最基础、最常用的模板，适合作为入门学习的起点。

在这里插入图片描述

图2：项目模板选择界面

模板说明：

  • Empty Ability：空白能力页面，最基础的模板
  • Full Screen Ability：全屏展示模板
  • About Ability：关于页面模板
  • Login Ability：登录页面模板

Ability是HarmonyOS应用的基本组成单元，类似于Android中的Activity，代表一个独立的用户界面或功能模块。Stage模型下，Ability分为UIAbility（带界面的能力）和ExtensionAbility（扩展能力）两大类。

2.3 配置项目信息

点击"Next"进入项目配置页面，需要填写以下关键信息：

在这里插入图片描述

图3：项目配置界面

配置项 说明 推荐值
Project name 项目名称 HelloHarmonyOS
Bundle name 应用包名（全局唯一标识） com.example.helloworld
Save location 项目保存路径 D:\DevEcoProjects\HelloHarmonyOS
Compatible SDK 兼容的SDK版本 6.1.0(23) ★推荐
Module name 模块名称 entry（默认）
Device type 支持的设备类型 Phone

关键配置解析：

  1. Bundle name：采用反向域名命名规范，如com.example.helloworld。该标识在华为应用市场全局唯一，一旦确定不可随意更改。

  2. Compatible SDK：选择6.1.0(23)以支持HarmonyOS NEXT最新特性。API 23引入了全新的沉浸光感悬浮组件、FaceAR/BodyAR能力、平行视界多设备适配等特性。

  3. Module name：entry是应用的主入口模块。HarmonyOS支持多模块架构，可在entry之外添加feature模块实现动态交付。

  4. Device type：支持多选，本文选择Phone作为目标设备。

点击**“Finish”**，DevEco Studio将自动完成项目初始化和依赖下载。首次创建项目时，工具会自动下载必要的SDK组件和构建工具，请耐心等待。

三、认识项目目录结构

项目创建完成后，我们来认识HarmonyOS应用的目录结构。理解项目结构是高效开发的基础。

在这里插入图片描述

图4：HelloHarmonyOS项目目录结构

3.1 核心目录解析

HelloHarmonyOS/
├── AppScope/                    # 应用全局配置
│   ├── app.json5               # 应用级配置文件
│   └── resources/              # 应用级资源
├── entry/                       # 主入口模块（核心）
│   ├── src/main/ets/           # ArkTS源代码
│   │   ├── entryability/       # 入口Ability
│   │   │   └── EntryAbility.ets
│   │   └── pages/              # 页面目录
│   │       └── Index.ets       # 首页（★核心）
│   ├── resources/              # 模块级资源
│   │   ├── base/media/         # 图片资源
│   │   ├── base/element/       # 字符串、颜色定义
│   │   └── rawfile/            # 原始文件
│   └── module.json5            # 模块级配置文件
├── build-profile.json5         # 构建配置
├── hvigorfile.ts               # 构建脚本
└── oh-package.json5            # 依赖管理

3.2 Stage模型核心文件

HarmonyOS采用Stage应用模型，这是从API 9开始引入的新一代应用架构，相比早期的FA（Feature Ability）模型具有更清晰的职责划分：

文件 层级 作用
app.json5 应用级 定义应用全局信息：bundleName、版本号、图标、应用名称等
module.json5 模块级 定义模块信息：Ability列表、入口页面、设备类型、权限等
EntryAbility.ets 代码级 应用入口Ability，控制生命周期和页面路由
Index.ets 代码级 首页UI组件，使用ArkTS声明式语法定义界面

app.json5示例：

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

module.json5示例：

{
  "module": {
    "name": "entry",
    "type": "entry",
    "description": "$string:module_desc",
    "mainElement": "EntryAbility",
    "deviceTypes": ["phone"],
    "pages": "$profile:main_pages",
    "abilities": [
      {
        "name": "EntryAbility",
        "srcEntry": "./ets/entryability/EntryAbility.ets",
        "description": "$string:EntryAbility_desc",
        "icon": "$media:layered_image",
        "label": "$string:EntryAbility_label",
        "startWindowIcon": "$media:startIcon",
        "startWindowBackground": "$color:start_window_background"
      }
    ]
  }
}

四、编写Hello World代码

4.1 认识Index.ets

打开entry/src/main/ets/pages/Index.ets，这是应用的首页组件文件。DevEco Studio提供了强大的代码编辑功能，包括语法高亮、智能提示、实时预览等。

在这里插入图片描述

图5：Index.ets代码编辑器

4.2 ArkTS声明式UI语法

ArkTS是HarmonyOS应用开发的核心语言，基于TypeScript扩展，专为声明式UI设计。以下是Hello World的完整代码：

// Index.ets - 首页组件
@Entry
@Component
struct Index {
  @State message: string = "Hello HarmonyOS!"

  build() {
    Column() {
      // 显示文本
      Text(this.message)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .fontColor("#E94560")

      // 间距
      Blank()
        .height(30)

      // 交互按钮
      Button("点击我")
        .onClick(() => {
          this.message = "你好，鸿蒙！"
        })
        .fontSize(20)
        .width(200)
        .height(50)
        .backgroundColor("#16213E")
    }
    .width("100%")
    .height("100%")
    .justifyContent(FlexAlign.Center)
    .backgroundColor("#F0F2F5")
  }
}

4.3 核心语法解析

语法元素 说明
@Entry 标记该组件为页面入口，可被路由跳转
@Component 声明一个自定义组件
struct Index 定义组件结构体，名称可自定义
@State 状态装饰器，标记响应式数据。数据变化自动触发UI刷新
build() 构建UI的方法，必须返回一个根组件
Column() 垂直布局容器，子组件纵向排列
Text() 文本组件
Button() 按钮组件
.onClick() 点击事件回调
链式调用 属性设置采用链式语法，如.fontSize(50).fontColor("#E94560")

4.4 状态管理原理

@State是ArkTS最核心的特性之一，实现了数据驱动视图的响应式编程范式：

@State message: string = "Hello HarmonyOS!"

当message的值发生变化时（如点击按钮后），ArkUI框架会自动检测状态变更，并精准更新对应的UI元素，无需手动操作DOM。这种机制带来了三大优势：

  1. 开发效率提升：开发者只需关注数据状态，无需处理UI更新逻辑
  2. 性能优化：框架自动计算最小更新范围，避免全量刷新
  3. 代码可维护性：UI与状态逻辑分离，结构清晰

在这里插入图片描述

图6：ArkUI声明式UI三层架构

五、运行应用

5.1 使用模拟器运行

在DevEco Studio工具栏，点击Run按钮（绿色三角形），选择已创建的模拟器设备，即可编译并运行应用。

在这里插入图片描述

图7：模拟器运行效果预览

模拟器特性：

  • 支持多种设备类型：Phone、Tablet、Foldable（折叠屏）、Wearable（穿戴）
  • 支持多屏协同：同一镜像可创建不同分辨率、DPI的屏幕
  • 支持旋转、折叠等物理操作模拟
  • 支持GPS、传感器等硬件模拟

5.2 使用真机调试

真机调试是应用开发的重要环节，能验证真实设备上的性能表现和兼容性。

在这里插入图片描述

图8：真机调试流程

详细步骤：

步骤1：开启开发者模式

  • 手机设置 → 关于手机 → 连续点击"版本号"7次
  • 提示"您已处于开发者模式"

步骤2：启用USB调试

  • 设置 → 系统和更新 → 开发人员选项
  • 开启"USB调试"开关

步骤3：连接电脑

  • 使用USB数据线连接手机与PC
  • 手机上弹出授权提示，选择"允许"

步骤4：配置自动签名

  • DevEco Studio → File → Project Structure → Project → SigningConfigs
  • 勾选"Support HarmonyOS"和"Automatically generate signature"
  • 点击"Sign In"登录华为开发者账号
  • 等待自动签名完成，点击"OK"

步骤5：运行应用

  • 点击工具栏Run按钮，选择已连接的真机设备
  • DevEco Studio自动编译、签名、安装、启动应用

注意：自动签名功能需要联网验证开发者身份。企业开发者也可配置手动签名，使用华为颁发的正式证书。

六、代码进阶：增强Hello World

6.1 添加动画效果

让文字出现时有缩放动画：

import { curves } from '@kit.ArkUI'

@Entry
@Component
struct Index {
  @State message: string = "Hello HarmonyOS!"
  @State scaleValue: number = 0.5
  @State opacityValue: number = 0

  aboutToAppear() {
    // 页面出现时触发动画
    animateTo({
      duration: 1000,
      curve: curves.springCurve()
    }, () => {
      this.scaleValue = 1.0
      this.opacityValue = 1
    })
  }

  build() {
    Column() {
      Text(this.message)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .fontColor("#E94560")
        .scale({ x: this.scaleValue, y: this.scaleValue })
        .opacity(this.opacityValue)

      Blank().height(30)

      Button("点击我")
        .onClick(() => {
          // 点击时切换文字并触发弹性动画
          animateTo({
            duration: 500,
            curve: curves.springCurve()
          }, () => {
            this.message = this.message === "Hello HarmonyOS!" 
              ? "你好，鸿蒙！" 
              : "Hello HarmonyOS!"
          })
        })
        .fontSize(20)
        .width(200)
        .height(50)
    }
    .width("100%")
    .height("100%")
    .justifyContent(FlexAlign.Center)
  }
}

6.2 使用系统资源

将硬编码的颜色和字符串提取到资源文件，便于多语言适配：

entry/src/main/resources/base/element/color.json：

{
  "color": [
    { "name": "primary", "value": "#E94560" },
    { "name": "background", "value": "#F0F2F5" }
  ]
}

entry/src/main/resources/base/element/string.json：

{
  "string": [
    { "name": "hello_text", "value": "Hello HarmonyOS!" },
    { "name": "click_me", "value": "点击我" }
  ]
}

代码中引用：

Text($r('app.string.hello_text'))
  .fontColor($r('app.color.primary'))

七、常见问题排查

问题现象 可能原因 解决方案
项目创建失败，提示SDK缺失 SDK未下载或版本不匹配 打开SDK Manager，下载对应版本的SDK和工具链
模拟器启动失败 HVM服务未启动或内存不足 检查BIOS虚拟化设置，确保分配足够内存
真机连接后无设备显示 USB调试未开启或驱动问题 重新插拔USB，检查开发者选项中的USB配置
签名失败 未登录华为账号或网络问题 检查网络连接，重新登录开发者账号
编译报错"ArkTS语法错误" 使用了不支持的语法特性 检查SDK版本，确保与代码语法兼容
应用安装后闪退 Ability配置错误或资源缺失 检查module.json5中pages路径配置

八、总结与展望

本文从项目创建、目录结构、ArkTS声明式UI语法、状态管理、模拟器/真机运行等方面，完整讲解了第一个HarmonyOS应用的开发流程。通过Hello World这个简单示例，我们掌握了HarmonyOS应用开发的核心范式：

  1. 声明式UI：用ArkTS描述界面状态，框架自动处理渲染
  2. 状态驱动：@State装饰器实现响应式数据绑定
  3. Stage模型：清晰的Ability生命周期和页面路由管理
  4. 一次开发，多端部署：同一套代码适配手机、平板、折叠屏等多种设备

在后续文章中，我们将深入探索HarmonyOS的分布式能力、服务卡片、AI原生开发等高级特性，逐步构建复杂的企业级应用。

转载自：https://blog.csdn.net/u014727709/article/details/163173987
欢迎 👍点赞✍评论⭐收藏，欢迎指正

# DevEco Studio
Logo
openEuler 社区

openEuler 是由开放原子开源基金会孵化的全场景开源操作系统项目，面向数字基础设施四大核心场景（服务器、云计算、边缘计算、嵌入式），全面支持 ARM、x86、RISC-V、loongArch、PowerPC、SW-64 等多样性计算架构

更多推荐

cover

C语言指针与内存管理课程 培训机构怎么选

avatar openEuler 社区

【无人机】四旋翼无人机的几何跟踪控制研究附Matlab代码

四旋翼无人机凭借结构简单、机动灵活、可垂直起降等优势，已在航拍测绘、应急救援、物流配送等领域得到大规模应用。随着应用场景对无人机飞行精度的要求不断提升，传统基于欧拉角的姿态控制方案的局限性日益凸显：欧拉角表示法天然存在奇异点问题，当无人机俯仰角接近±90°时会出现万向锁现象，导致控制器完全失效，无法完成大角度机动动作；同时基于局部线性化的小角度假设控制器，在无人机做高速机动、大角度姿态偏转时，控制

avatar openEuler 社区

【无人机】四旋翼无人机的几何跟踪控制研究附Matlab代码

四旋翼无人机凭借结构简单、机动灵活、可垂直起降等优势，已在航拍测绘、应急救援、物流配送等领域得到大规模应用。随着应用场景对无人机飞行精度的要求不断提升，传统基于欧拉角的姿态控制方案的局限性日益凸显：欧拉角表示法天然存在奇异点问题，当无人机俯仰角接近±90°时会出现万向锁现象，导致控制器完全失效，无法完成大角度机动动作；同时基于局部线性化的小角度假设控制器，在无人机做高速机动、大角度姿态偏转时，控制

avatar openEuler 社区