HarmonyOS实战开发-如何打造购物商城APP。

最新推荐文章于 2024-06-06 20:59:44 发布
最新推荐文章于 2024-06-06 20:59:44 发布
阅读量3.5k 收藏 58
点赞数 40
分类专栏： 鸿蒙工程师 HarmonyOS 鸿蒙 文章标签： harmonyos OpenHarmony 鸿蒙 鸿蒙应用开发 华为 鸿蒙开发 HarmonyOS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_82546228/article/details/138221025
版权
鸿蒙工程师 同时被 3 个专栏收录
567 篇文章 5 订阅
订阅专栏
鸿蒙
567 篇文章 2 订阅
订阅专栏
HarmonyOS
555 篇文章 0 订阅
订阅专栏
本文详细介绍了如何使用Swiper实现购物商城中的轮播图和推荐分类，以及主要模块如首页、商品列表和详情页面的开发，同时提及了鸿蒙框架下的技术栈和学习资源，适合开发者学习和实战
摘要由CSDN通过智能技术生成

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

做好商城项目，肯定会把开发中遇到的百分之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') })

推荐分类实现：

Flex({ justifyContent: FlexAlign.SpaceAround }) {
  // 通过ForEach方式实现分类显示
  ForEach(activityTitle, (item: ActivityTitleModel, index?: number) => {
    Flex({
      direction: FlexDirection.Column,
      justifyContent: FlexAlign.Center,
      alignItems: ItemAlign.Center
    }) {
      Text(item.title)
        .fontSize($r('app.float.small_font_size'))
        .fontWeight(500)
        .fontColor(Color.Black)
      Text(item.desc)
        .fontSize($r('app.float.small_font_size'))
        .fontWeight(400)
        .fontColor(this.activityTitleIndex === index ? '#e92f4f' : Color.Black)
        .opacity(this.activityTitleIndex === index ? 1 : 0.6)
    }
    .onClick(() => {
      if (index !== undefined) {
        this.activityTitleIndex = index;
      }
    })
    .height('100%')
  }, (item: ActivityTitleModel) => JSON.stringify(item))
}
.height($r('app.float.activity_title_height'))
.width('100%')
.padding($r('app.float.vp_twelve'))
.margin({ bottom: $r('app.float.vp_six'), top: $r('app.float.vp_six') })
.backgroundColor('#f1f3f5')
.borderRadius($r('app.float.vp_sixteen')) // 圆角效果

商品列表信息：

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%')

在这里插入图片描述

如果大家还没有掌握鸿蒙，现在想要在最短的时间里吃透它，我这边特意整理了《鸿蒙语法ArkTS、TypeScript、ArkUI等…视频教程》以及《鸿蒙开发学习手册》（共计890页），希望对大家有所帮助：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

鸿蒙语法ArkTS、TypeScript、ArkUI等…视频教程：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

OpenHarmony APP应用开发教程步骤：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

《鸿蒙开发学习手册》：

如何快速入门：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.基本概念
2.构建第一个ArkTS应用
3.……

在这里插入图片描述

开发基础知识：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.应用基础知识
2.配置文件
3.应用数据管理
4.应用安全管理
5.应用隐私保护
6.三方应用调用管控机制
7.资源分类与访问
8.学习ArkTS语言
9.……

在这里插入图片描述

基于ArkTS 开发：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.Ability开发
2.UI开发
3.公共事件与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台任务(Background Task)管理
11.设备管理
12.设备使用信息统计
13.DFX
14.国际化开发
15.折叠屏系列
16.……
在这里插入图片描述

鸿蒙生态应用开发白皮书V2.0PDF：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

