Basic Concepts

HarmonyOS 5 is the latest distributed operating system launched by Huawei, aiming to provide a unified development platform and runtime environment for various smart devices. HarmonyOS 5 emphasizes the concept of "develop once, deploy everywhere," allowing developers to easily develop applications for different devices (such as smartphones, tablets, smartwatches, smart home devices, etc.) using a unified development framework and toolchain.

Development Environment Setup

To start developing applications for HarmonyOS 5, you first need to download and install HUAWEI DevEco Studio. Here are the detailed installation steps:

1.Download DevEco Studio:
Visit the official Huawei website and download the installation package suitable for your operating system.

2.Install DevEco Studio:
Double-click the downloaded installation package and follow the prompts to complete the installation process. After installation, launch DevEco Studio.

3.Configure the Development Environment:
When launching DevEco Studio for the first time, you will be prompted to configure the development environment. Follow the prompts to complete the installation and configuration of SDKs, simulators, and other components.

Core Component Usage

Code Editor

DevEco Studio provides powerful code editing capabilities, supporting multiple programming languages such as ArkTS, JS, and C/C++. Here is a simple ArkTS code example demonstrating how to create a basic HarmonyOS application interface:

// main.ets
@Entry
@Component
struct MainAbility {
  build() {
    Column.create()
      .height('100%')
      .children([
        Text.create()
          .text('Hello, HarmonyOS 5!')
          .fontSize(20)
          .textAlign(TextAlign.Center)
          .margin({ top: 50 }),
        Button.create()
          .text('Click Me')
          .onClick(() => {
            console.info('Button clicked!');
          })
          .margin({ top: 20 })
      ])
  }
}

Previewer

DevEco Studio offers a multi-terminal two-way real-time preview feature, allowing you to view the application's display effects on different devices during development. Here are the steps to use the previewer:

1.Open the Previewer:
In DevEco Studio, click the "Preview" button on the toolbar to open the previewer window.

2.Select a Device:
In the previewer window, select the device type you want to preview (e.g., Phone, Tablet).

3.Real-Time Preview:
Modify the code in the code editor, and the previewer will display the modified effects in real-time.

Example Code

Here is a complete HarmonyOS 5 application example demonstrating how to create a simple counter application:

// main.ets
@Entry
@Component
struct CounterApp {
  @State count: number = 0;

  build() {
    Column.create()
      .height('100%')
      .justifyContent(FlexAlign.Center)
      .children([
        Text.create()
          .text(`Count: ${this.count}`)
          .fontSize(24)
          .textAlign(TextAlign.Center),
        Button.create()
          .text('Increment')
          .onClick(() => {
            this.count += 1;
          })
          .margin({ top: 20 }),
        Button.create()
          .text('Decrement')
          .onClick(() => {
            this.count -= 1;
          })
          .margin({ top: 10 })
      ])
  }
}

In this example, we create a simple counter application with a text displaying the count and two buttons labeled "Increment" and "Decrement". Clicking the buttons increases or decreases the counter value accordingly.