📌 模块概述

营养分析页面从营养成分角度帮助家庭成员评估某道菜的健康程度。示例代码中使用了静态的营养数据，但在实际项目中，可以将食材与营养数据库关联，根据菜谱中的食材估算总热量、蛋白质、碳水化合物和脂肪等指标。Web 层负责展示和交互，ArkTS 原生层则可以负责缓存营养数据库或调用在线服务获取最新数据。

🔗 营养信息加载流程

1. 用户在营养分析页面从下拉框中选择某道菜谱；
2. Web 层根据选择的菜谱 id 加载对应的营养信息（当前为示例数据）；
3. 页面以卡片形式展示热量、蛋白质、碳水化合物和脂肪等指标；
4. 如接入真实营养数据库，可以在 ArkTS 层缓存或计算营养值，并通过插件将结果回传给 Web 层。

🔧 菜谱选择与营养卡片（HTML 片段）

<div class="card">
  <div class="card-content">
    <div class="form-group">
      <label class="form-label">选择菜谱</label>
      <select id="nutrition-recipe" class="form-control" onchange="loadNutritionInfo()">
        <option value="">选择菜谱</option>
      </select>
    </div>
  </div>
</div>
<div id="nutrition-info"></div>

这段 HTML 展示了营养分析页面的关键控件：菜谱下拉选择框，以及一个用于展示营养信息的容器。下拉框的选项在页面加载时由 Web 层从数据库填充。

🔧 加载营养信息逻辑（JavaScript 片段）

function loadNutritionInfo() {
  const recipeId = document.getElementById('nutrition-recipe').value;
  if (!recipeId) return;

  const html = `
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">营养成分</h3>
      </div>
      <div class="card-content">热量 350 kcal，蛋白质 15g 等</div>
    </div>
  `;

  document.getElementById('nutrition-info').innerHTML = html;
}

示例中使用静态文本展示营养信息，真实项目应根据菜谱内容和营养数据库动态生成。逻辑保持在 Web 层，方便开发与快速迭代。

🔌 在鸿蒙原生层查询营养数据库（ArkTS 片段）

// entry/src/main/ets/plugins/NutritionPlugin.ets
import plugin from '@ohos.plugin';

export interface NutritionSummary {
  calories: number;
  protein: number;
  carbs: number;
  fat: number;
}

@plugin
export default class NutritionPlugin {
  async query(recipeId: number): Promise<NutritionSummary> {
    // 示例：根据菜谱 ID 返回估算营养值
    return { calories: 350, protein: 15, carbs: 45, fat: 12 };
  }
}

ArkTS 的 NutritionPlugin 为 Web 层提供了一个 query 方法，用于根据菜谱 ID 返回估算营养信息。内部可以访问本地预置的营养数据库，或调用在线接口获取更精确的结果。

function loadNutritionInfoNative() {
  const recipeId = parseInt(document.getElementById('nutrition-recipe').value);
  if (!recipeId || !window.cordova) return;

  cordova.exec(
    (info) => {
      const html = `
        <div class="card">
          <div class="card-header"><h3 class="card-title">营养成分</h3></div>
          <div class="card-content">
            热量 ${info.calories} kcal，蛋白质 ${info.protein}g，碳水 ${info.carbs}g，脂肪 ${info.fat}g
          </div>
        </div>`;
      document.getElementById('nutrition-info').innerHTML = html;
    },
    null,
    'NutritionPlugin',
    'query',
    [recipeId]
  );
}

在 Web 层，我们可以在设备支持 Cordova&OpenHarmony 环境时调用 loadNutritionInfoNative，将营养计算工作交给 ArkTS 插件，实现更专业的营养分析体验。

📝 小结

营养分析页面通过可视化营养信息，帮助家庭成员平衡美味与健康。借助 Cordova&OpenHarmony 混合架构，我们可以在 Web 层实现基础的选择与展示逻辑，在 ArkTS 原生层集成更专业的营养数据源和计算能力，实现灵活且可扩展的营养分析模块。

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net