OpenHarmony分布式购物车案例展示~

简介

分布式购物车demo 模拟的是我们购物时参加满减活动，进行拼单的场景；实现两人拼单时，其他一人添加商品到购物车，另外一人购物车列表能同步更新，且在购物车列表页面结算时，某一人结算对方也能实时知道结算金额和优惠金额。整个操作效果分为3个小动画，

  • 拉起对方用户

  • 添加商品到购物车列表

  • 购物车列表勾选

  • demo效果（HH-SCDAYU200）

工程目录

完整的项目结构目录如下

├─entry\\src\\main
│          │  config.json  应用配置文件
│          │ 
│          ├─ets
│          │  └─MainAbility
│          │      │  app.ets  ets应用程序主入口
│          │      │ 
│          │      ├─model
│          │      │      ArsData.ets     // 初始化我的页面数据
│          │      │      CommonLog.ets   // 日志类
│          │      │      GoodsData.ets   // 初始化商品信息数据类
│          │      │      MenuData.ets    // 初始化我的页面数据类
│          │      │      RemoteDeviceManager.ets  // 分布式拉起设备管理类
│          │      │      ShoppingCartDistributedData.ets  // 加入购物车分布式数据库
│          │      │      TotalSelectedDistributedData.ets // 结算购物车分布式数据库
│          │      │ 
│          │      └─pages
│          │              DetailPage.ets   // 商品详情页面
│          │              HomePage.ets     // 应用首页
│          │              MyPage.ets       // 我的页面
│          │              ShoppingCartListPage.ets  // 购物车列表页面
│     └─resources // 静态资源目录
│         ├─base
│         │  ├─element
│         │  ├─graphic
│         │  ├─layout
│         │  ├─media // 存放媒体资源
│         │  └─profile
│         └─rawfile

开发步骤

1. 新建OpenHarmony ETS项目

在DevEco Studio中点击File -> New Project ->[Standard]Empty Ability->Next，Language 选择ETS语言，最后点击Finish即创建成功。

2. 编写商品展示主页面

效果图如上可以分为两部分

2.1商品列表展示

1）首先在@entry组件入口build()中使用 Tabs作为容器，达到排行榜和推荐翻页的效果；

2）再通过 List 包裹 Row 布局依次写入 Column 包裹的三个 Text 组件和 Image 组件；

3）并通过 Navigator 组件实现点击商品跳转到商品详细页功能，页面跳转过程使用 pageTransition 转场动画

Tabs() {
       TabContent() {
         GoodsList({ goodsItems: this.goodsItems});
       }
       .tabBar("畅销榜")
       .backgroundColor(Color.White)

       TabContent() {
         GoodsList({ goodsItems: this.goodsItems});
       }
       .tabBar("推荐")
       .backgroundColor(Color.White)
     }
      Navigator({ target: 'pages/DetailPage' }) {
       Row({ space: '40lpx' }) {
         Column() {
           Text(this.goodsItem.title)
             .fontSize('28lpx')
           Text(this.goodsItem.content)
             .fontSize('20lpx')
           Text('￥' + this.goodsItem.price)
             .fontSize('28lpx')
             .fontColor(Color.Red)
         }
         .height('160lpx')
         .width('50%')
         .margin({ left: '20lpx' })
         .alignItems(HorizontalAlign.Start)

         Image(this.goodsItem.imgSrc)
           .objectFit(ImageFit.ScaleDown)
           .height('160lpx')
           .width('40%')
           .renderMode(ImageRenderMode.Original)
           .margin({ right: '20lpx', left: '20lpx' })

       }
       .height('180lpx')
       .alignItems(VerticalAlign.Center)
       .backgroundColor(Color.White)
     }
     .params({ goodsItem: this.goodsItem ,ShoppingCartsGoods:this.ShoppingCartsGoods})
     .margin({ left: '40lpx' })
   }
   // 转场动画使用系统提供的多种默认效果(平移、缩放、透明度等)
 pageTransition() {
   PageTransitionEnter({ duration: 1000 })
     .slide(SlideEffect.Left)
   PageTransitionExit({ duration: 1000  })
     .slide(SlideEffect.Right)
 }
2.2底部导航栏

1）通过 Row 包裹三个 Image 组件，并添加onClick 点击事件，修改 @Consume 修饰的变量，从而改变 @Provide 装饰的变量，再通过条件渲染展示不同的页面内容；

