[[395325]]

想了解更多內容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術社區

https://harmonyos.51cto.com

1. 介紹

HarmonyOS支持應用以Ability為單位進行部署，Ability可以分為FA(Feature Ability)和PA(Particle Ability)兩種類型。

本篇Codelab將會使用UI組件開發出一個HarmonyOS購物應用。

HarmonyOS為開發者提供了多種組件，每個組件通過對數據和方法的簡單封裝，實現獨立的可視、可交互功能單元。開發者只需要關注實現邏輯，減少開發量。

最終效果預覽

我們最終會構建一個簡易的購物應用。應用包含兩級頁面，分別是主頁(商品瀏覽頁簽、購物車頁簽、我的頁簽)和商品詳情頁面，兩個頁面都展示了豐富的HarmonyOS UI組件，包括：自定義彈窗容器(dialog)，列表(list)，滑動容器(swiper)，頁簽組件(tabs)，按鈕組件(button)，圖表組件(chart)，分隔器組件(divider)，圖片組件(image)，交互式組件(input)，跑馬燈組件(marquee)，菜單組件(menu)，滑動選擇器組件(picker)，進度條組件(progress)，評分條組件(rating)，搜索框組件(search)。

商品瀏覽頁面和商品詳情頁面如下圖：

2. 搭建HarmonyOS環境

● 安裝DevEco Studio和Node.js，詳情請參考下載和安裝軟件。

● 設置DevEco Studio開發環境，DevEco Studio開發環境需要依賴于網絡環境，需要連接上網絡才能確保工具的正常使用，可以根據如下兩種情況來配置開發環境：

● 如果可以直接訪問Internet，只需進行下載HarmonyOS SDK操作。

● 如果網絡不能直接訪問Internet，需要通過代理服務器才可以訪問，請參考配置開發環境。

• 🕮 說明
• 如需要在手機中運行程序，則需要提前申請證書，如使用模擬器可忽略。

● 準備密鑰和證書請求文件

● 申請調試證書

你可以通過如下兩種方式完成本篇Codelab：

● 開啟開發者模式的HarmonyOS真機。

● DevEco Studio中的手機模擬器(模擬器暫不支持分布式調試)。

3. 代碼結構解讀

本篇Codelab只對核心代碼進行講解，對于完整代碼，我們會在7 參考中提供下載方式，接下來我們會用一小節來講解整個工程的代碼結構：

● entry/src/main/js/default/common 文件夾存放一些公共的資源，比如圖片。

● entry/src/main/js/default/pages 文件夾存放 HarmonyOS JS的頁面，包含css、hml、js三類文件。

● entry/src/main/config.json：配置文件。

4. 頁面詳細解析

接下來，我們就可以編寫css、hml、js代碼了。

搜索框組件(search)：用于提供用戶搜索內容的輸入區域，圖片示例和代碼如下：

頁面展示：

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

tab頁簽容器(tabs)，圖片示例和代碼如下：

的子組件(tab-bar)：用來展示tab的標簽區。

的子組件(tab-content)：用來展示tab的內容區。

注：用戶可通過左右滑動或點擊不同tab標簽區，來顯示不同tab標簽區的內容區

<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> 

不同標簽頁圖標切換(點擊應用的正下面的不同標簽，頁面會隨之切換，被選中的頁面圖片變紅)，圖片示例和代碼如下：

<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> 

購物車頁面：用戶可以把選中的商品加入購物車，然后可以選中想要拍下的商品，進行結算，圖片示例和代碼如下：

<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> 

我的頁面布局，圖片示例和代碼如下：

<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> 

頁面路由跳轉：用戶點擊商品瀏覽頁面的任意商品，頁面會跳轉到商品詳情頁面，圖片示例和代碼如下：

detailPage() {  
    router.push({  
        uri: "pages/shoppingDetailsPage/shoppingDetailsPage"  
    })  
}, 

滑動容器（swiper）：用戶可以在swiper組件上進行滑動 左右切換圖片，或者3s自動滑動一次，圖片示例和代碼如下：

<swiper class="swiper" id="swiper" index="0" autoplay="true" interval="3000" indicator="true" loop="true" digital="false">  
    <div class="swiperContent" for="{{ item in swiperList }}">  
        <image src="/common/computer/computer{{item}}.png"></image>  
    </div>  
</swiper> 

跑馬燈組件（marquee）：展示一段單行滾動的文字，圖片示例和代碼如下：

