Harmony開發之創建第一個HarmonyOS應用——Hello World的蜕變詳情 - Text,UI,應用開發,Android,移動開發 mb681965b2846e2 博客

引入：從空白畫布到交互體驗

在前兩篇中，我們搭建好了開發環境並瞭解了工程結構。現在讓我們真正動手創建第一個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模型，這是理解應用架構和生命週期管理的關鍵。建議在繼續學習前，嘗試以下擴展練習：

修改頁面樣式，更換顏色和佈局
添加更多交互元素，如輸入框、滑動條等
嘗試創建第三個頁面，實現更復雜的導航流程

實踐出真知：通過親手編寫和修改代碼，你會更深刻地理解各個概念的作用和相互關係，為後續的高級功能開發奠定堅實基礎。

mb681965b2846e2 博客

mb681965b2846e2 博客

博客 / 詳情