1. Introduction

HarmonyOS supports application deployment based on Ability, which can be divided into Feature Ability (FA) and Particle Ability (PA).

This Codelab will develop a HarmonyOS shopping application using UI components.

HarmonyOS provides developers with a variety of components, each of which provides a separate visual and interactive unit of functionality through simple encapsulation of data and methods. Developers only need to focus on implementation logic and reduce development.

Final preview

We’ll end up building a simple shopping app. The application consists of two levels of pages, the home page (Product Browse TAB, Shopping Cart TAB, My TAB) and the HarmonyOS Product Details page, both of which showcase a wealth of HarmonyOS UI components, including: Custom popup container (dialog), list (list), slide container (swiper), TAB component (tabs), button component (button), chart component (chart), Divider component (Divider), picture component (image), interactive component (input), Marquee component, Menu component, Slide selector component, Progress bar component, rating bar component, search box component.

The product browsing page and product details page are as follows:

● Install DevEco Studio and Node.js. For details, see Downloading and Installing the Software. ● Set up DevEco Studio development environment, DevEco Studio development environment depends on the network environment, need to be connected to the network to ensure the normal use of tools, you can configure the development environment according to the following two situations: ● If you have access to the Internet, just download the HarmonyOS SDK. ● If the Internet cannot be directly accessed from the network, you need to use a proxy server to access the Internet. For details, see Configuring the Development Environment.

🕮 Note If you want to run programs on a mobile phone, you need to apply for a certificate in advance.

● Prepare the key and certificate request file ● Apply for a debug certificate

You can complete this Codelab in one of two ways:

● Open HarmonyOS in developer mode. ● Mobile emulator in DevEco Studio (emulator does not support distributed debugging yet).

3. Code structure interpretation

This Codelab will only explain the core code. For the complete code, we will provide download methods in Reference 7. Next, we will use a section to explain the code structure of the whole project:

Low entry/SRC/main/js/default/common folder to store some public resources, such as images. Low entry/SRC/main/js/default/pages folder to store HarmonyOS js page, contains the CSS, HML, js, three types of files. Low entry/SRC/main/config. Json: the configuration file.

Next, we can write CSS, HML, JS code. Search box component (Search) : used to provide the input area of the user’s search content, picture example and code are as follows:

<search hint="{{pageWord.searchKeyWord}}" value="{{pageWord.searchValue}}" focusable="true" @change="searchColumn" @submit="submitColumn"></search>1.
Copy the code

TAB TAB container, picture example and code as follows: Tab-bar: displays the TAB area. Tab-content: Displays the TAB’s content area. Note: Users can slide left or right or click different TAB areas to display the content of different TAB areas

<tabs class="tabs" index="0" vertical="false" onchange="change"> <tab-bar class="tab-bar" mode="fixed"> <text class="tab-text" for="{{ item in titileList}}">{{ item }} </text> </tab-bar> <tab-content class="tabcontent" scrollable="true"> <div class="item-content" for="{{ item in contentList}}"> <list class="todo-wraper"> <list-item for="{{lists}}"> <div class="margin10" @click="detailPage"> <div class="todo-total"> <text class="todo-title">{{$item.title}}</text> <text class="todo-content">{{$item.content}}</text> <text class="todo-price"> < span > $< / span > < span > {{$item. Price}} < / span > < / text > < / div > < div class = "width30" > < image SRC = "{{$item. ImgSrc}}" class="container-home-image"></image> </div> </div> </list-item> </list> </div> </tab-content> </tabs>Copy the code

Switch between different TAB ICONS (click a different TAB directly below the application, the page will switch accordingly, and the selected page picture will turn red), picture examples and codes are as follows:

<div class="container-bottom-div" @click="buy" @click="clickBuy"> 
    <image src="{{icon.buys}}" class="container-bottom-div-image" @click="clickBuy"></image> 
    <image src="{{icon.shoppingCarts}}" class="container-bottom-div-image" @click="clickShoppingCart"></image> 
    <image src="{{icon.mys}}" class="container-bottom-div-image" @click="clickMy"></image> 
</div>
Copy the code

Shopping cart page: users can add the selected goods to the shopping cart, and then select the goods they want to take photos for settlement, picture examples and codes are as follows:

<div class="top-comm flex-direction-column"> <div for="{{ latestList }}" class="flex-direction-column"> <div class="container-shopping-list"> <input type="checkbox" value="{{$item.price}}" @change="addShopping"></input> <image src="{{$item.imgSrc}}" class="container-shopping-list-image"></image> <div class="container-shopping-list-div"> <text class="container-shopping-list-div-text">{{$item.title}}</text> <text class="container-shopping-list-div-texts"> < span > {{$item. Price}} < / span > < span > $< / span > < / text > < / div > < / div > < divider class="container-shopping-list-divider"></divider> </div> </div>Copy the code

My page layout, picture examples and code are as follows:

<div class="container-my-deals"> 
    <text class="container-my-deals-text">{{pageWord.myDeals}}</text> 
    <div class="container-my-deals-div"> 
        <div class="container-my-deals-div-div" for="{{transaction}}"> 
            <image src="{{$item.src}}" class="container-my-image"></image> 
            <text class="container-my-text">{{$item.title}}{{$item.num}}</text> 
        </div> 
    </div> 
</div>
Copy the code

Page routing redirect: The user clicks on any commodity to browse the page, and the page will jump to the commodity details page. The picture examples and codes are as follows:

See more >>>

Author: Milk lid

For more information, visit Harmonyos.51cto.com, a collaboration between 51CTO and Huawei