HarmonyOS ArkTS 電商項目實戰：買什么

作者：梁迪迪 2022-11-15 09:17:19

本項目只是UI頁面，數據都是本地的假數據，沒有網絡數據交互。頁面包括：首頁、分類、購物車、我的、詳情頁。

??https://ost.51cto.com??

項目介紹

最近HarmonyOS有所更新，抽空寫個電商項目《買什么》Demo練練手，本項目只是UI頁面，數據都是本地的假數據，沒有網絡數據交互。頁面包括：首頁、分類、購物車、我的、詳情頁。項目基于HarmonyOS的ArkUI框架TS擴展的聲明式開發范式，關于語法和概念直接看官網官方文檔地址：??基于TS擴展的聲明式開發范式??。

工具版本： DevEco Studio 3.1 Canary1。
SDK版本： 3.1.9.7（API Version 8 Release）。

效果演示

HarmonyOS ArkTS 電商項目實戰：買什么-開源基礎軟件社區

頁面解析

主框架

使用容器組件：Tabs 、TabContent、作為主框架，底部Tab使用自定義布局樣式，設置點擊事件，每次點擊更換選中的索引。來切換內容頁面。

使用自定義組件來實現：首頁、分類、購物車、我的的搭建。

@Entry
@Component
struct MainFrame {
  @State selectIndex: number = 0
  private controller: TabsController = new TabsController()
  private tabBar = getTabBarList()
  // 內容
  @Builder Content() {
    Tabs({ controller: this.controller }) {
      TabContent() {HomeComponent()}
      TabContent() {ClassifyComponent()}
      TabContent() {ShoppingCartComponent({ isShowLeft: false })}
      TabContent() {MyComponent()}
    }
    .width('100%')
    .height(0)
    .animationDuration(0)
    .layoutWeight(1)
    .scrollable(false)
    .barWidth(0)
    .barHeight(0)
  }
  // 底部導航
  @Builder TabBar() {
    Row() {
      ForEach(this.tabBar, (item: TabBarModel, index) => {
        Column() {
          Image(this.selectIndex === index ? item.iconSelected : item.icon)
            .width(23).height(23).margin({ right: index === 2 ? 3 : 0 })
          Text(item.name)
            .fontColor(this.selectIndex === index ? '#dc1c22' : '#000000')
            .margin({ left: 1, top: 2 })
        }.layoutWeight(1)
        .onClick(() => {
          this.selectIndex = index
          this.controller.changeIndex(index)
        })
      }, item => item.name)
    }.width('100%').height(50)
    .shadow({ radius: 1, color: '#e3e2e2', offsetY: -1 })
  }
  build() {
    Column() {
      this.Content()
      this.TabBar()
    }.width('100%').height('100%')
  }
}

首頁

因為頂部標題欄需要浮在內容之上，所以根布局使用容器組件Stack?，內容布局最外層使用容器組件Scroll 來實現滑動，內容整體分為3部分：

輪播圖：使用容器組件Swiper。
菜單：使用容器組件Flex、默認橫向布局，子布局寬度分為五等分，設置Flex的參數：wrap: FlexWrap.Wrap可實現自動換行。
商品列表：和菜單的實現方式一樣，只不過寬度是二等分。

向下滑動時標題欄顯示功能：使用容器組件Scroll 的屬性方法：onScroll來判斷y軸方向的偏移量，根據偏移量計算出比例，改變標題欄的透明度。

HarmonyOS ArkTS 電商項目實戰：買什么-開源基礎軟件社區

以下是部分代碼：

@Component
export struct HomeComponent {
  // 滑動的y偏移量
  private yTotalOffset = 0
  // 標題欄透明度
  @State titleBarOpacity: number = 0
  // 輪播圖列表
  private banners = [
    $r("app.media.banner1"), $r("app.media.banner2"), $r("app.media.banner3"),
    $r("app.media.banner4"), $r("app.media.banner5"), $r("app.media.banner6"),
  ]
  // 菜單列表
  private menuList = getHomeMenuList()
  // 商品列表
  private goodsList: Array<HomeGoodsModel> = getHomeGoodsList()
  // 輪播圖
  @Builder Banner() {...}

  // 菜單
  @Builder Menu() {....}
  // 商品列表
  @Builder GoodsList() {...}
  build() {
    Stack({ alignContent: Alignment.Top }) {
      Scroll() {
        Column() {
          this.Banner()
          this.Menu()
          this.GoodsList()
        }.backgroundColor(Color.White)
      }.scrollBar(BarState.Off)
      .onScroll((xOffset, yOffset) => {
        this.yTotalOffset += yOffset
        const yTotalOffsetVP = px2vp(this.yTotalOffset)
        // 輪播圖高度 350
        const scale = yTotalOffsetVP / 200
        this.titleBarOpacity = scale
      })
      Row(){
        TitleBar({
          title: '首頁',
          isShowLeft: false,
          isShowRight: true,
          rightImage: $r('app.media.search')
        })
      }.opacity(this.titleBarOpacity)
    }.width('100%').height('100%')
  }
}

詳情頁

和首頁類似，根布局使用容器組件Stack，內容布局最外層使用容器組件Scroll 來實現滑動。因為詳情頁有相同布局，使用裝飾器@Builder來抽離公共布局。

向下滑動時標題欄顯示功能原理和首頁一樣。

