devbox
Gausst松鼠会
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

鸿蒙HarmonyOS项目实战开发：分布式菜单

作者：Gausst松鼠会 | 2024-03-18 22:33:58

赞

踩

鸿蒙HarmonyOS项目实战开发：分布式菜单

简介

分布式菜单demo 模拟的是多人聚餐点菜的场景，不需要扫码关注公众号等一系列操作，通过分布式数据库可以方便每个人可及时查看到订单详情，数量，总额等；效果如下

  • demo效果

    show

目录

完整的项目结构目录如下

  1. ├─entry
  2. │  └─src
  3. │      └─main
  4. │          │  config.json  // 应用配置文件
  5. │          │  
  6. │          ├─ets
  7. │          │  └─MainAbility
  8. │          │      │  app.ets  // 应用程序主入口
  9. │          │      │  
  10. │          │      ├─model
  11. │          │      │      CommonLog.ets  // 日志类
  12. │          │      │      MenuData.ets  // 初始化菜单数据类
  13. │          │      │      MenuListDistributedData.ets  // 加入菜单分布式数据库
  14. │          │      │      RemoteDeviceManager.ets  // 分布式拉起设备管理类
  15. │          │      │      SubmitData.ets   // 结算订单分布式数据库
  16. │          │      │      
  17. │          │      └─pages
  18. │          │              detailedPage.ets // 菜品详细页面
  19. │          │              index.ets // 首页
  20. │          │              menuAccount.ets // 订单详情页面
  21. │          │              
  22. │          └─resources
  23. │              ├─base
  24. │              │  ├─element
  25. │              │  │      string.json
  26. │              │  │      
  27. │              │  ├─graphic
  28. │              │  ├─layout
  29. │              │  ├─media   // 存放媒体资源
  30. │              │  │      icon.png
  31. │              │  │      icon_add.png
  32. │              │  │      icon_back.png
  33. │              │  │      icon_cart.png
  34. │              │  │      
  35. │              │  └─profile
  36. │              └─rawfile

开发步骤

1. 新建OpenHarmony ETS项目

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

image-20211124092813545

image-20211124092813545

2. 编写商品展示主页面

image-20211124093106260

2.1用户信息

1): 主要用到Flex容器Image和Text组件；

2): 用户名称和头像图标，根据设备序列号不同，可展示不同的名称和图标；

3): 点击右上角分享的小图标，可分布式拉起局域网内的另一台设备；

  1. @Component
  2. struct MemberInfo {
  3.   @Consume userImg: Resource
  4.   @Consume userName: string
  5.   
  6.   aboutToAppear() {
  7.   // 根据设备序列号不同，展示不同的名称和图标
  8.     CommonLog.info('==serial===' + deviceInfo.serial);
  9.     if (deviceInfo.serial == '150100384754463452061bba4c3d670b') {
  10.       this.userImg = $r("app.media.icon_user")
  11.       this.userName = 'Sunny'
  12.     }
  13.     else {
  14.       this.userImg = $r("app.media.icon_user_another")
  15.       this.userName = 'Jenny'
  16.     }
  17.   }
  18.  
  19.   build() {
  20.     Flex({ direction: FlexDirection.Column }) {
  21.       Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {
  22.         Image(this.userImg)
  23.           .width('96lpx')
  24.           .height('96lpx')
  25.           .margin({ right: '18lpx' })
  26.         Text(this.userName)
  27.           .fontSize('36lpx')
  28.           .fontWeight(FontWeight.Bold)
  29.           .flexGrow(1)
  30.         Image($r("app.media.icon_share"))
  31.           .width('64lpx')
  32.           .height('64lpx')
  33.       }
  34.       // 打开分布式设备列表
  35.       .onClick(() => {
  36.         this.DeviceDialog.open()
  37.       })
  38.       .layoutWeight(1)
  39.       .padding({ left: '48lpx', right: '48lpx' })
  40.  
  41.       Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {
  42.         Column() {
  43.           Text('124')
  44.             .fontSize('40lpx')
  45.             .margin({ bottom: '24lpx' })
  46.           Text('积分')
  47.             .fontSize('22lpx')
  48.             .opacity(0.4)
  49.         }
  50.         .flexGrow(1)
  51.  
  52.         Column() {
  53.           Text('0')
  54.             .fontSize('40lpx')
  55.             .margin({ bottom: '24lpx' })
  56.           Text('优惠劵')
  57.             .fontSize('22lpx')
  58.             .opacity(0.4)
  59.         }
  60.         .flexGrow(1)
  61.  
  62.         Column() {
  63.           Image($r("app.media.icon_member"))
  64.             .width('48lpx')
  65.             .height('48lpx')
  66.             .margin({ bottom: '24lpx' })
  67.           Text('会员码')
  68.             .fontSize('22lpx')
  69.             .fontColor('#000000')
  70.             .opacity(0.4)
  71.         }
  72.         .flexGrow(1)
  73.       }
  74.       .layoutWeight(1)
  75.     }
  76.     .width('93%')
  77.     .height('25%')
  78.     .borderRadius('16lpx')
  79.     .backgroundColor('#FFFFFF')
  80.     .margin({ top: '24lpx', bottom: '32lpx' })
  81.   }
  82. }