Flex() {
        Image(this.iconPath[0])
          .objectFit(ImageFit.Cover)
          .height('60lpx')
          .width('60lpx')
          .margin({left:'50lpx',right:'40lpx'})
          .onClick(() => {
            this.iconPath[0] = this.iconPathSelectsTmp[0]
            this.iconPath[1] = this.iconPathTmp[1]
            this.iconPath[2] = this.iconPathTmp[2]
            this.currentPage = 1
          })
        Image(this.iconPath[1])
          .objectFit(ImageFit.Cover)
          .height('60lpx')
          .width('60lpx')
          .margin({left:'40lpx',right:'40lpx'})
          .onClick(() => {
            this.iconPath[0] = this.iconPathTmp[0]
            this.iconPath[1] = this.iconPathSelectsTmp[1]
            this.iconPath[2] = this.iconPathTmp[2]
            this.currentPage = 2
            this.remoteData.putData("shopping_cart", this.ShoppingCartsGoods)
          })
        Image(this.iconPath[2])
          .objectFit(ImageFit.Cover)
          .height('60lpx')
          .width('60lpx')
          .margin({left:'40lpx',right:'50lpx'})
          .onClick(() => {
            this.iconPath[0] = this.iconPathTmp[0]
            this.iconPath[1] = this.iconPathTmp[1]
            this.iconPath[2] = this.iconPathSelectsTmp[2]
            this.currentPage = 3
          })
      }
    .margin({top:'20lpx'})
    }
      
      Column() {
          if (this.currentPage == 1) {
            Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.End }) {
              Image($r("app.media.icon_share"))
                .objectFit(ImageFit.Cover)
                .height('60lpx')
                .width('60lpx')
            }
            .width("100%")
            .margin({ top: '20lpx', right: '50lpx' })
            .onClick(() => {
              this.playerDialog.open()
            })

            GoodsHome({ goodsItems: this.goodsItems})
          }
          else if (this.currentPage == 3) {
            //我的
            MyInfo()
          }
        }
3. 编写商品详细页面
3.1顶部滑动组件

1）滑动容器，提供切换子组件显示的能力；

Swiper() {
        ForEach(this.detailImages, item => {
          Image(item)
            .height('400lpx')
            .width('100%')
        })
      }
      .index(0)
      .autoPlay(true)
      .interval(3000)
      .indicator(true)
      .loop(true)
      .height('440lpx')
      .width('100%')
3.2 自定义弹框

1）通过 @CustomDialog装饰器来创建自定义弹窗，使用方式可参考 自定义弹窗；

2）规则弹窗效果如下，弹窗组成由两个 Text 和两个 Button 竖向排列组成;

所有我们可以在build()下使用 Flex 容器来包裹，组件代码如下：

@CustomDialog
struct CustomDialogExample {
  controller: CustomDialogController
  cancel: () => void
  confirm: () => void
  ShoppingCartsGoods: any[]

  build() {
    Flex() {
      Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
        Text('加入购物车成功')
          .fontColor("#000000")
          .fontSize('40lpx')
          .margin({ top: '20lpx', bottom: "20lpx" })

        Flex({ justifyContent: FlexAlign.SpaceAround }) {
          Button('取消')
            .onClick(() => {
              this.controller.close()
              this.cancel()
            }).backgroundColor(0xffffff).fontColor(Color.Black)
          Button('确定')
            .onClick(() => {
              this.controller.close()
              this.confirm()
            }).backgroundColor(0xffffff).fontColor(Color.Red)
        }.margin({ bottom: "20lpx" })
      }
    }
    .height('200lpx')
  }
}

​3）在@entry创建CustomDialogController对象并传入弹窗所需参数，后面可通过该对象open()和close()方法进行打开和关闭弹窗；

dialogController: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample({
      cancel: this.onCancel,
      confirm: this.onAccept,
      ShoppingCartsGoods: this.ShoppingCartsGoods
    }),
    cancel: this.existApp,
    autoCancel: true
  })
  onCancel() {
    CommonLog.info('Callback when the first button is clicked')
  }

  onAccept() {
    CommonLog.info('Callback when the second button is clicked')
    router.push({
      uri: "pages/HomePage",
      params: { dataList: this.ShoppingCartsGoods }
    })
  }

  existApp() {
    CommonLog.info('Click the callback in the blank area')
  }
4. 添加分布式流转

分布式流转需要在同一网络下通过 DeviceManager组件 进行设备间发现和认证，获取到可信设备的deviceId调用 featureAbility.startAbility ，即可把应用程序流转到另一设备。

1）创建DeviceManager实例；

2）调用实例的startDeviceDiscovery()，开始设备发现未信任设备；