<marquee id="customMarquee" class="customMarquee" scrollamount="{{scrollAmount}}" loop="{{loop}}" direction="{{marqueeDir}}" @bounce="onMarqueeBounce" @start="onMarqueeStart" @finish="onMarqueeFinish">          
    {{pageInfo.marqueeCustomData}}  
</marquee> 

對樣式進行動態雙向綁定，可以修改"次日達"字體的顏色 ，圖片示例和代碼如下：

<text class="content-column-size-mar" style="color : {{textColor}};" @click="changeColor">{{pageInfo.nextDayReach}}</text>  
  
export default {  
    data: {  
        textColor: '#FF3536',  
    }  
} 

省市級聯選擇器和日期選擇器以及dialog自定義彈窗容器的實現，圖片示例和代碼如下：

點擊選擇會彈出Dialog，頁面會有時間選擇器和省市級聯選擇器。

用戶在彈出的時間選擇器上選擇日期，點擊確定，頁面上的數據也會同時改變。省市級聯選擇器，同理。

<div class="dialog-div-select">  
    <div>  
        <text class="dialog-div-select-text">{{pageInfo.selectRewardTime}}</text>  
        <div class="dialog-div-select-picker">  
            <picker type="date" selected="{{ newDate }}" hours="24" value="{{ newDate }}" @change="changeDate" @cancel="cancelDate"></picker>  
        </div>  
    </div>  
    <div>  
        <text class="dialog-div-select-text">{{pageInfo.selectRewardCity}}</text>  
        <div class="dialog-div-select-picker">  
            <picker type="multi-text" @columnchange="columnTextData" columns="3" range="{{cityList}}" value="{{selectCityList}}" @change="changeCity"></picker>  
        </div>  
    </div>  
</div> 

評分彈框(rating)，圖片示例和代碼如下：

點擊評分，會彈出帶有評分彈框的dialog彈窗容器。

<dialog id="ratingDialog" class="dialog-main" @cancel="cancelrRatingDialog">  
    <div class="dialog-div">  
        <div class="dialog-div-rating">  
            <text class="font-size22 font-weight600">{{pageInfo.softwareScore}}</text>  
            <rating numstars="5" rating="{{ratingNum}}" @change="ratingChange"></rating>  
            <text class="font-size22 font-weight600">{{pageInfo.ratingReason}}</text>  
            <input type="text" placeholder="{{pageInfo.ratingPlaceholder}}" value="{{ratingReason}}" @change="ratingReasonChange"></input>  
            <div class="dialog-divs-divider-div">  
                <text class="font-size22 color-deepskyblue" @click="confirmRatingInfo">{{pageInfo.confirm}}</text>  
                <divider vertical="true" class="dialog-divider"></divider>  
                <text class="font-size22 color-deepskyblue" @click="cancelrRatingDialog">{{pageInfo.cancel}}</text>  
            </div>  
        </div>  
    </div>  
</dialog> 

瀏覽量頁面：chart組件（曲線圖可以實時動態更新數據），圖片示例和代碼如下：

<stack class="chart-region">  
    <image class="chart-background" src="common/background.png"></image>  
    <chart class="chart-data" type="line" ref="linechart" options="{{lineOps}}" datasets="{{lineData}}"></chart>  
</stack> 

點擊立即搶購會彈出一個含有進度條（progress）的彈框 ，圖片示例和代碼如下：

<progress class="min-progress" type="scale-ring" percent="{{progress.percent}}" secondarypercent="{{progress.secondarypercent}}"></progress> 
1. 

• 🕮 說明
• 以上所以代碼僅demo演示參考使用。

5. 回顧和總結

本篇Codelab我們介紹了應用的主頁面和詳情頁，兩個頁面都展示了豐富的HarmonyOS UI組件如下圖。

另外，我們還把常用的一些組件運用到到該應用里面，比如：

1.常用的chart圖表組件：用曲線動態展示不同時間段的瀏覽量。

2.rating評分條組件：運用到給軟件/該商品打分評價。

3.選擇器：省市級類選擇器、時間選擇器。

圖片示例如下：

6. 恭喜您

目前你已經成功完成了Codelab并且學到了：

● 如何使用HarmonyOS UI常用組件。

● 如何實現各頁面之間的跳轉。

7. 參考

gitee源碼

github源碼

想了解更多內容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術社區

https://harmonyos.51cto.com