当前位置：首页 > news >正文

Harmony开发之创建第一个HarmonyOS应用——Hello World的蜕变

news 2026/3/27 1:34:33

引入：从空白画布到交互体验

在前两篇中，我们搭建好了开发环境并了解了工程结构。现在让我们真正动手创建第一个HarmonyOS应用，体验从空白工程到具备交互功能的完整开发流程。这个经典的"Hello World"应用将带你感受HarmonyOS应用开发的基本范式，为后续复杂功能打下坚实基础。

通过本篇学习，你将掌握如何创建一个完整的应用，理解核心代码的作用，并实现基本的页面交互功能。

讲解：从零构建交互式应用

创建新工程与模板选择

首先在DevEco Studio中创建新工程，选择"Empty Ability"模板，这个模板提供了最基础的项目结构，适合初学者入门。

关键配置步骤：

工程类型：选择Application（应用开发）
模板：Empty Ability
Compile SDK：建议选择6.0.1(21)或更高版本
语言：ArkTS（默认选择）

工程创建完成后，DevEco Studio会自动生成基础代码和资源文件，这是HarmonyOS应用的起点。

理解自动生成的代码结构

查看entry/src/main/ets/pages/Index.ets文件，这是应用的主页面：

@Entry
@Component
struct Index {@State message: string = 'Hello World'build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)}.width('100%')}.height('100%')}
}

代码解析：

@Entry：装饰器，标识这是页面的入口组件
@Component：装饰器，表示这是一个自定义组件
@State：装饰器，使message变量具备响应式特性
build()方法：描述UI布局的结构和样式

添加交互功能：按钮与事件

让我们为应用添加交互功能，实现点击按钮改变文本内容：

@Entry
@Component
struct Index {@State message: string = 'Hello World'@State count: number = 0build() {Row() {Column() {Text(this.message).fontSize(30).fontWeight(FontWeight.Bold).margin({ bottom: 20 })Text(`点击次数: ${this.count}`).fontSize(20).fontColor('#666').margin({ bottom: 30 })Button('点击我') {Text('改变文本').fontSize(18).fontWeight(FontWeight.Medium)}.type(ButtonType.Capsule).backgroundColor('#007DFF').padding({ left: 20, right: 20 }).onClick(() => {this.count++this.message = `Hello HarmonyOS! 点击: ${this.count}`})}.width('100%')}.height('100%').padding(20)}
}

交互逻辑说明：

Button组件：创建可点击的按钮
onClick事件：定义按钮点击时的响应逻辑
状态更新：通过修改@State变量触发UI自动更新

页面路由与多页面导航

实际应用通常包含多个页面，让我们创建第二个页面并实现页面间跳转。

1. 创建第二个页面

在pages文件夹下新建Second.ets文件：

@Entry
@Component
struct Second {@State message: string = '这是第二个页面'build() {Column() {Text(this.message).fontSize(30).fontWeight(FontWeight.Bold).margin({ bottom: 40 })Button('返回首页') {Text('返回').fontSize(18)}.type(ButtonType.Capsule).backgroundColor('#FF6A00').onClick(() => {// 返回上一个页面router.back()})}.width('100%').height('100%').justifyContent(FlexAlign.Center)}
}

2. 配置页面路由

在resources/base/profile/main_pages.json中添加路由配置：

{"src": ["pages/Index","pages/Second"]
}

3. 实现页面跳转

在首页添加跳转逻辑：

import { BusinessError } from '@kit.BasicServicesKit';// 在按钮的onClick事件中添加
.onClick(() => {let uiContext: UIContext = this.getUIContext();let router = uiContext.getRouter();router.pushUrl({ url: 'pages/Second' }).then(() => {console.info('跳转到第二个页面成功')}).catch((err: BusinessError) => {console.error(`跳转失败: ${err.code}, ${err.message}`)})
})

应用配置与元数据

每个HarmonyOS应用都需要正确的配置信息。打开AppScope/app.json5文件：

{"app": {"bundleName": "com.example.myapplication","vendor": "example","versionCode": 1000000,"versionName": "1.0.0","icon": "$media:app_icon","label": "$string:app_name","minAPIVersion": 12,"targetAPIVersion": 12}
}

配置项说明：