Huawei Lite Wearable Application Development using HUAWEI DevEco Studio (HarmonyOS)

Article Introduction

In this article we will develop application for Huawei Lite Wearable device using Huawei DevEco Studio. We will cover how to install and use Huawei DevEco Studio IDE. Develop one basic application for Huawei Lite Wearable device using JS language.

Huawei Lite Wearable

Huawei Lite Wearable watch application development supports JS language with the support of HTML tags and CSS for styling layouts.

Lite Wearable supports multiple features like:

Container:

· div

· stack

· list

· list-item

Basic Components:

· Animation

· image

· image-animator

· progress

· text

· marquee

· chart

· input

· slider

· switch

· picker-view

Basic Features:

· Application Context

· Console Logs

· Page Routing

· Application Configuration

· Timer

File Data:

· Data Storage

· File Storage

System Capabilities:

· Vibration

· Sensor

· Geographic Location

· Device Information

· Screen Brightness

· Battery Level

HUAWEI DevEco Studio

A one-stop, distributed platform that facilitates efficient application development and pioneering innovation on all devices.

1. Installation (DevEco Studio)

Follow guide below guide to install the pre-recursive for DevEco Studio on Window OS and MacOS.

https://developer.harmonyos.com/en/docs/documentation/doc-guides/software_install-0000001053582415

Please following the below link to install the Huawei DevEco Studio.

https://developer.harmonyos.com/en/develop/deveco-studio

2. New Project (Lite Wearable)

After installation of DevEco Studio, make new project.

Choose Device Lite Wearable and choose Template Empty.

Next provide Project Name and Package name accordingly.

3. Understanding Project Structure

After the project is created, its directory shown in below displayed image.

· .hml files describe the page layout.

· .css files describe the page style.

· .js files process the interactions between pages and users.

· The app.js file manages global JavaScript logics and application lifecycle.

· The pages directory stores all component pages.

· The common directory stores public resource files, such as media resources and .js files.

4. Screens Development

Let’s develop screens for our application. Before developing other screen we need to prepare global style (CSS) and global script (JS) files, which we can use in all project screens.

Create Global Style and Global Script:

We need to create two file utils.js and style.css in common folder, to use on complete screens.

1. Style.css:

We need to add all common styling of our application in this file.

2. Utils.js:

We need to add all common scripts of our application in this file.

How to create new Screens:

You need to right-click on pages folder, New -> JS Page

Index Screen:

Index is the Entry Screen, when application starts user will see this screen. Let’s proceed with development of index screen.

Index.hml:

Index.js:

index.css:

Index Screen Result:

Arrays Screen:

In this screen we will deal with arrays in HarmonyOS using JS language.

arrrays.hml:

arrrays.js:

arrrays.css:

Image Animator Screen:

In this screen we will deal with image animator using JS language.

animator.hml:

animator.js:

animator.css:

Animator Screen Result:

Css Animation Screen:

In this screen we will deal with css animation using CSS animation rules.

cssAnimation.hml:

cssAnimation.js:

cssAnimation.css:

CSS Animation Screen Result:

Swiper Screen:

In this screen we will deal with swiper using JS language to swipe content.

swiperScreen.hml:

swiperScreen.js:

swiperScreen.css:

Swiper Screen Result:

Progress Screen:

In this screen we will deal with progress using JS language to handle arc progress and horizontal progress bar.

progressScreen.hml:

progressScreen.js:

progressScreen.css:

Progress Screen Result:

Slider / Switch Screen:

In this screen we will deal with slider and switch using JS language.

sliderScreen.hml:

sliderScreen.js:

sliderScreen.css:

Slider / Switch Screen Result:

Picker Screen:

In this screen we will deal with picker using JS language to handle text picker with range and time picker.

pickerScreen.hml:

pickerScreen.js:

pickerScreen.css:

Picker Screen Result:

Storage Screen:

In this screen we will deal with storage using JS language to get, set, clear and delete storage using key/value references.

storageScreen.hml:

storageScreen.js:

storageScreen.css:

Storage Screen Result:

Sensor Screen:

In this screen we will deal with sensors using JS language to handle vibration, get Location, Brightness and Device information.

sensorScreen.hml:

sensorScreen.js:

sensorScreen.css:

Sensor Screen Result:

5. Result

Tips & Tricks:

· For better management of big application it’s a good practice to centralize you common scripts and common style in common folder. And create utils.js and style.css files and reuse this files in all over the project.

· In JS script when you make some variable, in callback functions you can store the reference of this to some variable and then call reference variable. Like var that = this.

References:

HarmonyOS JS API Official Documentation:

https://developer.harmonyos.com/en/docs/documentation/doc-references/js-apis-overview-0000001056361791

Conclusion:

Developers can able to make applications for Huawei Wearables using DevEco Studio. HarmonyOS JS API’s are very easy to understand and developer can able to make very elegant application while using there JS development skills.