介紹

本篇Codelab使用常用組件、頁面路由router實現購物應用，包含以下功能：

1. 使用toolbar、toolbar-item組件實現“首頁”，“新品”，“購物車”，“我的”頁面切換。
2. 使用list組件，展示購物車里的商品。
3. 使用swiper組件，實現圖片自動輪播。
4. 使用panel組件，展示商品規格。
5. 使用自定義組件，提高代碼的可讀性。

相關概念

• [swiper]：滑動容器，提供切換子組件顯示的能力。
• [input]：交互式組件，包括單選框，多選框，按鈕和單行文本輸入框。
• [search]：搜索框組件，用于提供用戶搜索內容的輸入區域。
• [toolbar]：工具欄。放在界面底部，用于展示針對當前界面的操作選項。
• [toolbar-item]：工具欄[toolbar]子組件。 用于展示工具欄上的一個操作選項。
• [自定義組件]：自定義組件是用戶根據業務需求，將已有的組件組合，封裝成的新組件，可以在工程中多次調用，從而提高代碼的可讀性。

環境搭建

軟件要求

• [DevEco Studio]版本：DevEco Studio 3.1 Release及以上版本。
• OpenHarmony SDK版本：API version 9及以上版本。

硬件要求

• 開發板類型：[潤和RK3568開發板]。
• OpenHarmony系統：3.2 Release及以上版本。

環境搭建

完成本篇Codelab我們首先要完成開發環境的搭建，本示例以RK3568開發板為例，參照以下步驟進行：

1. [獲取OpenHarmony系統版本]：標準系統解決方案（二進制）。以3.2 Release版本為例：
   
2. 搭建燒錄環境。
   1. [完成DevEco Device Tool的安裝]
   2. [完成RK3568開發板的燒錄]
3. 搭建開發環境。
   1. 開始前請參考[工具準備]，完成DevEco Studio的安裝和開發環境配置。
   2. 開發環境配置完成后，請參考[使用工程向導]創建工程（模板選擇“Empty Ability”）。
   3. 工程創建完成后，選擇使用[真機進行調測]。
   4. 鴻蒙開發指導文檔：[复制gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]

代碼結構解讀

本篇Codelab只對核心代碼進行講解，對于完整代碼，我們會在【gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md】中提供。由于本篇Codelab頁面較多，因此component和pages目錄下只展示“購物主頁面”的hml、js、css。

复制`HarmonyOS與OpenHarmony鴻蒙文檔籽料：mau123789是v直接拿`

├──entry/src/main/js	             // 代碼區
│  └──MainAbility
│     ├──common
│     │  ├──constant
│     │  │  └──commonConstants.js    // 公共常量類
│     │  └──images                   // 圖片區
│     ├──component
│     │  ├──backComponent            // 后退子組件
│     │  ├──commonButton             // 支付按鈕子組件
│     │  ├──commonToolbar            // 導航欄子組件
│     │  ├──home                     // 購物主頁子組件
│     │  ├──likedCards               // 猜你喜歡卡片子組件
│     │  ├──myInfo                   // 我的子組件
│     │  ├──newProduct               // 新品子組件
│     │  ├──orderReusableCom         // 用戶商品信息子組件
│     │  ├──productBuyInfo           // 購買商品卡片子組件
│     │  ├──shoppingCart             // 購物車子組件
│     │  └──subtitle                 // 副標題子組件
│     ├──i18n
│     │  ├──en-US.json               // 英文國際化			
│     │  └──zh-CN.json               // 中文國際化	
│     ├──pages
│     │  ├──allOrders                // 全部訂單頁
│     │  ├──homePage                 // 購物主頁
│     │  │  ├──homePage.css          // 購物主頁面樣式
│     │  │  ├──homePage.hml          // 購物主頁面
│     │  │  └──homePage.js           // 購物主頁面邏輯
│     │  ├──launchPage               // 啟動頁
│     │  ├──pendingPayment           // 待支付頁
│     │  ├──productDetails           // 產品詳情頁
│     │  └──sureOrder                // 確定訂單頁
│     └──app.js                      // 程序入口
└──entry/src/main/resources          // 應用資源目錄

構建購物應用首頁

本篇Codelab選取購物應用的主頁面、購物車頁面、以及導航欄進行詳細的講解，對于完整代碼，可在gitee源碼中進行查看。

購物應用的主頁面主要由界面底部導航欄和導航欄上的內容組成。效果如圖所示：

复制< !-- homePage.hml -- >
< element name="home" src="http://www.1cnz.cn/images/chaijie_default.png" >< /element >
< element name="new-product" src="http://www.1cnz.cn/images/chaijie_default.png" >< /element >
< element name="shopping-cart" src="http://www.1cnz.cn/images/chaijie_default.png" >< /element >
< element name="my-info" src="http://www.1cnz.cn/images/chaijie_default.png" >< /element >
< element name="common-toolbar" src="http://www.1cnz.cn/images/chaijie_default.png" >< /element >