2.2列表展示

1): 主要用到Flex容器 和Scroll容器Image和Text组件；

2): 从首页点击列表进入菜品详细页面，点菜成功后会自动返回首页，此时列表需要动态更新菜品的数量；

  1. @Component
  2. struct MenuHome {
  3.   private specialty: any[]
  4.   private winterNew: any[]
  5.   private classic: any[]
  6.   private soup: any[]
  7.   private menuItems: MenuData[]
  8.   private titleList = ['招牌菜', '冬季新品', '下饭菜', '汤品']
  9.   @State name: string = '招牌菜'
  10.  
  11.   build() {
  12.     Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Start }) {
  13.       Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.SpaceAround }) {
  14.         ForEach(this.titleList, item => {
  15.           Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.Start }) {
  16.             Text(item)
  17.               .fontSize('24lpx')
  18.           }
  19.           .padding({ left: '24lpx' })
  20.           .backgroundColor(this.name == item ? '#1A006A3A' : '#FFFFFF')
  21.           .height('160lpx')
  22.           .onClick(() => {
  23.             this.name = item
  24.             if (this.name == '招牌菜') {
  25.               this.menuItems = initializeOnStartup(this.specialty);
  26.             }
  27.             else if (this.name == '冬季新品') {
  28.               this.menuItems = initializeOnStartup(this.winterNew);
  29.             }
  30.             else if (this.name == '下饭菜') {
  31.               this.menuItems = initializeOnStartup(this.classic);
  32.             }
  33.             else if (this.name == '汤品') {
  34.               this.menuItems = initializeOnStartup(this.soup);
  35.             }
  36.           })
  37.         }, item => item)
  38.       }
  39.       .width('20%')
  40.       .backgroundColor('#FFFFFF')
  41.  
  42.       Flex({ direction: FlexDirection.Column }) {
  43.         Text(this.name)
  44.           .fontSize('32lpx')
  45.           .fontWeight(FontWeight.Bold)
  46.           .opacity(0.4)
  47.           .height('8%')
  48.         Scroll() {
  49.           Column() {
  50.             List() {
  51.               ForEach(this.menuItems, item => {
  52.                 ListItem() {
  53.                   MenuListItem({ menuItem: item })
  54.                 }
  55.               }, item => item.id.toString())
  56.             }
  57.           }
  58.         }
  59.         .height('92%')
  60.       }
  61.       .margin({ left: '10lpx' })
  62.       .width('75%')
  63.  
  64.     }
  65.     .height('50%')
  66.   }
  67. }
2.3底部总额

