鸿蒙原生开发实战：打造"食遇"情侣菜谱点餐应用系列文章

第一篇章

项目背景

在日常生活中，情侣之间经常面临"今天吃什么"的难题。作为主厨的一方需要思考菜谱、准备食材，而另一方则期待美味的佳肴。为了解决这个甜蜜的烦恼，我基于鸿蒙原生开发技术，打造了一款名为"食遇"的情侣菜谱点餐应用。

应用简介

"食遇"是一款专为情侣设计的菜谱管理与点餐应用，采用角色分离设计，分为"主厨"和"食客"两种角色：

• 主厨角色：管理菜谱、查看订单、制作美食、记录美食时刻
• 食客角色：浏览菜谱、下单点餐、查看订单状态、欣赏美食相册

应用采用鸿蒙原生开发，使用ArkTS语言和ArkUI框架，充分利用鸿蒙系统的分布式能力和流畅体验。

技术架构

1. 数据持久化

应用使用鸿蒙关系型数据库（RDB）进行数据持久化，设计了以下数据表：

// 数据库初始化staticasyncinit(context:Context):Promise<void>{constconfig:relationalStore.StoreConfig={name:'MenuRecipe.db',securityLevel:relationalStore.SecurityLevel.S1}RdbUtil.rdbStore=awaitrelationalStore.getRdbStore(context,config)awaitRdbUtil.createTables()}

数据表包括：

• couple_config：情侣配置表
• recipe：菜谱基础信息表
• recipe_material：食材表
• recipe_step：制作步骤表
• order_record：订单记录表
• gallery_img：美食相册表

2. 启动页设计

启动页负责应用初始化，包括数据库初始化、配置检查等，并通过进度条展示加载状态：

@Entry@Componentstruct SplashPage{@Stateprogress:number=0privatecontext:common.UIAbilityContext|null=nullasyncinitApp(){// 更新进度：10%this.progress=10awaitthis.sleep(100)// 初始化数据库awaitRdbUtil.init(this.context!)// 更新进度：50%this.progress=50awaitthis.sleep(100)// 检查配置并跳转consthasConfig=awaitthis.checkCoupleConfig()this.progress=100router.replaceUrl({url:'pages/RoleSelectPage'})}}

3. 角色选择页

用户首次使用时选择自己的角色（主厨或食客），不同角色将看到不同的功能界面：

@Entry@Componentstruct RoleSelectPage{@StateselectedRole:string=''build(){Column(){// 标题Text('选择你的角色').fontSize(24).fontWeight(FontWeight.Bold)// 角色卡片Row(){// 主厨卡片this.RoleCard('主厨','🍳','chef')// 食客卡片this.RoleCard('食客','🍽','diner')}// 确认按钮Button('确认选择').onClick(()=>{this.saveRoleAndNavigate()})}}@BuilderRoleCard(title:string,icon:string,role:string){Column(){Text(icon).fontSize(60)Text(title).fontSize(20)}.borderRadius(16).backgroundColor(this.selectedRole===role?'#FFE4E1':'#FFFFFF').onClick(()=>{this.selectedRole=role})}}