< div class="container" >
    < !-- 主頁面 -- >
    < home if="{{ tag === homePageIndex }}" >< /home >

    < !-- 新品頁面 -- >
    < new-product if="{{ tag === newProductIndex }}" >< /new-product >

    < !-- 購物車頁面 -- >
    < shopping-cart if="{{ tag === shoppingCartIndex }}" >< /shopping-cart >

    < !-- 我的頁面 -- >
    < my-info if="{{ tag === myInfoIndex }}" >< /my-info >

    < !-- 導航欄 -- >
    < common-toolbar tag="{{ tag }}" @switch-toolbar="switchToolbar" >< /common-toolbar >
< /div >

底部導航欄：由“主頁”、“新品”、“購物車”以及“我的”頁面組成，點擊導航欄內容，展示所點擊模塊的內容。

复制// homePage.js
import CommonConstants from '../../common/constant/commonConstants';

export default {
  data: {
    // 頁面默認展示主頁，tag是主頁面的索引
    tag: 1,
    // 主頁面索引
    homePageIndex: CommonConstants.HOME_PAGE_INDEX,
    // 新品頁面索引
    newProductIndex: CommonConstants.NEW_PRODUCT_INDEX,
    // 購物車頁面索引
    shoppingCartIndex: CommonConstants.SHOPPING_CART_INDEX,
    // 我的頁面索引
    myInfoIndex: CommonConstants.MY_INFO_INDEX
  },

  /**
   * 切換導航欄內容
   *
   * @param value 子組件傳過來的索引
   */
  switchToolbar(value) {
    this.tag = value.detail.index;
  }
}

子組件：導航欄的使用

導航欄由“主頁”、“新品”、“購物車”以及“我的”組成，點擊導航欄對應的子組件，頁面會展示對應模塊的內容。效果如圖所示：

在父組件homePage.hml中使用@switch-toolbar="switchToolbar"綁定子組件的事件，用于接收子組件傳過來的索引，通過if判斷，從而展示索引對應的頁面。

复制 !-- homePage.hml -- >
...
 div class="container" >
     !-- 主頁面 -- >
     home if="{{ tag === homePageIndex }}" > /home >

     !-- 新品頁面 -- >
     new-product if="{{ tag === newProductIndex }}" > /new-product >

     !-- 購物車頁面 -- >
     shopping-cart if="{{ tag === shoppingCartIndex }}" > /shopping-cart >

     !-- 我的頁面 -- >
     my-info if="{{ tag === myInfoIndex }}" > /my-info >

     !-- 導航欄 -- >
     common-toolbar tag="{{ tag }}" @switch-toolbar="switchToolbar" > /common-toolbar >
 /div >

 !-- commonToolbar.hml -- >
 div class="container" >
     toolbar class="toolbar" >
         toolbar-item value="{{ $t(toolbarName.home) }}" @click="switchToolbar(homePageIndex)"
                      icon="{{ tag === homePageIndex ? commonIcon.home : commonIcon.homeDisable }}" >
         /toolbar-item >
         toolbar-item value="{{ $t(toolbarName.newProduct) }}" @click="switchToolbar(newProductIndex)"
                      icon="{{ tag === newProductIndex ? commonIcon.newProduct : commonIcon.newProductDisable }}" >
         /toolbar-item >
         toolbar-item value="{{ $t(toolbarName.shoppingCart) }}" @click="switchToolbar(shoppingCartIndex)"
                      icon="{{ tag === shoppingCartIndex ? commonIcon.shoppingCart : commonIcon.shoppingCartDisable }}" >
         /toolbar-item >
         toolbar-item value="{{ $t(toolbarName.me) }}" @click="switchToolbar(myInfoIndex)"
                      icon="{{ tag === myInfoIndex ? commonIcon.me : commonIcon.meDisable }}" >
         /toolbar-item >
     /toolbar >
 /div >

在子組件commonToolbar.js中通過this.$emit('switchToolbar', {info: value})觸發事件并向上傳遞參數，homePage.js中的switchToolbar方法接收子組件傳過來的索引。在子組件commonToolbar.js文件中定義props，props用于組件之間的數據通信，當父組件中的tag發生變化的時候，子組件也會隨之響應，然后改變toolbar-item中icon的顏色。

复制// homePage.js
import CommonConstants from '../../common/constant/commonConstants';

export default {
  data: {
    // 頁面默認展示主頁，tag是主頁面的索引
    tag: 1,
    ...
  },

  /**
   * 切換導航欄內容
   *
   * @param value 子組件傳過來的索引
   */
  switchToolbar(value) {
    this.tag = value.detail.index;
  }
}

// commonToolbar.js
import CommonConstants from '../../common/constant/commonConstants';

