【鸿蒙应用开发实战·食光篇】第一篇：项目初始化与数据模型——打造一款美食菜谱App

一、前言

这次我们将开启全新的项目——「食光」美食探索与菜谱收藏App，一个涵盖5大菜系、10道经典美食的菜谱应用。

本系列将延续实战风格，但内容和项目完全不同。我们将重点探索：

• 全新的菜谱数据结构设计
• Tab切换实现食材与步骤分页
• 圆形头像式封面设计
• 难度等级视觉化展示

本文是第一篇，聚焦项目初始化、数据模型设计以及菜谱数据构建。

二、项目创建

2.1 开发环境

• IDE：DevEco Studio
• SDK：API 23（compatibleSdkVersion 23, targetSdkVersion 24）
• 框架：Stage 模型 + ArkTS
• 设备类型：Phone

项目创建过程与前篇相同，选择 Empty Ability → Stage Model → API 23。

2.2 项目结构

MyApplication/
├── AppScope/                    # 应用全局配置
│   ├── app.json5                # bundleName、版本等
│   └── resources/base/element/string.json
├── entry/src/main/ets/
│   ├── entryability/            # Ability 生命周期
│   ├── model/
│   │   └── RecipeData.ets       # 菜谱数据模型 ← 本篇重点
│   └── pages/
│       ├── Index.ets            # 首页
│       ├── RecipeListPage.ets   # 菜谱列表
│       ├── RecipeDetailPage.ets # 菜谱详情
│       ├── FavPage.ets          # 我的收藏
│       └── ProfilePage.ets      # 个人中心

三、菜谱数据模型设计

3.1 与阅读应用的区别

「阅迹」的数据模型是书籍（Book），包含书名、作者、评分等字段。而「食光」的菜谱（Recipe）需要完全不同的数据结构：

字段	阅读App（Book）	美食App（Recipe）
分类	文学/科技/…	川菜/粤菜/日料/…
属性	作者、年份、页数	难度、烹饪时间
详情	简介文本	食材列表、步骤
附加	—	小贴士、难度色

3.2 Recipe 接口定义

export interface Recipe {
  id: number;           // 唯一标识
  name: string;         // 菜名
  cuisine: string;      // 菜系（川菜/粤菜/日料/西餐/甜品）
  rating: number;       // 评分
  difficulty: string;   // 难度（初级/中级/高级）
  cookTime: string;     // 烹饪时长
  ingredients: string[];// 食材清单（数组）
  steps: string[];      // 烹饪步骤（数组）
  description: string;  // 菜品简介
  tips: string;         // 小贴士
  color: string;        // 主题色
}

亮点设计：ingredients 和 steps 使用字符串数组，便于在详情页中循环渲染为清单列表。

3.3 5大菜系10道菜

菜系	菜品	难度	时长	评分
🌶️ 川菜	麻婆豆腐	中级	20min	⭐4.8
🌶️ 川菜	水煮鱼	高级	45min	⭐4.7
🥟 粤菜	白切鸡	中级	40min	⭐4.6
🥟 粤菜	叉烧	中级	60min	⭐4.8
🍣 日料	寿司	高级	50min	⭐4.7
🍣 日料	味增汤	初级	15min	⭐4.4
🍝 西餐	牛排	中级	20min	⭐4.8
🍝 西餐	意大利面	初级	25min	⭐4.5
🍰 甜品	提拉米苏	中级	30min	⭐4.9
🍰 甜品	芒果布丁	初级	15min	⭐4.6

3.4 分类与工具函数

export const ALL_CUISINES: string[] = ['全部', '川菜', '粤菜', '日料', '西餐', '甜品'];

// 按菜系筛选
export function getRecipesByCuisine(cuisine: string): Recipe[] {
  if (cuisine === '全部' || cuisine === '') return RECIPES;
  return RECIPES.filter(r => r.cuisine === cuisine);
}

