- 微信
- 微博
  
  分享文章到微博
- 复制链接
  
  复制链接到剪贴板

基于OpenHonmony的电商主题页面实践【华为根技术】

tea_year 发表于 2025/01/25 22:49:31 2025/01/25

【摘要】本电商项目只是UI页面，数据都是本地的假数据，没有网络数据交互。一款购物App界面通常包括了扫一扫功能、搜索框、轮播图、标签页、商品列表等功能，我们以购物App为例，介绍一下如何使用ArkTS开发一个购物类App，本App页面包括：首页、分类、服务、购物车、我的模块。

项目任务

本电商项目只是UI页面，数据都是本地的假数据，没有网络数据交互。一款购物App界面通常包括了扫一扫功能、搜索框、轮播图、标签页、商品列表等功能，我们以购物App为例，介绍一下如何使用ArkTS开发一个购物类App，本App页面包括：首页、分类、服务、购物车、我的模块。项目基于HarmonyOS的ArkUI框架TS扩展的声明式开发范式，关于语法和概念直接看官网官方文档地址：基于TS扩展的声明式开发范式。

主框架

使用容器组件：Tabs 、TabContent、作为主框架，底部Tab使用自定义布局样式，设置点击事件，每次点击更换选中的索引。来切换内容页面。

使用自定义组件来实现：首页、分类、服务、购物车、我的模块的搭建。

首页

因为顶部标题栏需要浮在内容之上，内容整体分为3部分：

import Home from './Home'
@Entry
@Component
struct Index {
  @State currIndex:number = 0
  private homeImg = [
    'images/home/home1.png',
    'images/home/search1.png',
    'images/home/heart1.png',
    'images/home/cart1.png',
    'images/home/my1.png',
  ]
  private selectedHomeImg = [
    'images/home/home2.png',
    'images/home/search2.png',
    'images/home/heart2.png',
    'images/home/cart2.png',
    'images/home/my2.png',
  ]
  build() {
    // 页签组件    BarPosition.Start:左侧或者上侧；BarPosition.End：右侧或下侧
    Tabs({index:this.currIndex,barPosition:BarPosition.Start}){
      // TabContent表示页签的具体内容区域
      TabContent(){
        Home()
      } // currIndex === index
      .tabBar(this.tabBar('首页',0)) // 页签栏
      TabContent(){
        Text('分类')
      }
      .tabBar(this.tabBar('分类',1)) // 页签栏
      TabContent(){
        Text('服务')
      }
      .tabBar(this.tabBar('服务',2)) // 页签栏
      TabContent(){
        Text('购物车')
      }
      .tabBar(this.tabBar('购物车',3)) // 页签栏
      TabContent(){
        Text('我的').fontSize(100)
      }
      .tabBar(this.tabBar('我的',4)) // 页签栏
    }
    .vertical(true) // 横纵设置 true表示竖向 纵向
    .barWidth(120)
    .onChange((index)=>{
      this.currIndex = index
    })
  }
  // 自定义构建函数，作用运行一次，生成里面的组件
  @Builder tabBar(title:string,index:number){
    Column(){
      // index和currIndex对比 如果相等则认为是选中项，展示选中图片
      Image(this.currIndex===index? this.selectedHomeImg[index]:this.homeImg[index])
        .objectFit(ImageFit.Contain).width('50%')
      Text(title).fontSize(30) // 选中项的字体颜色也随之变化
        .fontColor(this.currIndex===index?'#ff602c':Color.Black)
    }.width('100%').height('100%')
    .backgroundColor('#d8d8d8')
    .justifyContent(FlexAlign.Center)
  }
}

调用的Home的前端代码如下所示：