1): 主要用到Flex容器 和Stack容器Image和Text组件；

2): 从首页点击列表进入菜品详细页面，点菜成功后会自动返回首页，更新订单数量和总额；

3): 点击底部总额框，将订单列表加入分布式数据库，@entry模拟监听数据库变化，拉起订单列表详情页面；

  1. @Component
  2. struct TotalInfo {
  3.   @Consume TotalMenu: any[];
  4.   private total: number = 0;
  5.   private amount: number = 0;
  6.   private remoteData: MenuListData
  7.  
  8.   aboutToAppear() {
  9.     for (var index = 0; index < this.TotalMenu.length; index++) {
  10.       this.total = this.total + this.TotalMenu[index].price * this.TotalMenu[index].quantity
  11.       this.amount = this.amount + this.TotalMenu[index].quantity
  12.     }
  13.   }
  14.  
  15.   build() {
  16.     Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {
  17.       Stack({ alignContent: Alignment.Center }) {
  18.         Image($r("app.media.icon_cart"))
  19.           .width('96lpx')
  20.           .height('96lpx')
  21.           .margin({ left: '22lpx' })
  22.         Text(this.amount.toString())
  23.           .backgroundColor('#F84747')
  24.           .borderRadius('30plx')
  25.           .fontSize('24plx')
  26.           .textAlign(TextAlign.Center)
  27.           .fontColor('#FFFFFF')
  28.           .width('50lpx')
  29.           .height('50lpx')
  30.           .margin({ left: '100lpx', bottom: '85lpx' })
  31.       }
  32.       .width('150lpx')
  33.       .height('150lpx')
  34.  
  35.       Text('￥')
  36.         .fontSize('22lpx')
  37.         .fontColor('#006A3A')
  38.         .margin({ left: '22lpx' })
  39.       Text(this.total.toString())
  40.         .fontSize('40lpx')
  41.         .fontColor('#006A3A')
  42.         .flexGrow(1)
  43.       Text('点好了')
  44.         .height('100%')
  45.         .width('35%')
  46.         .fontColor('#FFFFFF')
  47.         .backgroundColor('#F84747')
  48.         .textAlign(TextAlign.Center)
  49.     }
  50.     // 将总的订单数据，加入分布式数据库
  51.     .onClick(() => {
  52.       this.remoteData.putData("menu_list", this.TotalMenu)
  53.     })
  54.     .width('100%')
  55.     .height('10%')
  56.     .backgroundColor('#FFFFFF')
  57.   }
  58. }
3. 编写菜单详细页面

image-20211124093106260

3.1 菜单详情

1): 主要用到Flex容器 Image和Text组件Button组件；

2): 辣度可以选择；

