基于OpenHonmony的电商主题页面实践【华为根技术】
【摘要】 本电商项目只是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)