3）设置设备状态监听on(‘deviceFound’，callback),获取到未信任设备，并用discoverList变量进行维护；

4）传入未信任设备参数，调用实例authenticateDevice方法，对设备进行PIN码认证；

5）若是已信任设备，可通过实例的getTrustedDeviceListSync()方法来获取设备信息；

6）将设备信息中的deviceId传入 `featureAbility.startAbility方法，实现流转；

7）流转接收方可通过 featureAbility.getWant()获取到发送方携带的数据；

项目中将上面设备管理封装至RemoteDeviceManager，通过RemoteDeviceManager的四个方法来动态维护deviceList设备信息列表，实现分布式流转只需要在deviceList中获取deviceId，然后调用featureAbility.startAbility并携带数据，即可实现分布式流转。

5.分布式数据管理

分布式数据管理 要求两个或多个设备在同一网络,才能监听到数据库的改变，从而渲染页面；开发步骤：

1）创建一个KVManager对象实例，用于管理数据库对象；

2）通过指定Options和storeId，创建并获取KVStore数据库，如下是参数说明；需要先通过createKVManager构建一个KVManager实例；

参数名类型必填说明
storeIdstring是数据库唯一标识符，长度不大于 MAX_STORE_ID_LENGTH。
optionsOptions是创建KVStore实例的配置信息。

3）KVStore数据库实例， KVStore.put提供增加数据的方法，如下是参数说明；

参数名类型必填说明
keystring是要添加数据的key，不能为空且长度不大于 MAX_KEY_LENGTH 。
valueUint8Arraystringnumber
callbackAsyncCallback是回调函数。

4） KVStore数据库实例，KVStore.on订阅指定类型的数据变更通知；一般监听远端设备变化，再进行相应操作达到分布式数据共享的效果；

本d项目通过storeId 值不同，创建了两个数据库，分别是ShoppingCartsInfo类和TotalData类，ShoppingCartsInfo应用添加商品到购物车，TotalData应用在购物车列表进行勾选结算；如下是TotalData类流程

如下是ShoppingCartsInfo类流程

项目下载和导入

1）git下载

git clone https://gitee.com/openharmony-sig/knowledge_demo_shopping.git  --depth=1

2）项目导入

打开DevEco Studio,点击File->Open->下载路径/FA/Shopping/DistributedShoppingCart

为了能让大家更好的学习鸿蒙（HarmonyOS NEXT）开发技术，这边特意整理了《鸿蒙开发学习手册》（共计890页），希望对大家有所帮助：https://qr21.cn/FV7h05

《鸿蒙开发学习手册》：https://qr21.cn/FV7h05

入门必看：https://qr21.cn/FV7h05
1.  应用开发导读(ArkTS)
2.  ……

HarmonyOS 概念：https://qr21.cn/FV7h05

  1. 系统定义
  2. 技术架构
  3. 技术特性
  4. 系统安全

如何快速入门：https://qr21.cn/FV7h05
1.  基本概念
2.  构建第一个ArkTS应用
3.  构建第一个JS应用
4.  ……

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

基于ArkTS 开发：https://qr21.cn/FV7h05
1.  Ability开发
2.  UI开发
3.  公共事件与通知
4.  窗口管理
5.  媒体
6.  安全
7.  网络与链接
8.  电话服务
9.  数据管理
10.  后台任务(Background Task)管理
11.  设备管理
12.  设备使用信息统计
13.  DFX
14.  国际化开发
15.  折叠屏系列
16.  ……

鸿蒙开发面试真题（含参考答案）：https://qr21.cn/FV7h05

结语

不久前，华为在致敬鸿蒙开发者公开信中表示：

“HarmonyOS 的辉煌属于每一位辛勤耕耘的开发者，你们是 HarmonyOS 走向成功的奠基者，更是信息技术产业繁荣发展的先行者。”

事实上，鸿蒙系统生态能够在问世至今不到五年的时间里迅速壮大，并且在今年勇敢地迈向“纯原生”的新阶段，华为对开发人才的重视，可列为最重要的因素之一。如今就业市场上鸿蒙人才被“爆抢”，何尝不是行业规律对华为重视人才的一种“回报”？

而让每一位开发人才都能够发光发亮，才能走出全新的生态之路，从而更进一步点亮我国信息技术产业发展的前路。#春招鸿蒙岗位需求是去年近3倍# #鸿蒙程序员平均月薪超1万8

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/413009.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

苹果设备再现完美兼容32位软件 只需一款神奇工具 CrossOver 24发布：基于 Wine 9.0，能让 Mac 初步运行 32位应用

苹果设备再现完美兼容32位软件 只需一款神奇工具 CrossOver 24发布：基于 Wine 9.0，能让 Mac 初步运行 32位应用

近日，CodeWeavers发布了CrossOver 24版本的更新。这次的更新是基于最新的Wine 9.0版本而进行的。这一版本的更新不仅能够兼容更多应用程序和游戏，而且还可以初步支持运行32位的应用程序。 自从苹果在macOS Catalina系统中移除对32位软件的支持之后&…
阅读更多...
【Git】Git命令的学习与总结

【Git】Git命令的学习与总结

本文实践于 Learn Git Branching 这个有趣的 Git 学习网站。在该网站，可以使用 show command 命令展示所有可用命令。你也可以直接访问网站的sandbox，自由发挥。 一、本地篇 基础篇 git commit git commit将暂存区（staging area&#xff…
阅读更多...
Outlook邮箱配置步骤？如何配置电子邮箱？

Outlook邮箱配置步骤？如何配置电子邮箱？

Outlook邮箱配置的方法？Outlook邮箱配置SMTP的方法？ Outlook邮箱配置不仅能够帮助我们高效地管理邮件，还可以提供日程安排、联系人管理等多项功能。那么，如何配置Outlook邮箱呢？接下来，蜂邮EDM将为大家详细…
阅读更多...
mac安装zookeeper

mac安装zookeeper

下载地址： http://archive.apache.org/dist/zookeeper/ 注意：由于Zookeeper从3.5.5版本开始，带有bin名称的包才是我们想要的下载可以直接使用的里面有编译后的二进制的包，而之前的普通的tar.gz的包里面是只是源码的包无法直接使…
阅读更多...
HUAWEI Programming Contest 2024（AtCoder Beginner Contest 342）

HUAWEI Programming Contest 2024（AtCoder Beginner Contest 342）

D - Square Pair 题目大意 给一长为的数组，问有多少对，两者相乘为非负整数完全平方数 解题思路 一个数除以其能整除的最大的完全平方数，看前面有多少个与其余数相同的数，两者乘积满足条件（已经是完全平方数的部分无…
阅读更多...
微信小程序蓝牙通信HC08

微信小程序蓝牙通信HC08

总结这两天研究的蓝牙串口。人话版资料不多，主要靠翻别人的仓库和文档。 单片机部分，与蓝牙串口通信是通过串口。比我想的要简单，小程序部分，有非常多的服务和特征，而且人话版资料不多。 如果本文有什么问题&#xf…
阅读更多...
AI之T2I：Stable Diffusion 3的简介、安装和使用方法、案例应用之详细攻略

AI之T2I：Stable Diffusion 3的简介、安装和使用方法、案例应用之详细攻略

AI之T2I：Stable Diffusion 3的简介、安装和使用方法、案例应用之详细攻略 目录 Stable Diffusion 3的简介 1、效果测试 官方demo 网友提供 Stable Diffusion 3的安装和使用方法 1、安装 2、使用方法 Stable Diffusion 3的案例应用 1、基础案例 Stable Diff…
阅读更多...
RestTemplate启动问题解决

RestTemplate启动问题解决

⭐ 作者简介：码上言 ⭐ 代表教程：Spring Boot vue-element 开发个人博客项目实战教程 ⭐专栏内容：个人博客系统 ⭐我的文档网站：http://xyhwh-nav.cn/ RestTemplate启动问题解决 问题：在SpringCloud架构项目中配…
阅读更多...
Vue实现登录保存token并校验实现保存登录状态

Vue实现登录保存token并校验实现保存登录状态

文章目录 一、登录vue二、路由index 一、登录vue <script> import request from "/axios/baseURL"; import router from "/router";// 接口数据初始化 const FORM_DATA {userName: "",password: "", }; export default {data(…
阅读更多...
腾讯文档（excel也一样）设置单元格的自动行高列宽

腾讯文档（excel也一样）设置单元格的自动行高列宽

1. 选中单元格 可选择任意一个或者几个 2. 设置自动 行高和列宽 即可生效
阅读更多...
掌握微信小程序开发的核心要点：从基础到进阶

掌握微信小程序开发的核心要点：从基础到进阶

文章目录 掌握微信小程序开发的核心要点&#xff1a;从基础到进阶一、数据绑定和事件处理1.1 理解小程序的数据绑定机制&#xff0c;实现数据和视图的同步更新1.2 学习如何处理用户交互事件和触发相应的响应逻辑 二、网络请求和数据交互2.1 使用小程序的网络请求API与后端服务器…
阅读更多...
unity发布webGL压缩方式的gzip，使用nginx作为web服务器时的配置文件

unity发布webGL压缩方式的gzip，使用nginx作为web服务器时的配置文件

unity发布webGL压缩方式的gzip&#xff0c;使用nginx作为web服务器时的配置文件 Unity版本是&#xff1a;2021.3 nginx的版本是&#xff1a;nginx-1.25.4 Unity发布webgl时的测试 设置压缩方式是gzip nginx配置文件 worker_processes 1;events {worker_connections 102…
阅读更多...
vue项目打包获取git commit信息并输出到打包后的指定文件夹中

vue项目打包获取git commit信息并输出到打包后的指定文件夹中

需求背景&#xff1a; 前端项目经常打包&#xff0c;发包部署&#xff0c;为了方便测试及运维发现问题时与正确commit信息对比 实现方式&#xff1a; 使用Node.js的child_process模块来执行git命令 实现步骤&#xff1a; 1.在package.json的同级目录下新建一个version.js文件。…
阅读更多...
PyQt6的开发流程（密码生成小程序为例）

PyQt6的开发流程（密码生成小程序为例）

PyQt6的开发流程&#xff08;密码生成小程序为例&#xff09; 文章目录 PyQt6的开发流程&#xff08;密码生成小程序为例&#xff09;一、流程介绍与概览1. 界面与逻辑分离的开发流程2. PyQt6的开发流程 二、打开 designer.exe 创建文件三、用QT设计师绘制界面保存成ui1. QT常用…
阅读更多...
springboot+vue网站开发-后端管理框架-vue-admin-template

springboot+vue网站开发-后端管理框架-vue-admin-template

为了方便国内用户下载&#xff0c;我把自己的百度网盘分享给大家一份地址&#xff0c;可以去下载。 如果你有上网盒子软件&#xff0c;那就自己去下载&#xff0c;很小。不到1MB. 链接&#xff1a;https://pan.baidu.com/s/15LJ2MoSWToFGFp28VaxBeQ?pwdbaby 提取码&#xff…
阅读更多...
微服务-微服务链路追踪组件Skywalking实战

微服务-微服务链路追踪组件Skywalking实战

自动化监控系统Prometheus&Grafana实战&#xff1a; 4 trem APM-性能监控项目班&#xff1a; https://vip.tulingxueyuan.cn/detail/p_602e574ae4b035d3cdb8f8fe/6 1. skywalking是什么 1.1 Skywalking主要功能特性 1.2 Skywalking整体架构 1.3 SkyWalking 环境搭建部…
阅读更多...
【数据处理】Python解析nii.gz文件

【数据处理】Python解析nii.gz文件

最近又接触了一种影像数据格式&#xff1a;nii.gz文件&#xff0c;记录一下python读取方式。 数据处理系列篇&#xff1a;   【数据处理】Python读取.mat文件的方法   【数据处理】Python读取.dcm文件的方法   【数据处理】Python解析json文件   【数据处理】Python解析…
阅读更多...
日更【系统架构设计师知识总结3】存储系统

日更【系统架构设计师知识总结3】存储系统

【原创精华总结】自己一点点手打、总结的脑图&#xff0c;把散落在课本以及老师讲授的知识点合并汇总&#xff0c;反复提炼语言&#xff0c;形成知识框架。希望能给同样在学习的伙伴一点帮助&#xff01;
阅读更多...
HTTP与HTTPS-HTTPS 的应用数据是如何保证完整性的?

HTTP与HTTPS-HTTPS 的应用数据是如何保证完整性的?

资料来源 : 小林coding 小林官方网站 : 小林coding (xiaolincoding.com) HTTPS 的应用数据是如何保证完整性的? TLS 在实现上分为握手协议和记录协议两层 TLS 握手协议就是我们前面说的 TLS 四次握手的过程&#xff0c;负责协商加密算法和生成对称密钥&#xff0c;后续用此密…
阅读更多...
信息安全计划

信息安全计划

任何管理人员或人力资源专业人士都知道&#xff0c;除非彻底记录标准和实践&#xff0c;否则永远无法真正实施和执行标准和实践。正如您可能想象的那样&#xff0c;在保护您的网络、技术和数据系统免受网络威胁以及在发生这些事件时规划最及时、高效和有效的响应时&#xff0c;…
阅读更多...
最新文章

Copyright @ 2022~2023