3):点击选好了，需要判断该菜品是否已经在总订单里面，并判断是哪一个用户添加，根据判断，做出相应的增加；

  1. @Component
  2. struct detailInfo {
  3.   private menuItem
  4.   private spicyList = ['正常辣', '加辣', '少辣']
  5.   @State spicy: string = '正常辣'
  6.   private TotalMenu: any[]
  7.   private index = 0
  8.   private userName: string
  9.  
  10.   build() {
  11.     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) {
  12.       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.Start }) {
  13.         Flex({ direction: FlexDirection.Row }) {
  14.           Flex() {
  15.             Image(this.menuItem.imgSrc)
  16.               .objectFit(ImageFit.Contain)
  17.           }
  18.  
  19.           Flex({ direction: FlexDirection.Column }) {
  20.             Text(this.menuItem.name)
  21.               .fontSize('32lpx')
  22.               .flexGrow(1)
  23.             Text(this.menuItem.remarks)
  24.               .fontSize('22lpx')
  25.               .fontColor('#000000')
  26.               .opacity(0.6)
  27.               .flexGrow(1)
  28.             Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {
  29.               Text('￥')
  30.                 .fontSize('22lpx')
  31.               Text(this.menuItem.price.toString())
  32.                 .fontSize('40lpx')
  33.               Text('/份')
  34.                 .fontSize('22lpx')
  35.                 .flexGrow(1)
  36.               Image($r("app.media.icon_reduce"))
  37.                 .width('44lpx')
  38.                 .height('44lpx')
  39.                 .onClick(() => {
  40.                   prompt.showToast({
  41.                     message: "Reduce function  to be completed",
  42.                     duration: 5000
  43.                   })
  44.                 })
  45.               Text(this.menuItem.quantity.toString())
  46.                 .margin({ left: '15lpx', right: '15lpx' })
  47.               Image($r("app.media.icon_add"))
  48.                 .width('44lpx')
  49.                 .height('44lpx')
  50.                 .margin({ right: '15lpx' })
  51.                 .onClick(() => {
  52.                   prompt.showToast({
  53.                     message: "Increase function to be completed",
  54.                     duration: 5000
  55.                   })
  56.                 })
  57.             }
  58.             .flexGrow(2)
  59.           }
  60.         }
  61.         .height('40%')
  62.         .margin({ top: '40lpx', bottom: '24lpx' })
  63.  
  64.         Button()
  65.           .backgroundColor('#000000')
  66.           .opacity(0.1)
  67.           .height('2lpx')
  68.           .margin({ left: '24lpx' })
  69.           .width('92%')
  70.  
  71.         Flex({ direction: FlexDirection.Row }) {
  72.           Button()
  73.             .backgroundColor('#006A3A ')
  74.             .width('8lpx')
  75.             .height('48lpx')
  76.             .margin({ right: '12lpx' })
  77.           Text('辣度')
  78.         }
  79.         .margin({ left: '44lpx', top: '48lpx', bottom: '32lpx' })
  80.  
  81.         Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceEvenly }) {
  82.           ForEach(this.spicyList, item => {
  83.  
  84.             Button(item)
  85.               .fontSize('28lpx')
  86.               .height('60lpx')
  87.               .width('156lpx')
  88.               .borderRadius('12lpx')
  89.               .backgroundColor(this.spicy == item ? '#006A3A' : '#0D000000')
  90.               .fontColor(this.spicy == item ? '#FFFFFF' : '#000000')
  91.  
  92.               .onClick(() => {
  93.                 this.spicy = item
  94.               })
  95.           }, item => item)
  96.         }
  97.       }
  98.       .margin({ top: '56lpx' })
  99.       .width('92%')
  100.       .height('50%')
  101.       .borderRadius('16lpx')
  102.       .backgroundColor('#FFFFFF')
  103.  
  104.  
  105.       Button('选好了')
  106.         .fontSize('36lpx')
  107.         .width('80%')
  108.         .height('7%')
  109.         .backgroundColor('#F84747')
  110.         .onClick(() => {
  111.           for (this.index = 0; this.index < this.TotalMenu.length; this.index++) {
  112.             if (this.TotalMenu[this.index].name == this.menuItem.name && this.TotalMenu[this.index].spicy == this.spicy) {
  113.               this.TotalMenu[this.index].quantity = this.TotalMenu[this.index].quantity + 1;
  114.               if (this.userName == 'Sunny') {
  115.                 this.TotalMenu[this.index].userNumber = this.TotalMenu[this.index].userNumber + 1;
  116.               } else if (this.userName == 'Jenny') {
  117.                 this.TotalMenu[this.index].anotherUserNumber = this.TotalMenu[this.index].anotherUserNumber + 1;
  118.               }
  119.               break;
  120.             }
  121.           }
  122.           // 菜名不一样，辣度不一样，都需要重新push到列表里面
  123.           if (this.index == this.TotalMenu.length) {
  124.             this.menuItem.spicy = this.spicy;
  125.             this.menuItem.quantity = 1;
  126.             //根据不用的用户名称，
  127.             if (this.userName == 'Sunny') {
  128.               this.menuItem.userNumber = 1;
  129.             } else if (this.userName == 'Jenny') {
  130.               this.menuItem.anotherUserNumber = 1;
  131.             }
  132.             this.TotalMenu.push(this.menuItem);
  133.           }
  134.           router.push({
  135.             uri: 'pages/index',
  136.             params: { menuItem: this.menuItem, TotalMenu: this.TotalMenu }
  137.           })
  138.         })
  139.         .margin({ top: '10%' })
  140.     }
  141.   }
  142. }
