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

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），圖片示例和代碼如下：
<tabs>的子組件（tab-bar）：用來展示tab的標簽區。
<tabs>的子組件（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>

 

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

 

查看更多內容>>>

作者：奶蓋

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