779 Star 4.6K Fork 1.8K

OpenHarmony / docs

Create your Gitee Account
Explore and code with more than 8 million developers,Free private repositories !:)
Sign up
Clone or Download
start-overview.md 3.95 KB
Copy Edit Web IDE Raw Blame History
ester.zhou authored 2022-05-12 17:42 . update quick-start folder


This document is intended for novices at developing OpenHarmony applications. It will introduce you to the OpenHarmony project directory structure and application development process, by walking you through a stripped-down, real-world example – building two pages and implementing redirection between pages. The following figure shows how the pages look on the DevEco Studio Previewer.


Before you begin, there are some basic concepts that will help you better understand OpenHarmony: UI framework and ability.

Basic Concepts

UI Framework

OpenHarmony provides a UI development framework, known as ArkUI. ArkUI provides capabilities you may need for application UI development, including a wide array of components, layout calculation, animation, UI interaction, and drawing capabilities.

ArkUI comes with two development paradigms: JavaScript-based web-like development paradigm (web-like development paradigm for short) and TypeScript-based declarative development paradigm (declarative development paradigm for short). You can choose whichever development paradigm that aligns with your practice.

Development Paradigm Language UI Update Mode Applicable To Intended Audience
Web-like development paradigm JavaScript Data-driven Applications and service widgets with simple UIs Frontend web developers
Declarative development paradigm Extended TypeScript (eTS) Data-driven Applications involving technological sophistication and teamwork Mobile application and system application developers

For DevEco Studio V2.2 Beta1 and later versions, both the traditional coding mode and the low-code mode are supported when the JS language is used for development.

For eTS language development, DevEco Studio V3.0 Beta3 and later versions support low-code development in addition to the traditional code development mode.

On the OpenHarmony low-code development pages, you can design your application UI in an efficient, intuitive manner, with a wide array of UI editing features.


An ability is an abstraction of a capability that an application can provide. The Ability class is an essential component to OpenHarmony applications. An application may provide various capabilities, and so it can have multiple abilities. These abilities can be deployed together or independently from each other.

Abilities are classified into two types: Feature Ability (FA) and Particle Ability (PA). Each type has their respective templates for different capabilities. FAs support only the Page template (also called the Page ability), which is used to provide the capability of interacting with users. A Page ability consists of one or more pages. The figure below shows the relationship between a Page ability and pages.


This document provides a Page ability instance with two pages. For more information about ability development, see Ability Development.

Tool Preparation

  1. Install the latest version of DevEco Studio.

  2. Install DevEco Studio and configure the development environment. For details, see Configuring the OpenHarmony SDK.

When you are done, follow the instructions in Getting Started with eTS in the Traditional Coding Approach,Getting Started with eTS in the Low-Code Approach, Getting Started with JavaScript in the Traditional Coding Approach, and Getting Started with JavaScript in the Low-Code Approach.

Comment ( 0 )

Sign in to post a comment