HarmonyOS实战开发-如何打造购物商城APP。_业界新闻

发布时间:2024-08-03 16:47

阅读量:0

今天给大家分享一个非常好的实战项目，购物商城，购物商城是一个集购物、娱乐、服务于一体的综合性平台，致力于为消费者提供一站式的购物体验。各种功能都有涉及，最适合实现学习。

做好商城项目，肯定会把开发中遇到的百分之60的技术得到实战的经验。

下面介绍一下商城的主要模块：

首页

1，搜索框，点击进入搜索页面
2，顶部分类，通过不同分类查询对应信息
3，广告轮播，自动切换图片，可以进行点击进入
4，商品列表，展示每个项目信息，点击可以进入商品详情页面

轮播图使用Swiper实现：

Swiper() {   ForEach(swiperImage, (item: Resource) => {     Image(item)       .width('100%')       .aspectRatio(2.25)       .borderRadius($r('app.float.vp_sixteen'))       .backgroundColor(Color.White)   }, (item: Resource) => JSON.stringify(item)) } .indicatorStyle({ selectedColor: '#F74E42' }) // 切换选择项颜色 .autoPlay(true) // 自动播放 .itemSpace('14vp') .width('100%') .indicator(true) // 是否显示切换小点 .displayCount(1) .margin({ top: $r('app.float.vp_twelve') , bottom: $r('app.float.vp_twelve') })

商品列表信息：

List({ space: 12 }) {   // 通过懒加载 LazyForEach方式实现商品列表   LazyForEach(new CommonDataSource<Commodity>(this.commodityList), (item: Commodity) => {     ListItem() {       this.CommodityItem(item)     }     .margin({ left: $r('app.float.vp_six'), right: $r('app.float.vp_six') })     .onClick(() => {       if (this.onClickItem !== undefined) {         this.onClickItem(item);       }     })   }, (item: Commodity) => JSON.stringify(item)) } .margin({ left: -6, right: -6 }) .listDirection(Axis.Vertical) // 列表显示方式，垂直 .lanes(this.column) // 显示的行数

购物车

列表实现List：

Column() {   List({ space: 15 }) {     ForEach(this.shopCartData, (item: Product, index?: number) => {       ListItem() {         if (index !== undefined) {           this.CartItem(item, index)         }       }       .swipeAction({ end: this.ItemDelete(item) }) //自定義滑動刪除效果     }, (item: Product) => item.id)   } } .height('100%')

列表item信息实现：

复选框：Checkbox

@Builder CartItem(item: Product, index: number) {   Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {     Checkbox({       name: `checkbox ${index}`,       group: 'checkboxGroup'     })       .width($r('app.float.vp_twenty_four'))       .height($r('app.float.vp_twenty_four'))       .selectedColor('#ed6f21')       .select(this.selectProductChange(index))       .onClick(() => {         console.log('=====' + index)         let tempData: SelectProducts = {           key: this.selectProducts[index].key,           selected: !this.selectProducts[index].selected         }         this.selectProducts.splice(index, 1, tempData)       })     Image($rawfile(item.img[0]))       .height(80)       .width(80)       .objectFit(ImageFit.Cover)       .margin({ left: $r('app.float.vp_sixteen') })     Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.SpaceAround }) {       Text($r('app.string.commodity_piece_description', item.name, item.description))         .fontSize($r('app.float.small_font_size'))         .margin({ bottom: $r('app.float.vp_eight') })         .textOverflow({ overflow: TextOverflow.Ellipsis })         .maxLines(2)         .width('100%')       Text(item.specifications.length === 2 ?         item.specifications[0].value + '，' + item.specifications[1].value:           item.specifications.length === 3 ?           item.specifications[0].value + '，' + item.specifications[1].value + '，' + item.specifications[2].value :             item.specifications.length === 4 ?             item.specifications[0].value + '，' + item.specifications[1].value + '，' + item.specifications[2].value + '，' + item.specifications[3].value : ''       )         .fontSize(12)         .maxLines(1)         .fontColor('#99000000')         .textOverflow({ overflow: TextOverflow.Ellipsis })         .width('100%')       Flex({ justifyContent: FlexAlign.SpaceBetween }) {         Text() {           Span("￥")             .fontSize(12)             .fontColor('#e92f4f')           Span(`${item.price}`)             .fontSize($r('app.float.middle_font_size'))             .fontColor('#e92f4f')         }           CountProduct({           count: item.count,           onNumberChange: (num: number) => {             // this.onChangeCount(num, item);           }         })       }     }     .margin({       left: $r('app.float.vp_sixteen'),       top: $r('app.float.vp_twelve'),       bottom: $r('app.float.vp_twelve')     })     .width('100%')   }   .padding({     left: $r('app.float.vp_twelve'),     right: $r('app.float.vp_twelve')   })   .borderRadius($r('app.float.vp_sixteen'))   .backgroundColor(Color.White)   .width('100%')   .height(112) }

我的

我的-订单信息模块

Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) {   ForEach(this.orderIconButton, (iconButton: IconButtonModel) => {    this.IconButton(iconButton)   }, (iconButton: IconButtonModel) => JSON.stringify(iconButton)) } .width('100%')

商品详情页面：

商品详情页面整体布局使用堆叠布局，头部返回和分享不随界面滑动剩余布局使用GridRow和GridCol构成，网格组成。底部可以进行商品添加购物车，点击立即购买进入订单确认界面。

Stack({ alignContent: Alignment.TopStart }) {       Flex({ direction: FlexDirection.Column }) {         Scroll() {           GridRow({             columns: { sm: 4, md: 8, lg: 12 },             gutter: 12           }) {             GridCol({               span: { sm: 4, md: 8, lg: 12 }             }) {               this.CustomSwiper(this.commodity.images)             }               GridCol({               span: { sm: 4, md: 8, lg: 12 },               offset: { lg: 2 }             }) {               Column() {                 /*價格信息*/                 DetailTitleBar()                 /*選這項*/                 SpecifiSetting()                 /*服務和送貨地址*/                 SpecialAddres_Service()                 /*評價*/                 UserReviews()               }             }           }         }           GridRow({           columns: { sm: 4, md: 8, lg: 12 },           gutter: 12         }) {           GridCol({             span: { sm: 4, md: 8, lg: 12 },             offset: { lg: 2 } }) {               ShoppingBottomMenu()           }         }       }         /*頭部返回和分享*/       Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween }) {         Button() {           Image($r('app.media.ic_back')).height('100%').aspectRatio(1)         }         .titleButton()         .onClick(() => router.back())           Button() {           Image($r('app.media.ic_share')).height('100%').aspectRatio(1)         }         .titleButton()       }       .margin({ left: $r('app.float.vp_sixteen'), top: $r('app.float.vp_sixteen'), right: $r('app.float.vp_sixteen') })     }     .backgroundColor('#e1e1e1')     .height('100%')