回复
【中工开发者】电商AppUI-仿淘宝
wx675037c1e9da4
发布于 2024-12-11 20:25
浏览
0收藏
一、引言
大家好,我是来自中工的一名学生,在数字化浪潮汹涌澎湃的当下,电子商务已然成为商业版图中不可或缺的关键一环。伴随移动互联网的迅猛发展以及技术的持续创新迭代,打造一个高效、安全且能为用户带来极致体验的电子商务系统,已成为重中之重。本项目聚焦于用户对高品质在线购物体验的强烈诉求,毅然选用鸿蒙 ArkTs 语言,全力开发一款功能完备的商城系统,此系统为基于鸿蒙开发的仿淘宝电商 app 模板。(注明:非原创,在原创基础上进行了修改与补充说明)
二、项目框架
三、已实现功能
- 推荐页面(发现好物UI、今日特卖UI-支持左右滑动、发现频道UI、广告ListUI)
- 女装页面(服装种类UI-支持多种分类、格状品牌展示-Grid-UI)
- 男装页面(瀑布流-商品卡片浏览UI运动页面+电脑办公Tab页)
- 购物车页面(商品数量计算 + 订单金额计算)
- 个人中心页面(个人头像+昵称,我的订单,功能区)
四、页面展示
五、主要项目解析
@Componentexport default struct ComputerPage {
private tecCardInfo: Array<SimpleCardInfo> = getTecCardInfo();
build() { ListCardDisplay({tecCardInfo : this.tecCardInfo}) }}
@Componentstruct ListCardDisplay { private tecCardInfo : Array<SimpleCardInfo> = [] build() { List({ space: 20, initialIndex: 0 }) { ForEach(this.tecCardInfo, (cardInfo: SimpleCardInfo) => { ListItem() { Column() { Image(cardInfo.image) .objectFit(ImageFit.Cover) .borderRadius($r('app.float.home_swiper_borderRadius')) } } }, (cardInfo: SimpleCardInfo) => JSON.stringify(cardInfo)) } .listDirection(Axis.Vertical) // 排列方向 .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // 每行之间的分界线 .edgeEffect(EdgeEffect.Spring) // 滑动到边缘无效果 .padding({ top: $r('app.float.home_list_padding'), left: $r('app.float.home_list_padding'), right: $r('app.float.home_list_padding') }) .width(CommonConstants.FULL_PARENT) .height(CommonConstants.FULL_PARENT) }}
1. 组件定义
2. 关键属性
private swiperController: SwiperController = new SwiperController();
- 定义了一个轮播图控制器,用于控制轮播图的行为。
3. 构建方法(build)
3.1 整体布局
- 整个页面使用
Scroll
组件进行包裹,使其可以滚动,以容纳更多内容。 - 在
Scroll
内部,使用Column
进行垂直布局,并且设置了子元素之间的间距为CommonConstants.COMMON_SPACE
。
3.2 轮播图(Swiper)
- 使用
Swiper
组件创建轮播图。
- 轮播图的数据通过
mainViewModel.getMainPagesSwiperImages()
获取,这可能是从视图模型中获取轮播图图片资源的方法。 - 对于每一张图片(
img
),使用Image
组件进行展示,设置了图片高度为200vp
,宽度占满父容器(CommonConstants.FULL_PARENT
),并且设置了边框半径。 -
Swiper
本身设置了margin
(顶部外边距)和autoPlay
(自动播放)属性。
3.3 大牌闪购和发现好物(Grid)
- 使用
Grid
组件进行布局。
- 数据通过
mainViewModel.getFirstGridData()
获取,这可能是从视图模型中获取相关数据的方法。 - 对于每一个数据项(
firstItem
),使用GridItem
进行展示,内部是一个Column
布局,包含了Row
和Text
等元素。 - 展示了商品的标题、其他信息等内容,并且设置了图片(
$r('app.media.love')
)作为装饰元素。 -
Grid
组件本身设置了宽度占满父容器、高度为$r('app.float.home_firstGrid_height')
,以及列模板(columnsTemplate
)、行模板(rowsTemplate
)、列间距(columnsGap
)和行间距(rowsGap
)等属性。
3.4 今日特卖(List)
- 有两处 “今日特卖” 相关的
List
布局。
- 首先是一个简单的 “今日特卖” 标题(
Text
),设置了字体大小和粗细等属性。 - 然后是
List
组件:
- 数据通过
mainViewModel.getSecondGridData()
获取。 - 对于每一个数据项(
firstItem
),在ListItem
内使用Column
布局展示商品信息,包括商品图片(Image
)、特卖标识(Text
)、商品标题(Text
)和其他信息(Text
)等。 -
List
组件设置了水平排列方向(listDirection(Axis.Horizontal)
)、分割线样式(divider
)、滑动边缘效果(edgeEffect
)和内边距(padding
)等属性。
3.5 发现频道(List)
- 与 “今日特卖” 的
List
布局类似,展示了发现频道相关的商品信息。
- 有一个 “发现频道” 标题(
Text
)。 - 然后是
List
组件,数据获取方式和内部布局与 “今日特卖” 类似,但在一些细节上(如字体大小等)可能有所不同。 - 还添加了
onScrollIndex
事件处理函数,用于在滚动时打印索引信息。
3.6 卡片推荐(List)
- 使用
List
组件展示卡片推荐信息。
- 数据通过
mainViewModel.getListCardData()
获取。 - 对于每一个数据项(
listCardData
),在ListItem
内使用Column
布局,并设置了背景图片(backgroundImage
)、内边距(padding
)、边框半径(borderRadius
)、高度(height
)和宽度(width
)等属性。 -
List
组件本身设置了垂直排列方向(listDirection(Axis.Vertical)
)、滑动边缘效果(edgeEffect
)和内边距等属性。
@Componentexport default struct HomePage { private swiperController: SwiperController = new SwiperController();
build() { Scroll() { Column({ space: CommonConstants.COMMON_SPACE }) { /*轮播图*/ Swiper(this.swiperController) { ForEach(mainViewModel.getMainPagesSwiperImages(), (img: Resource) => { Image(img) .height('200vp') .width(CommonConstants.FULL_PARENT) .borderRadius($r('app.float.home_swiper_borderRadius')) }, (img: Resource) => JSON.stringify(img.id)) } .margin({ top: $r('app.float.home_swiper_margin') }) .autoPlay(true) /*大牌闪购+发现好物*/ Grid() { ForEach(mainViewModel.getFirstGridData(), (firstItem: ItemData) => { GridItem() { Column() { Row(){ Image($r('app.media.love')) .width($r('app.float.setting_account_size')) .height($r('app.float.setting_account_size')) Text(firstItem.title) .fontSize($r('app.float.normal_text_size')) .fontWeight(FontWeight.Bolder) Text(firstItem.others) .margin({ left: $r('app.float.home_list_padding') }) .fontSize($r('app.float.little_text_size')) .fontColor($r('app.color.home_grid_fontColor')) } Text(firstItem.others) .margin({ top: $r('app.float.home_list_margin') }) .fontSize($r('app.float.little_text_size')) .fontColor($r('app.color.home_grid_fontColor')) } .alignItems(HorizontalAlign.Start) } .padding({ top: $r('app.float.home_list_padding'), left: $r('app.float.home_list_padding') }) .borderRadius($r('app.float.home_backgroundImage_borderRadius')) .align(Alignment.TopStart) .backgroundImage(firstItem.img) .backgroundImageSize(ImageSize.Cover) .width(CommonConstants.FULL_PARENT) .height(CommonConstants.FULL_PARENT) }, (firstItem: ItemData) => JSON.stringify(firstItem)) } .width(CommonConstants.FULL_PARENT) .height($r('app.float.home_firstGrid_height')) .columnsTemplate('1fr 1fr') .rowsTemplate('1fr') .columnsGap($r('app.float.home_grid_columnsGap')) .rowsGap($r('app.float.home_grid_rowGap')) // .margin({ bottom: $r('app.float.setting_button_bottom') })
/*今日特卖--start--*/ Text('今日特卖') .fontSize($r('app.float.normal_text_size')) .fontWeight(FontWeight.Medium) .width(CommonConstants.FULL_PARENT) .margin({ left: $r('app.float.home_text_margin') }) /*今日特卖*/ List({ space: 20, initialIndex: 0 }) { ForEach(mainViewModel.getSecondGridData(), (firstItem: ItemData) => { ListItem() { Column(){ Image(firstItem.img) .height('100vp') .width('100vp') .borderRadius($r('app.float.home_swiper_borderRadius')) Row(){ Text('特卖') .fontSize($r('app.float.small_text_size')) .fontWeight(FontWeight.Medium) // .fontColor($r('app.color.red')) // .backgroundColor($r('app.color.yellow')) // .width($r('app.float.normal_text_size')) Text(firstItem.title) .margin({ left: $r('app.float.home_list_padding') }) .fontSize($r('app.float.little_text_size')) .fontColor($r('app.color.home_grid_fontColor')) // .backgroundColor($r('app.color.red')) } .backgroundImage($r('app.media.title_money')) .borderRadius($r('app.float.home_grid_columnsGap')) .backgroundImageSize(ImageSize.Cover) Text(firstItem.others) .margin({ top: $r('app.float.home_list_margin') }) .fontSize($r('app.float.little_text_size')) // .fontColor($r('app.color.home_grid_fontColor')) .fontWeight(FontWeight.Bolder) } } }, (firstItem: ItemData) => JSON.stringify(firstItem)) }.listDirection(Axis.Horizontal) // 排列方向 .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // 每行之间的分界线 .edgeEffect(EdgeEffect.Spring) // 滑动到边缘无效果 .padding({ top: $r('app.float.home_list_padding'), left: $r('app.float.home_list_padding') }) .width('100%') .backgroundColor($r('app.color.white')) /*今日特卖--end--*/
/*今日特卖--start--*/ // Row(){ Text('发现频道') .fontSize($r('app.float.normal_text_size')) .fontWeight(FontWeight.Medium) .width(CommonConstants.FULL_PARENT) .margin({ left: $r('app.float.home_text_margin') }) /*今日特卖*/ List({ space: 20, initialIndex: 0 }) { ForEach(mainViewModel.getSecondGridData(), (firstItem: ItemData) => { ListItem() { Column(){ Image(firstItem.img) .height('100vp') .width('100vp') .borderRadius($r('app.float.home_swiper_borderRadius')) Row(){ Text('特卖') .fontSize($r('app.float.normal_text_size')) .fontWeight(FontWeight.Bolder) Text(firstItem.title) .margin({ left: $r('app.float.home_list_padding') }) .fontSize($r('app.float.little_text_size')) .fontColor($r('app.color.home_grid_fontColor')) } // @ts-ignore Text(firstItem.others) .margin({ top: $r('app.float.home_list_margin') }) .fontSize($r('app.float.little_text_size')) .fontColor($r('app.color.home_grid_fontColor')) } } }, (firstItem: ItemData) => JSON.stringify(firstItem)) }.listDirection(Axis.Horizontal) // 排列方向 .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // 每行之间的分界线 .edgeEffect(EdgeEffect.Spring) // 滑动到边缘无效果 .onScrollIndex((firstIndex: number, lastIndex: number) => { console.info('first' + firstIndex) console.info('last' + lastIndex) }) .padding({ top: $r('app.float.home_list_padding'), left: $r('app.float.home_list_padding') }) .width('100%') // }.justifyContent(FlexAlign.Center) // .backgroundColor(0xAFEEEE)
/*今日特卖--end--*/
/*卡片推荐*/ List({ space: 5, initialIndex: 0 }) { ForEach(mainViewModel.getListCardData(), (listCardData: ItemData) => { ListItem() {Column() {}} .backgroundImage(listCardData.img) .backgroundImageSize(ImageSize.Auto) .padding({ top: $r('app.float.home_list_padding'), left: $r('app.float.home_list_padding'), right: $r('app.float.home_list_padding') }) .borderRadius($r('app.float.home_backgroundImage_borderRadius')) .height($r('app.float.home_grid_height')) .width(CommonConstants.FULL_PARENT) }, (listCardData: ItemData) => JSON.stringify(listCardData)) }.listDirection(Axis.Vertical) // 排列方向 .edgeEffect(EdgeEffect.Spring) // 滑动到边缘无效果 .padding({ top: $r('app.float.home_list_padding'), left: $r('app.float.home_list_padding'), right:$r('app.float.home_list_padding') }) .width(CommonConstants.FULL_PARENT) .height(CommonConstants.FULL_PARENT) } } .height(CommonConstants.FULL_PARENT)
}
六、软件架构
- 开发语言:ArkTS
- 开发环境:windows11
- 开发工具:DevEco Studio https://developer.harmonyos.com/cn/develop/deveco-studio#download
分类
标签
赞
收藏
回复
相关推荐