HarmonyOS开发实例：【菜单app】

 简介

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

• demo效果
  
  
  
  
  

工程目录

完整的项目结构目录如下

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

复制代码

鸿蒙开发文档qr23.cn/AKFP8k参考(点击或者复制前往）。
开发步调

1. 新建OpenHarmony ETS项目

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

2. 编写商品展示主页面

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.   }
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' })
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)
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)
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 = '招牌菜'
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')
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%')
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
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.   }
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')
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. 编写菜单具体页面

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
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.           }
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' })
64.         Button()
65.           .backgroundColor('#000000')
66.           .opacity(0.1)
67.           .height('2lpx')
68.           .margin({ left: '24lpx' })
69.           .width('92%')
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' })
81.         Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceEvenly }) {
82.           ForEach(this.spicyList, item => {
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')
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')
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. 编写订单详情页面

4.1 订单列表

1): 主要用到[Flex]容器[Image]和[Text]组件[Button]组件；
2): 点击下单，将"submitOk" 加入分布式数据库，监听数据库变化后，弹出自定义对话框；

1. @Component
2. struct TotalItem {
3.   private totalMenu: MenuData
5.   build() {
6.     Flex({ direction: FlexDirection.Column }) {
7.       Flex({ direction: FlexDirection.Row, alignContent: FlexAlign.Start, justifyContent: FlexAlign.Start }) {
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')
40.       Button()
41.         .backgroundColor('#000000')
42.         .opacity(0.1)
43.         .height('2lpx')
44.         .margin({ top: '20lpx' })
45.         .width('100%')
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' })
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' })
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
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)
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' })
28.   }
29. }

复制代码

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

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

复制代码

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并携带数据，即可实现分布式流转。

6.分布式数据管理

[分布式数据管理]要求两个或多个装备在同一网络,才能监听到数据库的改变，从而渲染页面；开发步调：
1）创建一个KVManager对象实例，用于管理数据库对象；
2）通过指定Options和storeId，创建并获取KVStore数据库，如下是参数说明；需要先通过createKVManager构建一个KVManager实例；
参数名范例必填说明storeIdstring是数据库唯一标识符，长度不大于[MAX_STORE_ID_LENGTH]。options[Options]是创建KVStore实例的配置信息。 3）KVStore数据库实例， KVStore.put提供增长数据的方法，如下是参数说明；
参数名范例必填说明keystring是要添加数据的key，不能为空且长度不大于[MAX_KEY_LENGTH]。valueUint8Arraystringnumberboolean是要添加数据的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
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.   }
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')
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.   ];
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）资料非常有须要。 这里我推荐，根据鸿蒙开发官网梳理与华为内部职员的分享总结出的开发文档。内容包罗了：【ArkTS、ArkUI、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战】等技术知识点。
废话就不多说了，接下来好悦目下这份资料。
如果你是一名Android、Java、前端等等开发职员，想要转入鸿蒙方向发展。可以直接领取这份资料辅助你的学习。鸿蒙OpenHarmony知识←前往。下面是鸿蒙开发的学习路线图。

针对鸿蒙发展路线打造的鸿蒙学习文档。鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，帮助大家在技术的门路上更进一步。
其中内容包罗：

《鸿蒙开发基础》鸿蒙OpenHarmony知识←前往

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

《鸿蒙开发进阶》鸿蒙OpenHarmony知识←前往

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

《鸿蒙开发实战》鸿蒙OpenHarmony知识←前往

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

末了

鸿蒙是完全具备无与伦比的时机和潜力的；预计到年底将有 5,000 款的应用完成原生鸿蒙开发，这么多的应用需要开发，也就意味着需要有更多的鸿蒙人才。鸿蒙开发工程师也将会迎来爆发式的增长，学习鸿蒙势在必行！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。