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

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

在前两篇中，我们搭建好了开发环境并了解了工程结构。现在让我们真正动手创建第一个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 = 0

  build() {
    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
  }
}

配置项说明：

bundleName：应用唯一标识
versionCode：内部版本号
versionName：用户可见的版本号
minAPIVersion：兼容的最低API版本

使用预览器实时调试

DevEco Studio的预览器功能让开发更加高效：

打开预览器：点击编辑窗口右上角的Previewer图标
实时预览：修改代码后预览器会自动更新
多设备预览：支持同时预览不同设备尺寸的效果

总结：第一个应用的完整开发流程

通过本篇实践，我们完成了HarmonyOS应用开发的完整入门流程：

核心技能掌握

✅ 工程创建：熟悉了项目创建和模板选择

✅ UI开发：掌握了基础组件的使用和布局方法

✅ 交互实现：学会了事件处理和状态管理

✅ 多页面导航：理解了页面路由和跳转机制

✅ 实时调试：运用预览器提高开发效率

开发要点回顾

声明式UI：HarmonyOS采用声明式编程范式，通过描述UI应该是什么样子而不是如何一步步构建
响应式更新：使用@State装饰器实现数据变化时的自动UI更新
组件化思维：每个页面都是独立的组件，支持复用和组合
配置驱动：通过配置文件管理应用元数据和路由信息

下一步学习建议

在掌握了基础应用创建后，下一篇我们将深入解析HarmonyOS的Stage模型，这是理解应用架构和生命周期管理的关键。建议在继续学习前，尝试以下扩展练习：

修改页面样式，更换颜色和布局
添加更多交互元素，如输入框、滑动条等
尝试创建第三个页面，实现更复杂的导航流程

实践出真知：通过亲手编写和修改代码，你会更深刻地理解各个概念的作用和相互关系，为后续的高级功能开发奠定坚实基础。

posted @ 2025-12-24 10:29 wrystart 阅读(2) 评论(0) 收藏举报

刷新页面返回顶部

wrystart