Huawei Lite Wearable Application Development using HUAWEI DevEco Studio (HamonyOS) - Huawei Developers

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
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
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.
Code:
.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.
Code:
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:
Code:
<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