4. 编写订单详情页面

image-20211124093106260

4.1 订单列表

1): 主要用到Flex容器Image和Text组件Button组件；

2): 点击下单，将"submitOk" 加入分布式数据库，监听数据库变化后，弹出自定义对话框；

  1. @Component
  2. struct TotalItem {
  3.   private totalMenu: MenuData
  4.  
  5.   build() {
  6.     Flex({ direction: FlexDirection.Column }) {
  7.       Flex({ direction: FlexDirection.Row, alignContent: FlexAlign.Start, justifyContent: FlexAlign.Start }) {
  8.  
  9.         Image(this.totalMenu.imgSrc)
  10.           .width('210lpx')
  11.           .height('100%')
  12.         Flex({ direction: FlexDirection.Column }) {
  13.           Text(this.totalMenu.name)
  14.             .fontSize('32lpx')
  15.             .flexGrow(1)
  16.           Text(this.totalMenu.spicy)
  17.             .fontSize('22lpx')
  18.             .fontColor('#000000')
  19.             .opacity(0.6)
  20.             .flexGrow(1)
  21.           Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {
  22.             Text('￥')
  23.               .fontSize('22lpx')
  24.             Text(this.totalMenu.price.toString())
  25.               .fontSize('40lpx')
  26.             Text('/份')
  27.               .fontSize('22lpx')
  28.               .flexGrow(1)
  29.             Text(this.totalMenu.quantity.toString())
  30.               .fontColor("#F84747")
  31.               .fontSize('40lpx')
  32.           }
  33.           .flexGrow(2)
  34.         }
  35.         .padding({ left: '5%', top: '6%' })
  36.         .width('70%')
  37.       }
  38.       .height('180lpx')
  39.  
  40.       Button()
  41.         .backgroundColor('#000000')
  42.         .opacity(0.1)
  43.         .height('2lpx')
  44.         .margin({ top: '20lpx' })
  45.         .width('100%')
  46.  
  47.  
  48.       if (this.totalMenu.userNumber > 0) {
  49.         Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {
  50.           Image(this.totalMenu.userImg)
  51.             .width('96lpx')
  52.             .height('96lpx')
  53.           Text(this.totalMenu.userName)
  54.             .fontSize('36lpx')
  55.             .fontWeight(FontWeight.Bold)
  56.             .margin({ left: '12lpx' })
  57.             .flexGrow(1)
  58.           Text(this.totalMenu.userNumber.toString())
  59.             .fontSize('32lpx')
  60.             .margin({ right: '11plx' })
  61.  
  62.         }
  63.         .height('150lpx')
  64.       }
  65.       if (this.totalMenu.anotherUserNumber > 0) {
  66.         Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {
  67.           Image(this.totalMenu.anotherUserImg)
  68.             .width('96lpx')
  69.             .height('96lpx')
  70.           Text(this.totalMenu.anotherUserName)
  71.             .fontSize('36lpx')
  72.             .fontWeight(FontWeight.Bold)
  73.             .margin({ left: '12lpx' })
  74.             .flexGrow(1)
  75.           Text(this.totalMenu.anotherUserNumber.toString())
  76.             .fontSize('32lpx')
  77.             .margin({ right: '11plx' })
  78.  
  79.         }
  80.         .height('150lpx')
  81.       }
  82.     }
  83.     .margin({ top: '12lpx' })
  84.     .borderRadius('16lpx')
  85.     .padding({ left: '3%', right: '3%', top: '2%' })
  86.     .backgroundColor('#FFFFFF')
  87.   }
  88. }
