🔥 Getting Started with HarmonyOS 5.0+: Build Your First Cross-Device App(HarmonyOS 5.0.0 or high)

🔥 Getting Started with HarmonyOS 5.0+: Build Your First Cross-Device App

Want to build next-gen apps that run across phones, tablets, TVs, and more? HarmonyOS 5.0+ offers a powerful, distributed app model — and you can build your first app in minutes.

🚀 Why HarmonyOS?

HarmonyOS (鸿蒙) is Huawei’s next-gen OS designed for seamless device collaboration — from phones to wearables. With HarmonyOS 5.0+, you get:

ArkTS (modern TypeScript-based dev language)
Cross-device interaction
Lightning-fast startup & UI performance

🧰 Step 1: Environment Setup

Download & install DevEco Studio 4.0+
Create a new project:

App Template: Empty Feature Ability (Stage Model)
Language: ArkTS
1. Select device: Phone

🛠️ Step 2: Hello HarmonyOS Code

File: entry/src/main/ets/pages/Index.ets

@Component
struct IndexPage {
  @State message: string = 'Welcome to HarmonyOS 5.0+!';

  build() {
    Column() {
      Text(this.message)
        .fontSize(26)
        .fontWeight(FontWeight.Bold)
        .margin(20)

      Button('Click Me')
        .onClick(() => {
          this.message = 'Hello, cross-device future!';
        })
        .margin(20)
    }
    .height('100%')
    .width('100%')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }
}

📱 Step 3: Run and See

Click “Run” → choose an emulator or connected device
Initial screen shows: Welcome to HarmonyOS 5.0+!
Click the button → message updates to: Hello, cross-device future!

🖼️ Preview Result:

[ Welcome to HarmonyOS 5.0+! ]
[      Click Me Button       ] → [ Hello, cross-device future! ]

❗ Common Pitfalls

Problem	Reason	Solution
App does not run	Wrong SDK or build target	Set build target to HarmonyOS 5.0.0+
Component doesn’t render	Missing `@Component` decorator	Add `@Component` before your struct
Button click has no effect	Wrong event name (`onTap`, `onClick`)	Use `onClick` only in ArkTS
Layout broken on device	Column width/height not set	Add `.width('100%')` and `.height('100%')`

📌 Summary

In under 10 minutes, you’ve:

Built your first HarmonyOS 5.0+ app
Understood ArkTS layout structure
Interacted with state via button click

🔮 What’s Next?

In the next post, we’ll explore ArkTS UI system in-depth and build a reusable counter component from scratch.

👉 Follow for more HarmonyOS magic. Comments welcome!

Marxu @marxu