【中工开发者】电商AppUI-仿淘宝

wx675037c1e9da4

发布于 2024-12-11 20:25

438浏览

0收藏

一、引言

大家好，我是来自中工的一名学生，在数字化浪潮汹涌澎湃的当下，电子商务已然成为商业版图中不可或缺的关键一环。伴随移动互联网的迅猛发展以及技术的持续创新迭代，打造一个高效、安全且能为用户带来极致体验的电子商务系统，已成为重中之重。本项目聚焦于用户对高品质在线购物体验的强烈诉求，毅然选用鸿蒙 ArkTs 语言，全力开发一款功能完备的商城系统，此系统为基于鸿蒙开发的仿淘宝电商 app 模板。（注明：非原创，在原创基础上进行了修改与补充说明）

二、项目框架

【中工开发者】电商AppUI-仿淘宝-鸿蒙开发者社区

三、已实现功能

推荐页面（发现好物UI、今日特卖UI-支持左右滑动、发现频道UI、广告ListUI)
女装页面（服装种类UI-支持多种分类、格状品牌展示-Grid-UI）
男装页面（瀑布流-商品卡片浏览UI运动页面+电脑办公Tab页）
购物车页面（商品数量计算 + 订单金额计算）
个人中心页面（个人头像+昵称，我的订单，功能区）

四、页面展示

【中工开发者】电商AppUI-仿淘宝-鸿蒙开发者社区

五、主要项目解析

@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.
3.
4.
5.

1. 组件定义

HomePage是一个使用@Component注解的组件，它被导出为默认结构（export default）。

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)
  }1.
2.
3.
4.
5.
6.
7.

六、软件架构

开发语言：ArkTS
开发环境：windows11
开发工具：DevEco Studio https://developer.harmonyos.com/cn/develop/deveco-studio#download

分类

其他

标签

中工开发者

51CTO

51CTO博客

51CTO学堂