4.2自定义弹框

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

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

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

  1. @CustomDialog
  2. struct SubmitDialog {
  3.   private controller: CustomDialogController
  4.  
  5.   build() {
  6.     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) {
  7.       Flex({ justifyContent: FlexAlign.Center }) {
  8.         Image($r("app.media.icon_success"))
  9.           .width('100lpx')
  10.           .height('80lpx')
  11.       }
  12.       .flexGrow(1)
  13.  
  14.       Text('下单成功')
  15.         .fontSize('36lpx')
  16.         .fontColor('#000000')
  17.         .flexGrow(1)
  18.       Text('*温馨提示：菜品具体售卖情况请以店面实际情况为准哦～')
  19.         .fontSize('22lpx')
  20.         .opacity(0.6)
  21.         .fontColor('#000000')
  22.         .padding({ left: '10lpx', right: '10lpx' })
  23.     }
  24.     .height('300lpx')
  25.     .width('100%')
  26.     .padding({ top: '50lpx', bottom: '20lpx' })
  27.  
  28.   }
  29. }

​ 3）在@entry创建CustomDialogController对象并传入弹窗所需参数，设置点击允许点击遮障层退出，通过open()方法，显示弹窗；

  1.  
  2. SubmitDialog: CustomDialogController = new CustomDialogController({
  3.     builder: SubmitDialog(),
  4.     autoCancel: true
  5.   })
  6. aboutToAppear() {
  7.   
  8.     this.remoteData.createManager(() => {
  9.       let self = this;
  10.       var data;
  11.       if (JSON.stringify(self.remoteData.dataItem).length > 0) {
  12.       	data = self.remoteData.dataItem;
  13.         CommonLog.info("======submit==" + data[0].submit);
  14.         if (data[0].submit == "submitOk") {
  15.           this.SubmitDialog.open()
  16.         }
  17.       }
  18.     }, "com.distributed.order", "submit")
  19.   }
5. 添加分布式流转

分布式流转需要在同一网络下通过 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并携带数据，即可实现分布式流转。

RemoteDeviceManager

6.分布式数据管理

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

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

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

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

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

参数名类型必填说明
keystring是要添加数据的key，不能为空且长度不大于MAX_KEY_LENGTH。
valueUint8Array | string | number | boolean是要添加数据的value，支持Uint8Array、number 、 string 、boolean，Uint8Array、string 的长度不大于MAX_VALUE_LENGTH。
callbackAsyncCallback是回调函数。

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

本项目通过storeId 值不同，创建了两个数据库，分别是MenuListDistributedData类和SubmitData类；

MenuListDistributedData是将完整订单添加到分布式数据库

  1. @Component
  2. struct TotalInfo {
  3.   @Consume TotalMenu: any[];
  4.   private total: number = 0;
  5.   private amount: number = 0;
  6.   private remoteData: MenuListData
  7.  
  8.   aboutToAppear() {
  9.     for (var index = 0; index < this.TotalMenu.length; index++) {
  10.       this.total = this.total + this.TotalMenu[index].price * this.TotalMenu[index].quantity
  11.       this.amount = this.amount + this.TotalMenu[index].quantity
  12.     }
  13.   }
  14.  
  15.   build() {
  16.     Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {
  17.       Stack({ alignContent: Alignment.Center }) {
  18.         Image($r("app.media.icon_cart"))
  19.           .width('96lpx')
  20.           .height('96lpx')
  21.           .margin({ left: '22lpx' })
  22.         Text(this.amount.toString())
  23.           .backgroundColor('#F84747')
  24.           .borderRadius('30plx')
  25.           .fontSize('24plx')
  26.           .textAlign(TextAlign.Center)
  27.           .fontColor('#FFFFFF')
  28.           .width('50lpx')
  29.           .height('50lpx')
  30.           .margin({ left: '100lpx', bottom: '85lpx' })
  31.       }
  32.       .width('150lpx')
  33.       .height('150lpx')
  34.  
  35.       Text('￥')
  36.         .fontSize('22lpx')
  37.         .fontColor('#006A3A')
  38.         .margin({ left: '22lpx' })
  39.       Text(this.total.toString())
  40.         .fontSize('40lpx')
  41.         .fontColor('#006A3A')
  42.         .flexGrow(1)
  43.       Text('点好了')
  44.         .height('100%')
  45.         .width('35%')
  46.         .fontColor('#FFFFFF')
  47.         .backgroundColor('#F84747')
  48.         .textAlign(TextAlign.Center)
  49.     }
  50.     .onClick(() => {
  51.       this.remoteData.putData("menu_list", this.TotalMenu)
  52.     })
  53.     .width('100%')
  54.     .height('10%')
  55.     .backgroundColor('#FFFFFF')
  56.   }
  57. }

