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

wx675037c1e9da4
发布于 2024-12-11 20:25
浏览
0收藏

一、引言

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

二、项目框架

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

三、已实现功能

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

四、页面展示

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


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


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


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


【中工开发者】电商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. 组件定义


​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. 开发语言:ArkTS
  2. 开发环境:windows11
  3. 开发工具:DevEco Studio ​​https://developer.harmonyos.com/cn/develop/deveco-studio#download​

分类
收藏
回复
举报
回复
    相关推荐