OpenHarmony 分布式开发实战——线上菜单，从消息中间件看分布式系统的多种套路

本文链接：https://blog.csdn.net/m0_60147147/article/details/137576033

this.userImg = $r(“app.media.icon_user”)
this.userName = ‘Sunny’
}
else {
this.userImg = $r(“app.media.icon_user_another”)
this.userName = ‘Jenny’
}
}

build() {
Flex({ direction: FlexDirection.Column }) {
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {
Image(this.userImg)
.width(‘96lpx’)
.height(‘96lpx’)
.margin({ right: ‘18lpx’ })
Text(this.userName)
.fontSize(‘36lpx’)
.fontWeight(FontWeight.Bold)
.flexGrow(1)
Image($r(“app.media.icon_share”))
.width(‘64lpx’)
.height(‘64lpx’)
}
// 打开分布式设备列表
.onClick(() => {
this.DeviceDialog.open()
})
.layoutWeight(1)
.padding({ left: ‘48lpx’, right: ‘48lpx’ })

Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {
Column() {
Text(‘124’)
.fontSize(‘40lpx’)
.margin({ bottom: ‘24lpx’ })
Text(‘积分’)
.fontSize(‘22lpx’)
.opacity(0.4)
}
.flexGrow(1)

Column() {
Text(‘0’)
.fontSize(‘40lpx’)
.margin({ bottom: ‘24lpx’ })
Text(‘优惠劵’)
.fontSize(‘22lpx’)
.opacity(0.4)
}
.flexGrow(1)

Column() {
Image($r(“app.media.icon_member”))
.width(‘48lpx’)
.height(‘48lpx’)
.margin({ bottom: ‘24lpx’ })
Text(‘会员码’)
.fontSize(‘22lpx’)
.fontColor(‘#000000’)
.opacity(0.4)
}
.flexGrow(1)
}
.layoutWeight(1)
}
.width(‘93%’)
.height(‘25%’)
.borderRadius(‘16lpx’)
.backgroundColor(‘#FFFFFF’)
.margin({ top: ‘24lpx’, bottom: ‘32lpx’ })
}
}

2.2列表展示

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

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

@Component
struct MenuHome {
private specialty: any[]
private winterNew: any[]
private classic: any[]
private soup: any[]
private menuItems: MenuData[]
private titleList = [‘招牌菜’, ‘冬季新品’, ‘下饭菜’, ‘汤品’]
@State name: string = ‘招牌菜’

build() {
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Start }) {
Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.SpaceAround }) {
ForEach(this.titleList, item => {
Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.Start }) {
Text(item)
.fontSize(‘24lpx’)
}
.padding({ left: ‘24lpx’ })
.backgroundColor(this.name == item ? ‘#1A006A3A’ : ‘#FFFFFF’)
.height(‘160lpx’)
.onClick(() => {
this.name = item
if (this.name == ‘招牌菜’) {
this.menuItems = initializeOnStartup(this.specialty);
}
else if (this.name == ‘冬季新品’) {
this.menuItems = initializeOnStartup(this.winterNew);
}
else if (this.name == ‘下饭菜’) {
this.menuItems = initializeOnStartup(this.classic);
}
else if (this.name == ‘汤品’) {
this.menuItems = initializeOnStartup(this.soup);
}
})
}, item => item)
}
.width(‘20%’)
.backgroundColor(‘#FFFFFF’)

Flex({ direction: FlexDirection.Column }) {
Text(this.name)
.fontSize(‘32lpx’)
.fontWeight(FontWeight.Bold)
.opacity(0.4)
.height(‘8%’)
Scroll() {
Column() {
List() {
ForEach(this.menuItems, item => {
ListItem() {
MenuListItem({ menuItem: item })
}
}, item => item.id.toString())
}
}
}
.height(‘92%’)
}
.margin({ left: ‘10lpx’ })
.width(‘75%’)

}
.height(‘50%’)
}
}

2.3底部总额

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

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

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