@Component
export default struct Home {
  // Array<string>
  private carousels:string[] = [
    'images/carousel/carousel1.jpeg',
    'images/carousel/carousel2.webp',
    'images/carousel/carousel3.webp',
    'images/carousel/carousel4.webp',
  ]
  build() {
    Column(){
      Row(){
        // Search()
        // 提示语是“请输入”
        TextInput({placeholder:'请输入'}).width('90%')
          .height(60)
          .fontSize(30)
          .placeholderFont({size:30}) // 提示语的字体大小是30
          .onChange((v)=>{
            console.log(v)
          })
        Button('搜索',{type:ButtonType.Normal})
          .fontSize(30).fontColor(Color.Black)
          .width(160).height(60)
          .backgroundColor(Color.White)
          .borderRadius(15) // 圆角是15
      }.width('100%').height('10%')
      // 轮播图
      Swiper(){
        ForEach(this.carousels,(item)=>{
          Image(item).objectFit(ImageFit.Contain)
            .width('100%')
        })
      }.autoPlay(true)
      .interval(2000) // 切换下一张的间隔时间
      .duration(1000) // 动画时长
      .loop(true) // 循环播放
    }.width('100%').height('100%')
    .backgroundColor('#f2f2f2')
  }
}

需要的素材图目录包含

Index 组件和 Home 组件是两个独立的组件。它们分别定义了不同的功能和界面布局。

Index 组件

Index 组件是一个包含多个页签（Tabs）的页面，每个页签对应一个内容区域。具体来说：

使用 Tabs 组件来创建页签布局。
通过 TabContent 定义每个页签的内容。
使用 tabBar 方法自定义页签栏的样式和行为。
当前选中的页签会显示不同的图标和文字颜色。

Home 组件

Home 组件则是一个具体的页面内容，包含了搜索框和一个轮播图。具体来说：

使用 Column 和 Row 布局来组织页面元素。
包含一个 TextInput 用于输入搜索内容。
包含一个 Button 用于触发搜索操作。
使用 Swiper 组件实现轮播图效果，展示多张图片。

关系与区别

功能不同：
- Index 组件主要负责管理多个页签及其切换逻辑。
- Home 组件主要负责展示具体的页面内容，包括搜索框和轮播图。
结构不同：
- Index 组件中，每个 TabContent 对应一个具体的页面或组件，例如 Home()。
- Home 组件中，使用了 Column、Row、TextInput、Button 和 Swiper 等布局和控件。
交互逻辑不同：
- Index 组件通过 currIndex 状态变量来控制当前选中的页签，并动态更新页签栏的显示。
- Home 组件通过 TextInput 获取用户输入，并通过 Button 触发搜索操作。

思考动态数据如何变更，附件ProductData.ts数据为

import { Product } from '../model/Product'

export class ProductData {

