[Huawei Developers] Freemind R:
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.

.stack {
width: 454px;
height: 454px;
justify-content: center;
}
.background {
width:454px;
height:454px;
}
.container {
flex-direction: column;
justify-content: center;
align-items: center;
left: 0px;
top: 0px;
width: 454px;
height: 454px;
background-color: transparent;
}
.containerFlex {
display: flex;
justify-content: center;
align-items: center;
left: 0px;
top: 0px;
width: 454px;
height: 454px;
background-color: transparent;
}
.title {
font-size: 30px;
text-align: center;
width: 350px;
height: 60px;
}
.row{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 454px;
height: 100px;
background-color: transparent;
}
.btn{
display: flex;
width: 170px;
height: 50px;
}
.btn-small{
display: flex;
width: 100px;
height: 50px;
}
.backBtn {
width: 200px;
height: 50px;
}

2. Utils.js:

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

import router from '@system.router'

export default {
backToHome(){
router.replace({
uri: 'pages/index/index'
});
},
}

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:

<stack class="stack">
<image src='/common/background.png' class="background"></image>
<div class="container" onswipe="touchMove">
<list class="showList">
<list-item class="showListItem" onclick="openPage('arrays/arrays')">
<text>
Array
</text>
</list-item>
<list-item class="showListItem" onclick="openPage('animator/animator')">
<text>
Animator
</text>
</list-item>
<list-item class="showListItem" onclick="openPage('cssAnimation/cssAnimation')">
<text>
CSS Animation
</text>
</list-item>
<list-item class="showListItem" onclick="openPage('swiperScreen/swiperScreen')">
<text>
Swiper
</text>
</list-item>
<list-item class="showListItem" onclick="openPage('progressScreen/progressScreen')">
<text>
Progress
</text>
</list-item>
<list-item class="showListItem" onclick="openPage('sliderScreen/sliderScreen')">
<text>
Slider / Switch
</text>
</list-item>
<list-item class="showListItem" onclick="openPage('pickerScreen/pickerScreen')">
<text>
Picker
</text>
</list-item>
<list-item class="showListItem" onclick="openPage('storageScreen/storageScreen')">
<text>
Storage
</text>
</list-item>
<list-item class="showListItem" onclick="openPage('sensorScreen/sensorScreen')">
<text>
Sensor
</text>
</list-item>
</list>
</div>
</stack>

More details, you can check https://forums.developer.huawei.com/forumPortal/en/topic/0204431490497410052