// 获取推荐（评分≥4.7）
export function getRecommendedRecipes(): Recipe[] {
  return RECIPES.filter(r => r.rating >= 4.7);
}

// 难度等级对应的颜色
export function getDifficultyColor(difficulty: string): string {
  const map: Record<string, string> = {
    '初级': '#27AE60',   // 绿色
    '中级': '#F39C12',   // 橙色
    '高级': '#E74C3C'    // 红色
  };
  return map[difficulty] || '#999';
}

getDifficultyColor 函数是一个巧妙的细节——它将难度等级映射为视觉颜色，初级绿色、中级橙色、高级红色，让用户一眼就能看出菜品的难度。

3.5 ArkTS 严格模式注意事项

与前篇一样，必须注意 ArkTS 的严格模式规则：

// ✅ 接口必须有显式声明
export interface Recipe { /* ... */ }

// ✅ 数组必须标注类型
export const RECIPES: Recipe[] = [ /* ... */ ];

// ✅ 对象字面量赋值给有类型的变量
const map: Record<string, string> = { '初级': '#27AE60' };

四、菜谱数据的详细构建

以麻婆豆腐为例，看看一份完整菜谱的数据结构：

{
  id: 1,
  name: '麻婆豆腐',
  cuisine: '川菜',
  rating: 4.8,
  difficulty: '中级',
  cookTime: '20分钟',
  ingredients: [
    '嫩豆腐 300g',
    '牛肉末 50g',
    '豆瓣酱 1勺',
    '花椒粒 1勺',
    '蒜末 10g',
    '姜末 5g',
    '葱花 适量',
    '水淀粉 适量'
  ],
  steps: [
    '豆腐切成2cm方块，放入加盐的沸水中焯2分钟',
    '热锅凉油，放入牛肉末煸炒至变色',
    '加入豆瓣酱炒出红油，放入花椒粒炒出麻香味',
    '加入适量清水烧开，放入豆腐块中小火煮5分钟',
    '淋入水淀粉勾芡，撒上葱花即可出锅'
  ],
  description: '麻婆豆腐是四川省经典名菜...',
  tips: '豆腐焯水时加盐可以增加韧性...',
  color: '#DC3545'
}

数据结构设计的三个要点：

1. 食材用数组 — 便于在UI中逐项渲染，每项自带用量
2. 步骤用有序数组 — 天然支持序号渲染，符合烹饪流程
3. 颜色区分 — 每道菜独立主题色，视觉上丰富多彩

五、资源文件配置

「食光」采用暖色调主题，与食物主题契合：

颜色方案：

{
  "color": [
    { "name": "start_window_background", "value": "#FFF5EE" },
    { "name": "primary_color",           "value": "#E67E22" },
    { "name": "background_color",        "value": "#FFF5EE" },
    { "name": "text_primary",            "value": "#2D1F14" }
  ]
}

#FFF5EE 是一种米白色（老照片色），搭配橙色主调 #E67E22，营造温馨食欲氛围。

应用名称在 AppScope 中配置：

{ "name": "app_name", "value": "食光" }

六、构建验证

hvigorw --mode module -p module=entry@default assembleHap

首次构建会启动 daemon 并全量编译，约耗时8-12秒。

七、小结

本篇完成了：
✅ 「食光」美食App的项目初始化
✅ 菜谱数据模型 Recipe 接口设计
✅ 10道菜谱详细数据构建
✅ 难度等级颜色映射函数
✅ 5大菜系分类与工具函数

与「阅迹」对比：Reader是书籍阅读，数据简单（单层文本）；「食光」是菜谱收藏，数据复杂（嵌套数组），这将在详情页展示完全不同的UI交互。

下一篇我们将开发首页与菜系导航，实现菜系分类入口、今日推荐卡片以及人气榜单，敬请期待！

---

#鸿蒙开发 #ArkTS #数据建模 #HarmonyOS #移动开发