基于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)，圖片示例和代碼如下：
注：用戶可通過左右滑動或點擊不同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. 參考