export default {
  props: ['tag'],
  data: {
    commonIcon: CommonConstants.COMMON_TOOLBAR_ICON,
    toolbarName: CommonConstants.COMMON_TOOLBAR_NAME,
    // 主頁面索引
    homePageIndex: CommonConstants.HOME_PAGE_INDEX,
    // 新品頁面索引
    newProductIndex: CommonConstants.NEW_PRODUCT_INDEX,
    // 購物車頁面索引
    shoppingCartIndex: CommonConstants.SHOPPING_CART_INDEX,
    // 我的頁面索引
    myInfoIndex: CommonConstants.MY_INFO_INDEX
  },

  /**
   * 向父組件傳值
   *
   * @param index 選中子模塊的索引
   */
  switchToolbar(index) {
    this.$emit('switchToolbar', {
      index: index
    });
  }
}

構建購物車頁面

購物車頁面由頂部標題欄、購物車商品列表、猜你喜歡的商品列表三部分組成，并以子組件的形式顯示在主頁面中。其中，購物車商品列表使用list組件和for循環，實現對多條商品數據進行展示。猜你喜歡的商品列表是通過引用自定義組件實現的。效果如圖所示：

复制< !-- shoppingCart.hml -- >
< element name="liked-cards" src="../../component/likedCards/likedCards.hml" >< /element >

< div class="container" >
    < div class="top" >
        < !-- 頂部導航標題欄 -- >
        < div class="top-title" >
            < text class="shopping-cart" >{{ $t('strings.shopping_cart') }}< /text >
            < text class="edit" >{{ $t('strings.edit') }}< /text >
        < /div >
        < !-- 購物車商品列表 -- >
        < div class="top-list" >
            < div class="list-title" >
                < input class="all-checkbox" type="checkbox" checked="{{ isAllSelect }}" @change="checkboxOnChange" >
                < /input >
                < image class="my-icon-size" src="{{ person }}" >< /image >
                < text class="mall-self-operated" >{{ $t('strings.mall_self_operated') }}< /text >
            < /div >
            < list class="list" >
                < list-item for="{{ (index, item) in shoppingListData }}" class="list-item" >
                    < div class="list-content" >
                        < input class="checkbox" type="checkbox" checked="{{ item.isSelect }}" >< /input >
                        < image class="product-pictures" src="{{ item.image }}" >< /image >
                        < div class="box-content" >
                            < text class="product-title" >{{ $t(item.title) }}< /text >
                            < text class="product-subtitle" >{{ $t(item.subtitle) }}< /text >
                            < div class="content-price" >
                                < text class="product-price" >{{ item.price }}< /text >
                                < div class="price-num" >
                                    < image class="my-icon-size" @click="subtractNum(index)" src="http://www.1cnz.cn/images/chaijie_default.png" >
                                    < /image >
                                    < text class="product-num" >{{ item.num }}< /text >
                                    < image class="my-icon-size" src="{{ commonIcon.increaseIcon }}"
                                           @click="addNum(index)" >
                                    < /image >
                                < /div >
                            < /div >
                        < /div >
                    < /div >
                < /list-item >
            < /list >
        < /div >
    < /div >
    < !-- 猜你喜歡商品列表 -- >
    < div class="middle-card" >
        < liked-cards >< /liked-cards >
    < /div >
< /div >

• 點擊“商品自營”頭像前的多選框，會觸發checkboxOnChange()方法，頁面會勾選/不勾選購物車的中所有商品。
• 點擊“+”按鈕會觸發addNum()方法，增加單件商品的數量。
• 點擊“-”按鈕會觸發subtractNum()方法，減少單件商品的數量。

复制// shoppingCart.js
import CommonConstants from '../../common/constant/commonConstants';

export default {
  data: {
    isAllSelect: false,
    shoppingListData: CommonConstants.SHOPPING_LIST_DATA,
    commonIcon: CommonConstants.SHOPPING_CART_ICON,
    person: CommonConstants.COMMON_ICON.person
  },

  /**
   * 購物車商品全選/非全選
   */
  checkboxOnChange() {
    this.isAllSelect = !this.isAllSelect;
    this.shoppingListData.filter((item) = > {
      item.isSelect = this.isAllSelect;
    });
  },

  /**
   * 勾選單個商品
   *
   * @param subscript 選中商品的索引
   * @param event 單選框事件
   */
  singleAnswer(subscript, event) {
    // 修改商品的選擇狀態
    this.shoppingListData.forEach((item, index) = > {
      if (index === subscript) {
        item.isSelect = event.checked;
      }
    })
    // 檢查購物車中的所有商品是否都被選中
    let selectAll = this.shoppingListData.every(item = > item.isSelect === true);
    if (selectAll === true) {
      this.isAllSelect = true;
    } else {
      this.isAllSelect = false;
    }
  },

  /**
   * 減少商品數量邏輯
   *
   * @param value 當前商品的數量
   */
  subtractNum(value) {
    if (this.shoppingListData[value].num > 0) {
      this.shoppingListData[value].num--;
    }
  },

  /**
   * 增加商品數量邏輯
   *
   * @param value 當前商品的數量
   */
  addNum(value) {
    this.shoppingListData[value].num++;
  }
}

審核編輯 黃宇