基於JS通用元件的鴻蒙購物應用開發介紹

語言: CN / TW / HK

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

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

基於JS通用元件的鴻蒙購物應用開發介紹基於JS通用元件的鴻蒙購物應用開發介紹

 

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:配置檔案。

基於JS通用元件的鴻蒙購物應用開發介紹

4. 頁面詳細解析
接下來,我們就可以編寫css、hml、js程式碼了。
搜尋框元件(search):用於提供使用者搜尋內容的輸入區域,圖片示例和程式碼如下:
頁面展示:

基於JS通用元件的鴻蒙購物應用開發介紹

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

tab頁籤容器(tabs),圖片示例和程式碼如下:
<tabs>的子元件(tab-bar):用來展示tab的標籤區。
<tabs>的子元件(tab-content):用來展示tab的內容區。
注:使用者可通過左右滑動或點選不同tab標籤區,來顯示不同tab標籤區的內容區

基於JS通用元件的鴻蒙購物應用開發介紹

基於JS通用元件的鴻蒙購物應用開發介紹

基於JS通用元件的鴻蒙購物應用開發介紹

基於JS通用元件的鴻蒙購物應用開發介紹

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

不同標籤頁圖示切換(點選應用的正下面的不同標籤,頁面會隨之切換,被選中的頁面圖片變紅),圖片示例和程式碼如下:

基於JS通用元件的鴻蒙購物應用開發介紹

基於JS通用元件的鴻蒙購物應用開發介紹

基於JS通用元件的鴻蒙購物應用開發介紹

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

購物車頁面:使用者可以把選中的商品加入購物車,然後可以選中想要拍下的商品,進行結算,圖片示例和程式碼如下:

基於JS通用元件的鴻蒙購物應用開發介紹

基於JS通用元件的鴻蒙購物應用開發介紹

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

我的頁面佈局,圖片示例和程式碼如下:

基於JS通用元件的鴻蒙購物應用開發介紹

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

頁面路由跳轉:使用者點選商品瀏覽頁面的任意商品,頁面會跳轉到商品詳情頁面,圖片示例和程式碼如下:

檢視更多內容>>>

作者:奶蓋

想了解更多內容,請訪問51CTO和華為合作共建的鴻蒙社群: https://harmonyos.51cto.com