Step-by-Step Guide to Building a HarmonyOS Demo App with Login, Register, and Home Pages

Introduction

This article presents a full HarmonyOS demo project that does not include backend services; a backend version may be added later. The author originally planned to follow the official CodeLabs but decided to create a custom demo instead.

The final project code is hosted on Gitee (instead of GitHub) for reference.

Login Page

After creating an empty project, two pages—Login and Register—are added. A common folder with Constant.ets stores reusable constants such as font size and colors.

The login page defines titles using uppercase words separated by underscores. Input fields are built with the TextInput component, and a Button triggers navigation to the Index page, passing username and password as parameters.

Images illustrate the UI layout and component hierarchy.

Register Page

The Register page mirrors the Login page but includes additional fields for email and password. The following ArkTS code implements the page logic:

import router from '@ohos.router'
import Constant from '../common/Constant'

@Entry
@Component
struct Register {
  @State message: string = 'Please Register'
  @State username: string = ''
  @State password: string = ''
  @State email: string = ''

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontColor(Constant.LOGIN_COLOR)
          .fontSize(Constant.LOGIN_SIZE)
          .fontWeight(FontWeight.Bold)
        TextInput({ placeholder: 'Username' })
          .margin({ top: 20 })
          .width(Constant.INPUT_WIDTH)
          .height(Constant.INPUT_HEIGHT)
          .onChange((value: string) => { this.username = value })
        TextInput({ placeholder: 'Email' })
          .margin({ top: 20 })
          .width(Constant.INPUT_WIDTH)
          .height(Constant.INPUT_HEIGHT)
          .onChange((value: string) => { this.email = value })
        TextInput({ placeholder: 'Password' })
          .type(InputType.Password)
          .margin({ top: 20 })
          .width(Constant.INPUT_WIDTH)
          .height(Constant.INPUT_HEIGHT)
          .onChange((value: string) => { this.password = value })
        Button('Register')
          .width(Constant.BUTTON_WIDTH)
          .height(Constant.BUTTON_HEIGHT)
          .margin({ top: 30 })
          .backgroundColor(Constant.BUTTON_COLOR)
          .onClick(() => {
            router.pushUrl({
              url: 'pages/Login',
              params: { username: this.username, password: this.password, email: this.email }
            })
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

After registration, the app navigates back to the Login page.

Index (Tab Bar)

The bottom navigation is built with the Tabs component. To keep the Index page clean, the tabs are extracted into a reusable TabBar component placed under a new views folder.

Images show the refactoring process and the final tab layout.

Home Page

The Home page is also modularized as a Home component. It includes a searchable header, a product list, and a refreshable list.

Search: a custom search bar is created (or the built‑in Search component can be used).

List: the List container holds multiple ListItem elements rendered with ForEach . An onReachEnd event handles infinite scrolling.

Refresh: the built‑in Refresh component from ArkUI provides pull‑to‑refresh functionality.

Mine Page

The personal profile page ( Mine ) is added to the tab bar. Since ArkUI lacks a specific input style, a custom TextPlus component with an arrow icon and click event is created to open a modal selector.

Images demonstrate the custom input, modal dialog, and final UI.

Conclusion

The tutorial stops at the Mine module, with plans for additional articles covering remaining modules, cloud development integration, and low‑code HarmonyOS components. The project repository is provided for readers to clone and experiment.