OpenHarmony 分布式开发实战——线上菜单(3)，bilibili HarmonyOS鸿蒙面试

先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

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

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上鸿蒙开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以添加V获取：vip204888 （备注鸿蒙）

正文

• demo效果

工程目录

完整的项目结构目录如下

├─entry
│ └─src
│ └─main
│ │ config.json // 应用配置文件
│ │
│ ├─ets
│ │ └─MainAbility
│ │ │ app.ets // 应用程序主入口
│ │ │
│ │ ├─model
│ │ │ CommonLog.ets // 日志类
│ │ │ MenuData.ets // 初始化菜单数据类
│ │ │ MenuListDistributedData.ets // 加入菜单分布式数据库
│ │ │ RemoteDeviceManager.ets // 分布式拉起设备管理类
│ │ │ SubmitData.ets // 结算订单分布式数据库
│ │ │
│ │ └─pages
│ │ detailedPage.ets // 菜品详细页面
│ │ index.ets // 首页
│ │ menuAccount.ets // 订单详情页面
│ │
│ └─resources
│ ├─base
│ │ ├─element
│ │ │ string.json
│ │ │
│ │ ├─graphic
│ │ ├─layout
│ │ ├─media // 存放媒体资源
│ │ │ icon.png
│ │ │ icon_add.png
│ │ │ icon_back.png
│ │ │ icon_cart.png
│ │ │
│ │ └─profile
│ └─rawfile

开发步骤

1. 新建OpenHarmony ETS项目

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

2. 编写商品展示主页面

2.1用户信息

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

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

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

@Component
struct MemberInfo {
@Consume userImg: Resource
@Consume userName: string

aboutToAppear() {
// 根据设备序列号不同，展示不同的名称和图标
CommonLog.info(‘serial=’ + deviceInfo.serial);
if (deviceInfo.serial == ‘150100384754463452061bba4c3d670b’) {
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.toSt