第13章：构建一个电商App（简化版）

商品列表与详情页

1. 商品列表页设计

核心功能需求

  • 分页加载：支持滚动到底部自动加载下一页商品
  • 搜索与筛选：按分类、价格区间等条件筛选商品
  • 基础布局：网格/列表两种视图模式切换
  • 性能优化：图片懒加载、列表项复用机制

ArkTS实现代码示例

@Component
struct GoodsList {
  @State goodsList: Array<GoodsItem> = []
  @State currentPage: number = 1
  @State loading: boolean = false

  build() {
    Column() {
      // 搜索栏
      SearchBar({ placeholder: '搜索商品' })
      
      // 商品网格布局
      Grid() {
        ForEach(this.goodsList, (item: GoodsItem) => {
          GridItem() {
            GoodsItemCard({ item: item })
          }
        })
      }
      .onScrollIndex((startIndex: number) => {
        // 滚动到底部加载更多
        if (startIndex >= this.goodsList.length - 5 && !this.loading) {
          this.loadMoreData()
        }
      })
    }
  }

  loadMoreData() {
    // 模拟API请求
    this.loading = true
    fetchGoodsList(this.currentPage).then(data => {
      this.goodsList = this.goodsList.concat(data)
      this.currentPage++
    }).finally(() => {
      this.loading = false
    })
  }
}

2. 商品详情页开发

关键组件设计

  • 主图轮播：支持手势滑动查看多张商品图片
  • SKU选择器：颜色、尺寸等规格选择组件
  • 底部操作栏：立即购买/加入购物车按钮组
  • 评价模块：带分级的用户评价展示

状态管理方案

class GoodsDetailState {
  @State currentSku: SkuInfo = DEFAULT_SKU
  @State selectedTab: 'detail' | 'params' | 'comments' = 'detail'
  @State imageList: Array<string> = []
  @State commentData: CommentList = { list: [], total: 0 }
}

@Component
struct GoodsDetailPage {
  @State state: GoodsDetailState = new GoodsDetailState()

  build() {
    Column() {
      // 顶部轮播图
      Swiper(this.state.imageList)

      // 商品基本信息区
      GoodsBaseInfo({ sku: this.state.currentSku })

      // 选项卡
      Tabs({ current: this.state.selectedTab })
      
      // 底部操作栏
      FooterActionBar({
        onAddCart: () => this.addToCart(),
        onBuyNow: () => this.goCheckout()
      })
    }
  }
}

3. 页面间数据传递

三种实现方式对比

方式适用场景示例
路由参数简单数据传递router.push({ url: 'pages/detail', params: { id: 123 } })
全局状态复杂对象共享AppStorage.setOrCreate('currentGoods', goodsData)
EventBus跨组件通信emit('goodsFavorChange', { id: 123, status: true })

最佳实践建议

  1. 商品ID等简单数据使用路由参数
  2. 商品详情数据建议进入页面后重新请求
  3. 购物车状态等全局数据使用AppStorage管理

4. 性能优化要点

  1. 图片处理：

    • 使用WebP格式压缩图片
    • 实现渐进式加载效果
    Image(item.imageUrl)
  .interpolation(ImageInterpolation.High)
  .loadMode(ImageLoadMode.Progressive)

  2. 列表优化：

    • 设置cachedCount预加载数量
    • 复杂卡片使用@Reusable装饰器

  3. 数据缓存：

    // 实现内存缓存策略
const cache = new LruCache<string, GoodsDetail>(20)

5. 完整开发流程

  1. 设计JSON数据格式（示例）：
{
  "goodsId": "10086",
  "title": "ArkTS编程指南",
  "price": 99.00,
  "originalPrice": 129.00,
  "images": ["url1", "url2"],
  "skus": [
    {
      "skuId": "10086-1",
      "specs": {"color":"blue","size":"M"},
      "stock": 100
    }
  ]
}
  1. 实现Mock API服务：
// mock/api.ts
export function fetchGoodsDetail(id: string): Promise<GoodsDetail> {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(MOCK_DATA[id])
    }, 300)
  })
}
  1. 开发调试技巧：
  • 使用@Preview装饰器快速预览组件
  • 开启HiLog调试日志
hiLog.debug(TAG, `Received goods data: ${JSON.stringify(data)}`)

扩展思考

  1. 如何实现骨架屏加载效果？
  2. 商品图片的CDN加速方案选择
  3. 秒杀商品的特殊状态处理
  4. 无障碍访问适配方案
Last Updated::