  static productArr = [
    {
      "title":"手机",
      "mode": 1,
      "contents":[
        new Product('images/product/phone9.jpg', '小米9 6GB+128GB', '骁龙855，索尼4800万超广角微距三摄', 2999, 2599),
        new Product('images/product/phone1.png', 'Redmi Note 12T Pro', '年度 LCD 屏幕之光', 1599,1499),
        new Product('images/product/phone2.png', 'Xiaomi Civi 3', '仿生双眸 天生出色',0, 2499),
        new Product('images/product/phone3.png', 'Xiaomi 13 Ultra', '徕卡光学全焦段四摄| 一英寸可变光圈| 徕卡专业街拍模式',0, 5999),
        new Product('images/product/phone4.jpg', 'Redmi Note 12 Turbo', '狂暴引擎 超强性能释放', 1899,1699),
        new Product('images/product/phone5.png', 'Redmi K60', '骁龙8+｜2K 高光直屏｜5500mAh+67W闪充', 2499,2099),
        new Product('images/product/phone6.png', 'Redmi K60 Pro', '【第二代骁龙8】狂暴引擎', 3299,2599),
        new Product('images/product/phone7.png', 'Redmi Note 12 Pro 极速版', '高通骁龙778G，OLED柔性直屏+一亿像素', 1699,1599),
        new Product('images/product/phone8.png', 'Xiaomi 13 限量定制色', '全新第二代骁龙8｜徕卡专业光学镜头｜徕卡原生双画质 | 6.36″超窄边屏幕｜67W小米澎湃秒充｜徕卡75mm长焦镜头',0, 4999),
        new Product('images/product/phone10.png', '小米8青春版6GB+64GB', '潮流镜面渐变色，2400万自拍旗舰',1699, 1499)
      ]
    },
    {
      "title":"智能穿戴(耳机)",
      "mode": 1,
      "contents":[
        new Product('images/product/watch93.jpg', 'Redmi Buds 4活力版 白色', '', 0, 399),
        new Product('images/product/watch1.png', 'Xiaomi Buds 4 Pro', '48dB智能动态降噪｜骨声纹通话降噪 | 独立空间音频', 1099,899),
        new Product('images/product/watch2.png', 'Xiaomi Buds 3 Pro', '40dB自适应降噪 ｜空间音频 ｜ HiFi高保真音质', 699,399),
        new Product('images/product/watch3.jpg', 'Xiaomi Buds 3', '40dB宽频主动降噪 | HiFi高保真音质 | HRTF专业调音', 499,299),
        new Product('images/product/watch4.png', 'Redmi Buds 4', '35dB 智能主动降噪 | AI 通话降噪 | 30小时超长续航', 229,179),
        new Product('images/product/watch5.jpg', 'Redmi Buds 3', '轻巧半入耳 | 通话降噪 | 20小时长续航', 199,139),
        new Product('images/product/watch6.png', '小米真无线蓝牙耳机Air2 SE', '大尺寸动圈单元 | 20小时持久续航 | 双麦克风通话降噪', 169,89),
        new Product('images/product/watch7.png', 'Xiaomi骨传导耳机', '骨传导传声 | 轻盈机身 | IP66防水防汗', 699,599),
        new Product('images/product/watch8.png', 'Xiaomi降噪蓝牙耳机Necklace', '',0, 299),
        new Product('images/product/watch94.png', 'Xiaomi Air 3 SE 白色', '', 0, 249)
      ]
    },
    {
      "title":"智能穿戴(手环)",
      "mode": 1,
      "contents":[
        new Product('images/product/watch91.jpg', '小米手环4 石墨黑', '', 0, 169),
        new Product('images/product/watch9.png', 'Redmi Watch 3 青春版', '1.83超大屏幕｜腕上蓝牙通话｜全天候血氧检测', 399,349),
        new Product('images/product/watch10.png', '小米手环8 NFC版', '多样快拆时尚腕带 | 跑步豆模式 | 体感互动拳击', 299,269),
        new Product('images/product/watch11.png', '小米手环8', '多样快拆时尚腕带 | 跑步豆模式 | 体感互动拳击', 249,229),
        new Product('images/product/watch12.png', '小米手环7 Pro', '全彩方形大屏 | 独立GPS定位 | 全天连续血氧饱和度监测', 399,329),
        new Product('images/product/watch13.png', '小米手环7', '1.62″AMOLED 跑道屏 | 四大专业运动数据分析 | 全天连续血氧饱和度监测', 249,199),
        new Product('images/product/watch14.png', 'Xiaomi Watch S1', '蓝宝石玻璃镜面 | 不锈钢中框 | 全天候血氧监测', 1099,699),
        new Product('images/product/watch15.png', 'Xiaomi Watch S1 Pro', '双面蓝宝石玻璃镜面丨全天候血氧监测丨微信消息回复', 1599,1499),
        new Product('images/product/watch16.png', 'Redmi Watch 3', '',0, 469),
        new Product('images/product/watch91.png', '小米手环8 Pro 原神定制版 原神定制版', '',0, 549)
      ]
    },
    {
      "title":"笔记本 | 平板",
      "mode": 1,
      "contents":[
        new Product('images/product/notebook9.png', 'Redmi Book 16 2024', '', 3699, 3399),
        new Product('images/product/notebook10.png', 'Redmi Book 15E', '', 3599, 2999),
        new Product('images/product/notebook1.png', 'Redmi G 游戏本 2022', '16英寸 2.5K 165Hz 电竞大屏',0, 7499),
        new Product('images/product/notebook2.png', 'Xiaomi Pad 6 Pro', '骁龙8+旗舰处理器｜11英寸2.8K护眼屏｜8600mAh 67W快充｜MIUI高效办公体验', 2499,2399),
        new Product('images/product/notebook3.png', 'Xiaomi Pad 6', '11英寸2.8K护眼屏｜骁龙870旗舰处理器｜8840mAh大电量｜MIUI高效办公体验', 1999,1899),
        new Product('images/product/notebook4.jpg', 'RedmiBook Pro 15 2022 锐龙版', '可选全新锐龙7 6800H处理器，3.2K 90Hz高清屏，RTX 2050高性能独立显卡，CNC一体精雕工艺',0, 5499),
        new Product('images/product/notebook5.png', 'Redmi Book 15E', '15.6‘’ 全高清大屏',0, 3599),
        new Product('images/product/notebook6.png', 'Redmi G Pro 游戏本 锐龙版', '全新AMD 锐龙 7 6800H 标压处理器 | GeForce RTX™ 3060 光追独显 | 16英寸 2.5K 240Hz 专业电竞屏',0, 7299),
        new Product('images/product/notebook7.jpg', 'RedmiBook Pro 14 锐龙版', '2.5K超视网膜全面屏',0, 4599),
        new Product('images/product/notebook8.jpg', 'Redmi Book Pro 14 2022', '',0, 5399)
      ]
    },
    {
      "title":"家电",
      "mode": 0,
      "contents":[
        new Product('images/product/house9.jpg', '巨省电 小米空调 1.5匹新1级能效', '', 2499, 2099),
        new Product('images/product/house1.jpg', '小米电视6 65” OLED', 'OLED自发光屏 | 百万级对比度 | 4.6mm超薄全面屏', 6999,5999),
        new Product('images/product/house2.jpg', '小米电视6 至尊版 65英寸', '百级分区背光 | 双120Hz高刷 | 4.5GB+64GB', 7999,6899),
        new Product('images/product/house3.jpg', '小米电视 ES55 2022款', '多分区背光 | MEMC动态补偿 | 杜比视界', 2999,2499),
        new Product('images/product/house4.png', '巨省电 小米空调 1.5匹新1级能效', '强劲制冷 | 高效节能 | 智能互联', 2499,2199),
        new Product('images/product/house10.jpg', '米家免洗扫拖机器人 2 白色', '', 2499, 1899),
        new Product('images/product/house5.jpg', '米家新风空调 立式3匹', '全屋快通风，就要大新风', 7299,6999),
        new Product('images/product/house6.png', '米家分区洗烘一体机 15kg', '健康分开洗 一台就够了', 5999,5499),
        new Product('images/product/house7.png', '米家直驱滚筒洗衣机10kg', '高效除菌除螨，深层健康守护', 1699,1399),
        new Product('images/product/house8.jpg', '米家波轮洗衣机 10kg', '',0, 899)
      ]
    },
    {
      "title":"生活电器",
      "mode": 0,
      "contents":[
        new Product('images/product/life9.jpg', '米家无线洗地机2 白色', '', 2499, 1799),
        new Product('images/product/life1.jpg', '米家电暖器 温控版', '2200W 强劲功率，对流速热，居浴两用',0, 329),
        new Product('images/product/life2.png', '米家石墨烯踢脚线电暖器 仿真火焰版', '加湿+火焰效果 | 悬浮外观 | 双核石墨烯速热',0, 1599),
        new Product('images/product/life3.jpg', '米家石墨烯智能电暖器', '石墨烯高导热，即开即暖无需等',0, 549),
        new Product('images/product/life4.jpg', '米家踢脚线电暖器E', '制暖身材小，抵御寒冬功劳大',0, 499),
        new Product('images/product/life10.jpg', '米家除螨仪 白色', '', 219, 199),
        new Product('images/product/life5.jpg', '米家石墨烯折叠踢脚线电暖器 超薄版', '0°-180°百变折叠不占地|石墨烯速热|智能恒温',0, 899),
        new Product('images/product/life6.jpg', '米家立式暖风机Lite', '3秒即热/70°广角送风/智能恒温/四种模式',0, 349),
        new Product('images/product/life7.jpg', '米家石墨烯踢脚线电暖器', '石墨烯速热取暖，快上加快',0, 749),
        new Product('images/product/life8.jpg', '米家直流变频两季扇', '',0, 799)
      ]
    },
    {
      "title":"厨房电器",
      "mode": 0,
      "contents":[
        new Product('images/product/kitchen9.jpg', '米家冰箱对开门610L墨羽岩 墨羽岩', '', 2799, 2199),
        new Product('images/product/kitchen1.png', '米家净水器1600G', '2.1秒一杯水，还原自来水的澎湃流速', 4599,3999),
        new Product('images/product/kitchen2.png', '小米双核净水器1200G', '3.2L/min大流量，鲜活首杯水', 3499,3099),
        new Product('images/product/kitchen3.jpg', '小米即热净水器Q600', '净热一体，1秒速热，精选调温每1℃', 3499,2499),
        new Product('images/product/kitchen4.jpg', '小米净水器H600G', '纯净生活双出水，六级过滤健康直饮', 1499,1299),
        new Product('images/product/kitchen10.png', '米家电饭煲C1  白色 3L', '', 189, 159),
        new Product('images/product/kitchen5.png', '米家净水器1000G', '澎湃大水量，5年免换RO滤芯', 2499,2099),
        new Product('images/product/kitchen6.png', '小米双核净水器1200G', '3.2L/min大流量，鲜活首杯水', 3499,3099),
        new Product('images/product/kitchen7.png', '小米净水器H800G Pro', '长效过滤，鲜活好水随心出', 1999,1699),
        new Product('images/product/kitchen8.jpg', '小米即热净水器Q800', '',0, 3099)
      ]
    },
    {
      "title":"智能家居",
      "mode": 0,
      "contents":[
        new Product('images/product/auto9.png', '米家智能窗帘 伸缩轨道版 白色【1.75-3米】', '', 699, 599),
        new Product('images/product/auto1.png', 'Xiaomi智能家庭屏 10', 'MIUI Home｜10.1 高清大屏｜115°超广角摄像头｜儿童模式｜家庭 KTV｜小爱同学',0, 999),
        new Product('images/product/auto2.jpg', '小米小爱音箱Play 增强版', 'LED时钟显示，语音控制传统家电',0, 149),
        new Product('images/product/auto3.jpg', 'Xiaomi Sound', 'HARMAN工程师专业调音，高保真震撼音质',0, 549),
        new Product('images/product/auto4.jpg', '小米小爱音箱 Play', '听音乐、语音遥控家电', 109,99),
        new Product('images/product/auto10.png', '小米智能家庭面板 白色', '', 0, 329),
        new Product('images/product/auto5.jpg', '小米小爱音箱 Pro', '澎湃低音，语音遥控传统家电',0, 299),
        new Product('images/product/auto6.jpg', '小米AI音箱（第二代）', '低频饱满有深度，人声清晰有细节',0, 199),
        new Product('images/product/auto7.jpg', '小米小爱触屏音箱', '可视化智能家居，海量视听资源',0, 269),
        new Product('images/product/auto8.jpg', '小米小爱音箱', '',0, 249)
      ]
    },
    {
      "title":"运动出行(运动健身)",
      "mode": 0,
      "contents":[
        new Product('images/product/sport91.jpg', '米家跑步机 深空灰', '', 2699, 2199),
        new Product('images/product/sport1.jpg', '九号平衡车', '年轻人的酷玩具', 2199,1999),
        new Product('images/product/sport2.jpg', '九号平衡车燃动版', '燃动升级，随走随停', 2599,2399),
        new Product('images/product/sport3.png', '九号平衡车 Plus', '一个形影不离的新伙伴', 3499,3299),
        new Product('images/product/sport4.jpg', '米家电动滑板车1S', '型出格，行出色', 2199,1999),
        new Product('images/product/sport92.jpg', '米家走步机（扶手版） 黑色', '', 1599, 1399),
        new Product('images/product/sport5.jpg', '小米米家电动滑板车Pro', '性能提升，动力更强劲', 3099,2799),
        new Product('images/product/sport6.jpg', '九号卡丁车Pro兰博基尼汽车定制版', '九号卡丁车Pro兰博基尼汽车定制版',0, 9999),
        new Product('images/product/sport7.jpg', '九号平衡车 改装套件（不含平衡车）', '小朋友的大玩具，老顽童的小赛车',0, 2999),
        new Product('images/product/sport8.png', '米家电动滑板车 3 青春版', '',0, 1699)
      ]
    },
    {
      "title":"运动出行(箱包配饰)",
      "mode": 0,
      "contents":[
        new Product('images/product/sport93.jpg', '小米多功能运动休闲胸包 黑色', '', 69, 59),
        new Product('images/product/sport9.jpg', '小米体脂秤2', '轻松掌握身体脂肪率',0, 99),
        new Product('images/product/sport10.jpg', '小米体重秤2', '起重低至100G 一杯水都能测',0, 69),
        new Product('images/product/sport11.jpg', '米家走步机', '不足半平米 走出好身材', 1799,1699),
        new Product('images/product/sport12.jpg', '米家跑步机', '心率控速、全屋互联', 2699,2499),
        new Product('images/product/sport94.jpg', '米家走步机 银灰色', '', 1799, 1399),
        new Product('images/product/sport13.jpg', '米家mini筋膜枪', '动力深入肌群，横扫疲劳酸痛', 399,329),
        new Product('images/product/sport14.jpg', '米家运动心电T恤', '米家运动心电T恤', 249,99),
        new Product('images/product/sport15.jpg', '米家筋膜枪', '米家筋膜枪', 499,449),
        new Product('images/product/sport16.png', '米家走步机（扶手版）', '',0, 1599),
      ]
    },
    {
      "title":"运动出行(出行工具)",
      "mode": 0,
      "contents":[
        new Product('images/product/sport95.jpg', '九号ninebot儿童自行车 14寸经典款（适合身高95-120cm 2-6岁）', '', 899, 799), // 最左边
        new Product('images/product/sport16.png', '米家走步机（扶手版）', '',0, 1599),
        new Product('images/product/sport17.jpg', '米家充气宝1S', '米家充气宝1S',0, 199),
        new Product('images/product/sport18.jpg', '小米记录仪2 2K版', '超清画质',0, 479),
        new Product('images/product/sport19.jpg', '小米对讲机2', '向更远出发',0, 449),
        new Product('images/product/sport96.jpg', 'mobifitness莫比智能椭圆机 白色', '', 0, 7099),
        new Product('images/product/sport20.jpg', '小米对讲机1S', '再次出发，陪你轻聊一路',0, 249),
        new Product('images/product/sport21.jpg', '米家智能激光测距仪', '一键测量，操作一目了然',0, 199),
        new Product('images/product/sport22.jpg', '米家电动精修螺丝刀', '米家电动精修螺丝刀',0, 169),
        new Product('images/product/sport23.jpg', '米家电动螺丝刀', '专利一体化无绳设计，轻松开工',0, 199)
      ]
    }
  ]

}

附件Product.ts数据为

export class Product {
  icon:string // 图片
  title:string // 标题
  desc:string // 描述
  priceOld: number // 原价
  priceNew: number // 现价

  constructor(icon:string, title:string, desc:string, priceOld: number, priceNew?: number) {
    this.icon = icon
    this.title = title
    this.desc = desc
    this.priceOld = priceOld
    this.priceNew = priceNew
  }
}

总结

这两个组件在实际应用中可以组合使用。例如，Index 组件中的某个页签内容可以是 Home 组件，这样可以实现一个多页签的应用界面，其中每个页签展示不同的内容。

【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com

点赞
收藏
关注作者

0/1000

抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认取消

加入云驻计划，成为创作者

华为云周边好礼
免费体验产品
特殊身份标识
线下官方门票
内部专家零距离
与10000+优质创作者共同成长

立即加入