SubmitData在订单结算是点击下单，将submitOk 添加到数据库；

  1. @Component
  2. struct SubmitList {
  3.   private remoteData: SubmitData
  4.   private SubmitOK: any[] = [
  5.     {
  6.       submit: "submitOk"
  7.     }
  8.   ];
  9.  
  10.   build() {
  11.     Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
  12.       Text('下单')
  13.         .fontSize('36lpx')
  14.         .fontColor('#FFFFFF')
  15.     }
  16.     .width('100%')
  17.     .height('10%')
  18.     .backgroundColor('#F84747')
  19.     .onClick(() => {
  20.       this.remoteData.putData("submit", this.SubmitOK)
  21.     })
  22.     .margin({ top: '5%' })
  23.   }
  24. }

最后，有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（Harmony NEXT）资料用来跟着学习是非常有必要的。 

为了能够帮助大家快速掌握鸿蒙（Harmony NEXT）应用开发技术知识。在此给大家分享一下我结合鸿蒙最新资料整理出来的鸿蒙南北向开发学习路线以及整理的最新版鸿蒙学习文档资料。

这份鸿蒙（Harmony NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

如果你是一名有经验的资深Android移动开发、Java开发、前端开发、对鸿蒙感兴趣以及转行人员，可以直接领取这份资料

 获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

鸿蒙（Harmony NEXT）最新学习路线

  •  HarmonOS基础技能

  • HarmonOS就业必备技能 
  •  HarmonOS多媒体技术

  • 鸿蒙NaPi组件进阶

  • HarmonOS高级技能

  • 初识HarmonOS内核 
  • 实战就业级设备开发

 有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

《鸿蒙 (OpenHarmony)开发入门教学视频》

《鸿蒙生态应用开发V2.0白皮书》

图片

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

图片

 《鸿蒙开发基础》

  • ArkTS语言
  • 安装DevEco Studio
  • 运用你的第一个ArkTS应用
  • ArkUI声明式UI开发
  • .……

图片

 《鸿蒙开发进阶》

  • Stage模型入门
  • 网络管理
  • 数据管理
  • 电话服务
  • 分布式应用开发
  • 通知与窗口管理
  • 多媒体技术
  • 安全技能
  • 任务管理
  • WebGL
  • 国际化开发
  • 应用测试
  • DFX面向未来设计
  • 鸿蒙系统移植和裁剪定制
  • ……

图片

《鸿蒙进阶实战》

  • ArkTS实践
  • UIAbility应用
  • 网络案例
  • ……

图片

 获取以上完整鸿蒙HarmonyOS学习资料，请点击→纯血版全套鸿蒙HarmonyOS学习资料

总结

总的来说，华为鸿蒙不再兼容安卓，对中年程序员来说是一个挑战，也是一个机会。只有积极应对变化，不断学习和提升自己，他们才能在这个变革的时代中立于不败之地。 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/265981
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号