码牛程序猿
关注
  • 40
    点赞
  • 踩
  • 58
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
HarmonyOS应用开发-常用组件与布局
11-05
简单的登录页面
HarmonyOS开发案例：【购物APP】
m0_70748845的博客
04-24 5657
使用toolbar、toolbar-item组件实现“首页”，“新品”，“购物车”，“我的”页面切换。使用list组件，展示购物车里的商品。使用swiper组件，实现图片自动轮播。使用panel组件，展示商品规格。使用自定义组件，提高代码的可读性。
纯血鸿蒙开发实战—如何开发出一个鸿蒙购物应用！
m0_64422261的博客
06-06 1342
HarmonyOS 支持应用以 Ability 为单位进行部署，Ability 可以分为 FA（Feature Ability）和 PA（Particle Ability）两种类型。
OpenHarmony实战开发-从0到1实现购物应用页面
m0_70749039的博客
03-28 1316
OpenHarmony ArkUI框架提供了丰富的动画组件和接口，开发者可以根据实际场景和开发需求，选用丰富的动画组件和接口来实现不同的动画效果。
『江鸟中原』鸿蒙购物应用开发--BuyBuyBuy
颜氏风寻的博客
11-30 6997
我在这篇文章中分享了我的鸿蒙移动应用开发课程的期末大作业--鸿蒙购物应用BuyBuyBuy，它是我在学习了这一学期的课程之后利用方舟开发框架（简称ArkUI开发框架）所做的一些UI开发成果。
简易Android购物App开发的移动端项目代码
06-19
一份简化的小项目，为了让初学者了解基本的开发流程。可以在Android App上查看物品，购买物品，查看购物车，提交订单，查看历史订单。这个小项目主要是为了达成以下两个目的： - 理解购物车如何实现 - 理解订单怎样生成 Android App使用原生开发，主要借助ListView呈现数据。服务器端使用SpringMvc+Spring+Mybatis技术，数据库采用Mysql。App和服务器间传递数据借助字符串或JSON。
鸿蒙HarmonyOS项目实战开发：分布式购物车
shudaoshanQAQ的博客
02-27 4567
分布式购物车demo 模拟的是我们购物时参加满减活动，进行拼单的场景
购物APP开发
lshxshdi的博客
05-18 570
如果您想在移动互联网时代便捷地将品牌展现至全球市场，彰显企业实力；或者您的商品天生具备反复购买的市场需求；或者您想在风起云涌的对外贸易中展露头角；或者您想将购物商城同各类游戏、SNS创意进行捆绑营销。 来看看Magento原生购物开发吧。
购物商城app开发的功能和流程是什么
sancaikeji的博客
10-24 5571
随着互联网时代的到来，电子商务迅猛发展让人们的购物更方便，更随时随地。而商城购物App是专门为商业零售及服务企业开发的手机客户端，帮助商家快速形成自有的用户群体，通过免费的信息推送开展促销活动，有效提升销售业绩。简而言之，手机App购物商城就是通过网络推广把线上的消费者带到现实的商店中去在线支付，购买线下的商品和服务，再到线下去提货和享受服务。 传统行业为何需要开发APP 1.成本高：零售业租金...
【HarmonyOS App】从0到1开发购物应用App(1)：开发登录页
风度
03-05 237
【代码】【HarmonyOS App】从0到1开发购物应用App(1)：开发登录页。
HarmonyOS应用开发-AppMultiplier体验分享.docx
06-09
在 HarmonyOS 应用开发中，AppMultiplier 是一个极具创新性的功能，它允许开发者构建能够充分利用设备屏幕空间的应用。这个特性主要通过平行视界（App Multiplier）来实现，为用户提供更加高效和沉浸式的多任务体验...
基于harmonyos-arkTs开发的高仿微信app软件+源码+文档
最新发布
07-06
基于harmonyos-arkTs开发的高仿微信app软件+源码+文档 基于harmonyos-arkTs开发的高仿微信app软件+源码+文档 基于harmonyos-arkTs开发的高仿微信app软件+源码+文档 基于harmonyos-arkTs开发的高仿微信app软件+...
HarmonyOS应用开发-module名字冲突解决方案.docx
04-27
在 HarmonyOS 应用开发过程中，模块（module）名字冲突是一个常见的问题，特别是在处理多模块项目或者集成不同库时。标题中的"HarmonyOS应用开发-module名字冲突解决方案.docx"文档，显然旨在提供一个解决此类问题的...
基于HarmonyOS 4开发的一款刷题的鸿蒙APP源代码
05-04
了解HarmonyOS的基本架构、服务和组件是开发这款刷题APP的基础。开发者需要掌握如何创建、配置和管理HarmonyOS项目，以及如何使用其特有的开发工具，如DevEco Studio。 2. **分布式应用开发** HarmonyOS的一大特色...
如何使用ArkUI从0-1写一个开发购物应用程序（上）
2401_82546228的博客
03-20 783
本文演示如何用HarmonyOS的ArkUI来开发一个购物应用程序。
鸿蒙实战开发 HUAWEI Codelabs 一次开发，多端部署-购物应用（ArkTS）
sybh的博客
01-24 1872
本篇Codelab基于自适应布局和响应式布局，实现购物应用在手机、折叠屏、平板不同屏幕尺寸设备上按不同设计显示。通过三层工程结构组织代码，实现一次开发，多端部署。
【HarmonyOS App】从0到1开发购物应用App(2)：开发首页
风度
03-08 341
【代码】【HarmonyOS App】从0到1开发购物应用App(2)：开发首页。
鸿蒙HarmonyOS项目实战开发：分布式购物车_harmonyos简单的购物应用示例
2401_84164595的博客
04-12 2013
1）通过**@CustomDialog**装饰器来创建自定义弹窗，使用方式可参考自定义弹窗；2）规则弹窗效果如下，弹窗组成由两个Text和两个Button竖向排列组成;所有我们可以在build()下使用Flexbuild() {Flex() {Text('加入购物车成功')Button('取消')Button('确定')3）在@entry创建CustomDialogController对象并传入弹窗所需参数，后面可通过该对象open()和close()方法进行打开和关闭弹窗；}),})
harmonyos 生活app h5开发文档
01-19
HarmonyOS生活App H5开发文档是针对开发人员的技术指南，它提供了关于如何使用HarmonyOS框架开发H5应用程序的详细说明和步骤。 首先，文档介绍了HarmonyOS框架的基本概念和架构，让开发人员对整个开发流程有一个清晰的了解。接着，文档详细介绍了H5开发所需的工具和环境配置，包括开发IDE、调试工具、模拟器等。开发人员可以根据文档提供的指引，快速搭建开发环境并开始编写代码。 文档还介绍了H5开发中常用的技术和组件，比如页面布局、样式设计、交互效果等内容，同时还提供了丰富的代码示例和实用的开发技巧。开发人员可以通过文档学习到如何利用HarmonyOS框架提供的能力，高效地构建H5应用程序，并且在不同设备上保持一致的用户体验。 此外，文档还包括了关于性能优化、安全开发、适配规范等方面的内容，帮助开发人员提升应用程序质量和稳定性。同时，还介绍了H5应用的发布和上线流程，以及常见问题的解决方案，为开发人员在应用发布和维护阶段提供了便利。 总之，HarmonyOS生活App H5开发文档全面而详细地介绍了H5开发的方方面面，对于开发人员来说是一份非常宝贵的参考资料，可以帮助他们更好地利用HarmonyOS框架开发优质的H5应用程序。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值