DEV Community

Marxu
Marxu

Posted on

๐Ÿ”ฅ Getting Started with HarmonyOS 5.0+: Build Your First Cross-Device App(HarmonyOS 5.0.0 or high)

#webdev #huawei #harmonyos

๐Ÿ”ฅ 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

  1. Download & install DevEco Studio 4.0+
  2. 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) } }
Enter fullscreen mode Exit fullscreen mode

๐Ÿ“ฑ 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! ]
Enter fullscreen mode Exit fullscreen mode

โ— 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!

Top comments (0)