HarmonyOS ArkTS 電商項目實戰：買什么-開源基礎軟件社區

以下是部分代碼：

import router from '@ohos.router';

@Entry
@Component
struct GoodsDetail {
  ....
  // 輪播圖
  @Builder Banner() {...}

  // 內容item
  @Builder ContentItem(title: string, content: string, top=1) {
    Row() {
      Text(title).fontSize(13).fontColor('#808080')
      Text(content).fontSize(13).margin({ left: 10 }).fontColor('#ff323232')
      Blank()
      Image($r('app.media.arrow')).width(12).height(18)
    }.width('100%').padding(13)
    .backgroundColor(Color.White).margin({ top: top })
  }
  // 內容
  @Builder Content() {
    ...
    this.ContentItem('郵費', '滿80包郵', 7)
    this.ContentItem('優惠', '減5元')
    this.ContentItem('規格', '山核桃堅果曲奇; x3', 7)
    this.ContentItem('配送', '北京市朝陽區大塔路33號')
  }
  // 評論
  @Builder Comment() {...}
  // 商品參數item
  @Builder GoodsParamItem(title: string, content: string) {
    Row() {
      Text(title).width(100).fontSize(13).fontColor('#808080')
      Text(content).fontSize(13).fontColor('#ff323232')
        .layoutWeight(1).padding({ right: 20 })
    }.width('100%').padding({ top: 15 })
    .alignItems(VerticalAlign.Top)
  }
  // 商品參數
  @Builder GoodsParam() {...}
  build() {
    Stack() {
      Scroll() {
        Column() {
          this.Banner()
          this.Content()
          this.Comment()
          this.GoodsParam()
        }
      }.scrollBar(BarState.Off)
      .onScroll((xOffset, yOffset) => {
        this.yTotalOffset += yOffset
        const yTotalOffsetVP = px2vp(this.yTotalOffset)
        // 輪播圖高度 350
        const scale = yTotalOffsetVP / 350
        this.titleBarBgTmOpacity = 1 - scale
        if (scale > 0.4) {
          this.titleBarBgWhiteOpacity = scale - 0.2
        } else {
          this.titleBarBgWhiteOpacity = 0
        }
      })
      this.TopBottomOperateBar()
    }.width('100%').height('100%')
    .backgroundColor('#F4F4F4')
  }
}

分類

此頁面很簡單，就是左右兩個容器組件List、一個寬度30%，一個寬度70%，使用循環渲染組件ForEach來渲染列表。

以下是部分代碼：

@Component
export struct ClassifyComponent {
  // 搜索
  @Builder Search() {...}
  // 內容
  @Builder Content() {
    Row() {
      // 左分類
      List() {...}.width('30%')

      // 右分類
      List({scroller:this.scroller}) {...}.width('70%')
    }.width('100%').layoutWeight(1)
    .alignItems(VerticalAlign.Top)
  }
  build() {
    Column() {
      this.Search()
      this.Content()
    }.width('100%').height('100%')
    .backgroundColor(Color.White)
  }
}

購物車

此界面功能：全選、單選、刪除商品、更改商品的數量。當有商品選中，右上角刪除按鈕顯示。更改商品數量同步更新合計的總價格。

使用List組件來實現列表。數據數組使用裝飾器@State定義。數據更新必須是更改數組的項。

HarmonyOS ArkTS 電商項目實戰：買什么-開源基礎軟件社區

以下是部分代碼：

@Component
export struct ShoppingCartComponent {
  ...
  // 商品詳情
  @Builder GoodsItem(item: ShoppingCartModel, index: number) {...}
  build() {
    Column() {
      TitleBar()        
      if (this.list.length > 0) {
        // 列表  
        List() {...}.layoutWeight(1)
        // 結算布局
        Row() {...}
      } else {
        Row() {
          Text('空空如也~')
        }
      }
    }.width('100%').height('100%')
    .backgroundColor('#F4F4F4')
  }
  selectOperation(item: ShoppingCartModel, index: number) {
    // 替換元素,才能更改數組，這樣頁面才能更新
    let newItem: ShoppingCartModel = {
      id: item.id,
      image: item.image,
      name: item.name,
      category: item.category,
      newPrice: item.newPrice,
      oldPrice: item.oldPrice,
      count: item.count,
      isSelected: !item.isSelected
    }
    this.list.splice(index, 1, newItem)
    this.calculateTotalPrice()
  }
  // 加/減操作
  addOrSubtractOperation(item: ShoppingCartModel, index: number, type: -1 | 1) {...}
  // 計算合計
  calculateTotalPrice() {
    let total = 0
    let selectedCount = 0
    for (const item of this.list) {
      if (item.isSelected) {
        selectedCount++
        total += item.newPrice * item.count
      }
    }
    this.totalPrice = total
    this.isAllSelected = selectedCount === this.list.length
  }
}

結尾

此項目沒有比較難的點，都是照著官方文檔，查閱API做出來的，依靠著聲明式UI的簡潔和強大，頁面搭建效率很高。

項目地址：https://gitee.com/liangdidi/BuyWhatDemo。

每天進步一點點、需要付出努力億點點。

??想了解更多關于開源的內容，請訪問：??

??51CTO 開源基礎軟件社區??

??https://ost.51cto.com??。

責任編輯：jianghua 來源： 51CTO開源基礎軟件社區

ArkTS 鴻蒙