@Component
struct TotalInfo {
@Consume TotalMenu: any[];
private total: number = 0;
private amount: number = 0;
private remoteData: MenuListData

aboutToAppear() {
for (var index = 0; index < this.TotalMenu.length; index++) {
this.total = this.total + this.TotalMenu[index].price * this.TotalMenu[index].quantity
this.amount = this.amount + this.TotalMenu[index].quantity
}
}

build() {
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {
Stack({ alignContent: Alignment.Center }) {
Image($r(“app.media.icon_cart”))
.width(‘96lpx’)
.height(‘96lpx’)
.margin({ left: ‘22lpx’ })
Text(this.amount.toString())
.backgroundColor(‘#F84747’)
.borderRadius(‘30plx’)
.fontSize(‘24plx’)
.textAlign(TextAlign.Center)
.fontColor(‘#FFFFFF’)
.width(‘50lpx’)
.height(‘50lpx’)
.margin({ left: ‘100lpx’, bottom: ‘85lpx’ })
}
.width(‘150lpx’)
.height(‘150lpx’)

Text(‘￥’)
.fontSize(‘22lpx’)
.fontColor(‘#006A3A’)
.margin({ left: ‘22lpx’ })
Text(this.total.toString())
.fontSize(‘40lpx’)
.fontColor(‘#006A3A’)
.flexGrow(1)
Text(‘点好了’)
.height(‘100%’)
.width(‘35%’)
.fontColor(‘#FFFFFF’)
.backgroundColor(‘#F84747’)
.textAlign(TextAlign.Center)
}
// 将总的订单数据，加入分布式数据库
.onClick(() => {
this.remoteData.putData(“menu_list”, this.TotalMenu)
})
.width(‘100%’)
.height(‘10%’)
.backgroundColor(‘#FFFFFF’)
}
}

3. 编写菜单详细页面

3.1 菜单详情

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

2): 辣度可以选择；

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

@Component
struct detailInfo {
private menuItem
private spicyList = [‘正常辣’, ‘加辣’, ‘少辣’]
@State spicy: string = ‘正常辣’
private TotalMenu: any[]
private index = 0
private userName: string

build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.Start }) {
Flex({ direction: FlexDirection.Row }) {
Flex() {
Image(this.menuItem.imgSrc)
.objectFit(ImageFit.Contain)
}

Flex({ direction: FlexDirection.Column }) {
Text(this.menuItem.name)
.fontSize(‘32lpx’)
.flexGrow(1)
Text(this.menuItem.remarks)
.fontSize(‘22lpx’)
.fontColor(‘#000000’)
.opacity(0.6)
.flexGrow(1)
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {
Text(‘￥’)
.fontSize(‘22lpx’)
Text(this.menuItem.price.toString())
.fontSize(‘40lpx’)
Text(‘/份’)
.fontSize(‘22lpx’)
.flexGrow(1)
Image( $r("app.media.icon_reduce")) .width('44lpx') .height('44lpx') .onClick(() => { prompt.showToast({ message: "Reduce function to be completed", duration: 5000 }) }) Text(this.menuItem.quantity.toString()) .margin({ left: '15lpx', right: '15lpx' }) Image($ r(“app.media.icon_add”))
.width(‘44lpx’)
.height(‘44lpx’)
.margin({ right: ‘15lpx’ })
.onClick(() => {
prompt.showToast({
message: “Increase function to be completed”,
duration: 5000
})
})
}
.flexGrow(2)
}
}
.height(‘40%’)
.margin({ top: ‘40lpx’, bottom: ‘24lpx’ })

Button()
.backgroundColor(‘#000000’)
.opacity(0.1)
.height(‘2lpx’)
.margin({ left: ‘24lpx’ })
.width(‘92%’)

Flex({ direction: FlexDirection.Row }) {
Button()
.backgroundColor('#006A3A ')
.width(‘8lpx’)
.height(‘48lpx’)
.margin({ right: ‘12lpx’ })
Text(‘辣度’)
}
.margin({ left: ‘44lpx’, top: ‘48lpx’, bottom: ‘32lpx’ })

Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceEvenly }) {
ForEach(this.spicyList, item => {

Button(item)
.fontSize(‘28lpx’)
.height(‘60lpx’)
.width(‘156lpx’)
.borderRadius(‘12lpx’)
.backgroundColor(this.spicy == item ? ‘#006A3A’ : ‘#0D000000’)
.fontColor(this.spicy == item ? ‘#FFFFFF’ : ‘#000000’)

.onClick(() => {
this.spicy = item
})
}, item => item)
}
}
.margin({ top: ‘56lpx’ })
.width(‘92%’)
.height(‘50%’)
.borderRadius(‘16lpx’)
.backgroundColor(‘#FFFFFF’)

Button(‘选好了’)
.fontSize(‘36lpx’)
.width(‘80%’)
.height(‘7%’)
.backgroundColor(‘#F84747’)
.onClick(() => {
for (this.index = 0; this.index < this.TotalMenu.length; this.index++) {
if (this.TotalMenu[this.index].name == this.menuItem.name && this.TotalMenu[this.index].spicy == this.spicy) {
this.TotalMenu[this.index].quantity = this.TotalMenu[this.index].quantity + 1;
if (this.userName == ‘Sunny’) {
this.TotalMenu[this.index].userNumber = this.TotalMenu[this.index].userNumber + 1;
} else if (this.userName == ‘Jenny’) {
this.TotalMenu[this.index].anotherUserNumber = this.TotalMenu[this.index].anotherUserNumber + 1;
}
break;
}
}
// 菜名不一样，辣度不一样，都需要重新push到列表里面
if (this.index == this.TotalMenu.length) {
this.menuItem.spicy = this.spicy;
this.menuItem.quantity = 1;
//根据不用的用户名称，
if (this.userName == ‘Sunny’) {
this.menuItem.userNumber = 1;
} else if (this.userName == ‘Jenny’) {
this.menuItem.anotherUserNumber = 1;
}
this.TotalMenu.push(this.menuItem);
}
router.push({
uri: ‘pages/index’,
params: { menuItem: this.menuItem, TotalMenu: this.TotalMenu }
})
})
.margin({ top: ‘10%’ })
}
}
}

4. 编写订单详情页面

4.1 订单列表

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

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

@Component
struct TotalItem {
private totalMenu: MenuData

build() {
Flex({ direction: FlexDirection.Column }) {
Flex({ direction: FlexDirection.Row, alignContent: FlexAlign.Start, justifyContent: FlexAlign.Start }) {

Image(this.totalMenu.imgSrc)
.width(‘210lpx’)
.height(‘100%’)
Flex({ direction: FlexDirection.Column }) {
Text(this.totalMenu.name)
.fontSize(‘32lpx’)
.flexGrow(1)
Text(this.totalMenu.spicy)
.fontSize(‘22lpx’)
.fontColor(‘#000000’)
.opacity(0.6)
.flexGrow(1)
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {
Text(‘￥’)
.fontSize(‘22lpx’)
Text(this.totalMenu.price.toString())
.fontSize(‘40lpx’)
Text(‘/份’)
.fontSize(‘22lpx’)
.flexGrow(1)
Text(this.totalMenu.quantity.toString())
.fontColor(“#F84747”)
.fontSize(‘40lpx’)
}
.flexGrow(2)
}
.padding({ left: ‘5%’, top: ‘6%’ })
.width(‘70%’)
}
.height(‘180lpx’)

Button()
.backgroundColor(‘#000000’)
.opacity(0.1)
.height(‘2lpx’)
.margin({ top: ‘20lpx’ })
.width(‘100%’)

if (this.totalMenu.userNumber > 0) {
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {
Image(this.totalMenu.userImg)
.width(‘96lpx’)
.height(‘96lpx’)
Text(this.totalMenu.userName)
.fontSize(‘36lpx’)
.fontWeight(FontWeight.Bold)
.margin({ left: ‘12lpx’ })
.flexGrow(1)
Text(this.totalMenu.userNumber.toString())
.fontSize(‘32lpx’)
.margin({ right: ‘11plx’ })

}
.height(‘150lpx’)
}

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数HarmonyOS鸿蒙开发工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年HarmonyOS鸿蒙开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。