Preface

This article is my first training note on HamonyOS application development. As a developer in the IOT team of Maykle Studio, I must master certain HarmonyOS application development techniques, and I believe that HarmonyOS will be more powerful in the future.I would also like to thank Ms. Xiaolan for her explanation.

Learning materials:

Hongmeng 2.x System Application Development Front-end Basic Tutorial-12 Episodes Completed_bilibili

Technical Fatty- Huawei Hongmeng System Application OpenHarmony JS Front-end Development Basic Tutorial-End(jspang.com)

badge-Container Component-Component-JS Extended Web-like Development Paradigm-Mobile Phone, Tablet, Smart Screen andSmart Wear Development-JS API Reference-HarmonyOS Application Development

1. What is OpenHarmony?

OpenHarmony means "openness and harmony" in Chinese, which represents the tolerance and humility of the Chinese nation.It can be said: "China also has its own mobile terminal operating system!"

The Hongmeng OpenHarmony open source project aims to build a framework and platform for the operating system of smart terminal devices in the era of full scenarios, full connectivity, and full intelligence, and to promote the prosperity and development of the Internet of Everything industry based on an open source approach.

OpenHarmony follows a layered design as a whole, from bottom to top: kernel layer, system service layer, framework layer and application layer.The system functions are expanded step by step according to "System > Subsystem > Components". In the multi-device deployment scenario, some non-essential components can be tailored according to actual needs. The core of the front-end field lies in the application layer "expansion".Application, third-party application" construction service.

The application layer includes "system applications" and "third-party non-system applications". An application consists of one or more FA (Feature Ability) or PA (Particle Ability).Among them, FA has a UI interface, providing the ability to interact with users; while PA has no UI interface, providing the ability to run tasks in the background and a unified data access abstraction.Applications developed based on FA/PA can implement specific business functions, support cross-device scheduling and distribution, and provide users with a consistent and efficient application experience.Obviously, the core point of our front-end development partners is the development of UI level in FA.

The UI part (FA) supports both pure JavaScript development, pure Java development, and mixed development of Java and JavaScript.FA supports the development of UI interface in Java and JavaScript.If you use Java, just like Android, use xml to define layout or Java code to define layout, each page is a PageAbility, use Java to write business code, and use intent to pass data between different pages.

If the JavaScript UI framework is used here, the writing method is basically the same as the "Vue + applet" application development. It also supports data, props, computed, watch and functions (methods), and can also create custom components, so thatIt is easy for web front-end engineers to transform into Hongmeng UI development engineers. It has to be said that Huawei's integration of existing concepts is quite impressive.

Second, the development environment and Hello World application experience

Refer to this technical article for development environment construction:

The above steps show the effect below

The above is the content of the document (there are 4 big pits in it, keep in mind), the following is the effect display

Fifth, use the image-animator component to build multi-frame animation

Be sure to use an absolute path when importing image files using JS!

Six, TodoList application construction

The effect is shown as follows: