目录

1. 概述
2. 功能设计
3. Kotlin 实现代码（KMP）
4. JavaScript 调用示例
5. ArkTS 页面集成与调用
6. 数据输入与交互体验
7. 编译与自动复制流程
8. 总结

---

概述

本案例在 Kotlin Multiplatform (KMP) 工程中实现了一个 营养工具 - 营养成分分析工具：

• 输入：用户的食物数据（食物名称、食物重量），使用空格分隔，例如：chicken 100。
• 输出：
  • 营养成分分析：蛋白质、碳水化合物、脂肪、热量等营养信息
  • 营养价值评估：营养密度、营养均衡度、健康评分
  • 饮食建议：根据营养成分给出的饮食建议
  • 每日摄入占比：相对于每日推荐摄入量的占比
  • 详细分析：营养成分的医学解释和健康指导
• 技术路径：Kotlin → Kotlin/JS → JavaScript 模块 → ArkTS 页面调用。

这个案例展示了 KMP 跨端开发在营养健康管理领域的应用：

把营养分析逻辑写在 Kotlin 里，一次实现，多端复用；把营养界面写在 ArkTS 里，专注 UI 和体验。

Kotlin 侧负责解析食物数据、计算营养成分、评估营养价值和生成个性化建议；ArkTS 侧只需要把输入字符串传给 Kotlin 函数，并把返回结果原样展示出来即可。借助 KMP 的 Kotlin/JS 能力，这个营养成分分析工具可以在 Node.js、Web 前端以及 OpenHarmony 中复用相同的代码逻辑。

---

功能设计

输入数据格式

营养成分分析工具采用简单直观的输入格式：

• 使用 空格分隔 食物名称和重量。
• 第一个参数是食物名称（英文名称，如 chicken、rice、apple 等）。
• 第二个参数是食物重量（整数或浮点数，单位：克）。
• 输入示例：

chicken 100

这可以理解为：

• 食物名称：鸡肉
• 食物重量：100 克

工具会基于这些数据计算出：

• 蛋白质、碳水化合物、脂肪的含量和热量
• 营养密度：营养价值与热量的比值
• 营养均衡度：营养成分的均衡程度
• 健康评分：0-100 的综合营养评分
• 每日摄入占比：相对于每日推荐摄入量的占比
• 个性化建议：针对该食物的饮食建议

输出信息结构

为了便于在 ArkTS 页面以及终端中直接展示，Kotlin 函数返回的是一段结构化的多行文本，划分为几个分区：

1. 标题区：例如"🥗 营养成分分析与饮食指导"，一眼看出工具用途。
2. 食物信息：食物名称、重量、食物分类等基本信息。
3. 营养成分：蛋白质、碳水化合物、脂肪、热量等营养信息。
4. 营养评估：营养密度、营养均衡度、健康评分。
5. 每日占比：相对于每日推荐摄入量的占比。
6. 饮食建议：针对该食物的具体建议。
7. 参考标准：营养分类标准、健康指导。

这样的输出结构使得：

• 在 ArkTS 中可以直接把整段文本绑定到 Text 组件，配合 monospace 字体，阅读体验类似终端报告。
• 如果将来想把结果保存到日志或者后端，直接保存字符串即可。
• 需要更精细的 UI 时，也可以在前端根据分隔符进行拆分，再按块展示。

---

Kotlin 实现代码（KMP）

核心代码在 src/jsMain/kotlin/App.kt 中，通过 @JsExport 导出。以下是完整的 Kotlin 实现：

@OptIn(ExperimentalJsExport::class)
@JsExport
fun nutritionAnalyzer(inputData: String = "chicken 100"): String {
    // 输入格式: 食物名称 重量(克)
    val parts = inputData.trim().split(" ").filter { it.isNotEmpty() }

    if (parts.size < 2) {
        return "❌ 错误: 请输入完整的信息，格式: 食物名称 重量(克)\n例如: chicken 100"
    }

    val foodName = parts[0].lowercase()
    val weight = parts[1].toDoubleOrNull() ?: return "❌ 错误: 重量必须是数字"

    if (weight <= 0 || weight > 10000) {
        return "❌ 错误: 重量必须在 1-10000 克之间"
    }

    // 食物营养数据库（每100克的营养成分）
    val foodDatabase = mapOf(
        "chicken" to mapOf("protein" to 26.0, "carbs" to 0.0, "fat" to 1.4, "calories" to 165, "category" to "肉类"),
        "beef" to mapOf("protein" to 26.0, "carbs" to 0.0, "fat" to 15.0, "calories" to 250, "category" to "肉类"),
        "fish" to mapOf("protein" to 20.0, "carbs" to 0.0, "fat" to 1.0, "calories" to 100, "category" to "肉类"),
        "rice" to mapOf("protein" to 2.7, "carbs" to 28.0, "fat" to 0.3, "calories" to 130, "category" to "谷物"),
        "bread" to mapOf("protein" to 9.0, "carbs" to 49.0, "fat" to 1.0, "calories" to 265, "category" to "谷物"),
        "apple" to mapOf("protein" to 0.3, "carbs" to 14.0, "fat" to 0.2, "calories" to 52, "category" to "水果"),
        "banana" to mapOf("protein" to 1.1, "carbs" to 27.0, "fat" to 0.3, "calories" to 89, "category" to "水果"),
        "broccoli" to mapOf("protein" to 2.8, "carbs" to 7.0, "fat" to 0.4, "calories" to 34, "category" to "蔬菜"),
        "carrot" to mapOf("protein" to 0.9, "carbs" to 10.0, "fat" to 0.2, "calories" to 41, "category" to "蔬菜"),
        "milk" to mapOf("protein" to 3.2, "carbs" to 4.8, "fat" to 3.6, "calories" to 61, "category" to "乳制品"),
        "egg" to mapOf("protein" to 13.0, "carbs" to 1.1, "fat" to 11.0, "calories" to 155, "category" to "蛋类"),
        "nuts" to mapOf("protein" to 20.0, "carbs" to 27.0, "fat" to 50.0, "calories" to 607, "category" to "坚果"),
        "olive_oil" to mapOf("protein" to 0.0, "carbs" to 0.0, "fat" to 100.0, "calories" to 884, "category" to "油脂"),
        "yogurt" to mapOf("protein" to 3.5, "carbs" to 4.7, "fat" to 0.4, "calories" to 59, "category" to "乳制品"),
        "salmon" to mapOf("protein" to 25.0, "carbs" to 0.0, "fat" to 13.0, "calories" to 208, "category" to "肉类")
    )

    val foodData = foodDatabase[foodName] ?: return "❌ 错误: 不支持的食物类型。支持的食物: ${foodDatabase.keys.joinToString(", ")}"

    // 计算营养成分（按实际重量）
    val protein = (foodData["protein"] as Double * weight / 100).toInt()
    val carbs = (foodData["carbs"] as Double * weight / 100).toInt()
    val fat = (foodData["fat"] as Double * weight / 100).toInt()
    val calories = (foodData["calories"] as Double * weight / 100).toInt()
    val category = foodData["category"] as String

    // 计算营养密度（营养价值/热量）
    val nutritionDensity = (protein + carbs) / (calories.toDouble() + 1)

    // 计算营养均衡度（蛋白质、碳水、脂肪的均衡程度）
    val totalNutrients = protein + carbs + fat
    val proteinRatio = if (totalNutrients > 0) (protein * 100) / totalNutrients else 0
    val carbsRatio = if (totalNutrients > 0) (carbs * 100) / totalNutrients else 0
    val fatRatio = if (totalNutrients > 0) (fat * 100) / totalNutrients else 0

    val balanceScore = when {
        proteinRatio in 20..35 && carbsRatio in 45..65 && fatRatio in 20..35 -> 90
        proteinRatio in 15..40 && carbsRatio in 40..70 && fatRatio in 15..40 -> 75
        else -> 60
    }

    // 计算健康评分
    val healthScore = when {
        calories < 50 -> 95
        calories < 150 -> 85
        calories < 300 -> 75
        calories < 500 -> 65
        else -> 50
    }

    // 每日摄入占比（基于2000卡路里的每日需求）
    val caloriePercentage = (calories * 100) / 2000
    val proteinPercentage = (protein * 100) / 50  // 每日推荐50克
    val carbsPercentage = (carbs * 100) / 300     // 每日推荐300克
    val fatPercentage = (fat * 100) / 70          // 每日推荐70克

    // 生成建议
    val suggestions = when {
        category == "肉类" && protein > 20 -> "🥩 优质蛋白质来源。建议与蔬菜和谷物搭配，形成均衡饮食。"
        category == "蔬菜" && calories < 50 -> "🥦 低热量、高纤维。建议多食用，可以帮助控制体重。"
        category == "水果" && carbs > 20 -> "🍎 含糖量较高。建议适量食用，特别是对于控制血糖的人群。"
        category == "谷物" && carbs > 20 -> "🌾 碳水化合物丰富。建议与蛋白质搭配，提供持久的能量。"
        category == "坚果" && fat > 40 -> "🥜 脂肪含量高。虽然是健康脂肪，但建议适量食用。"
        else -> "✨ 这是一种营养丰富的食物。建议根据个人饮食需求适量食用。"
    }

    // 搭配建议
    val pairingAdvice = when (category) {
        "肉类" -> "建议与蔬菜（如西兰花、胡萝卜）和谷物（如米饭、面包）搭配"
        "蔬菜" -> "建议与蛋白质（如鸡肉、鱼、鸡蛋）搭配，增加营养完整性"
        "水果" -> "建议在餐间食用，或与酸奶搭配增加蛋白质"
        "谷物" -> "建议与蛋白质和蔬菜搭配，形成完整的一餐"
        "坚果" -> "建议作为零食适量食用，或加入沙拉中"
        "乳制品" -> "建议与谷物或水果搭配，作为早餐或零食"
        else -> "建议根据营养需求合理搭配其他食物"
    }

    // 构建输出文本
    val result = StringBuilder()
    result.append("🥗 营养成分分析与饮食指导\n")
    result.append("═".repeat(60)).append("\n\n")
    
    result.append("🍽️ 食物信息\n")
    result.append("─".repeat(60)).append("\n")
    result.append("食物名称: ${foodName}\n")
    result.append("食物重量: ${String.format("%.1f", weight)} 克\n")
    result.append("食物分类: ${category}\n\n")

    result.append("📊 营养成分\n")
    result.append("─".repeat(60)).append("\n")
    result.append("蛋白质: ${protein} 克 (${proteinPercentage}% 每日推荐)\n")
    result.append("碳水化合物: ${carbs} 克 (${carbsPercentage}% 每日推荐)\n")
    result.append("脂肪: ${fat} 克 (${fatPercentage}% 每日推荐)\n")
    result.append("热量: ${calories} 卡 (${caloriePercentage}% 每日推荐)\n\n")

    result.append("⭐ 营养评估\n")
    result.append("─".repeat(60)).append("\n")
    result.append("营养密度: ${String.format("%.2f", nutritionDensity)}\n")
    result.append("营养均衡度: ${balanceScore}/100\n")
    result.append("健康评分: ${healthScore}/100\n")
    result.append("蛋白质占比: ${proteinRatio}%\n")
    result.append("碳水占比: ${carbsRatio}%\n")
    result.append("脂肪占比: ${fatRatio}%\n\n")

    result.append("💡 个性化建议\n")
    result.append("─".repeat(60)).append("\n")
    result.append("${suggestions}\n\n")

    result.append("🔗 搭配建议\n")
    result.append("─".repeat(60)).append("\n")
    result.append("${pairingAdvice}\n\n")

    result.append("📈 食物分类说明\n")
    result.append("─".repeat(60)).append("\n")
    result.append("• 肉类: 高蛋白，适合肌肉建设和修复\n")
    result.append("• 蔬菜: 低热量，富含纤维和维生素\n")
    result.append("• 水果: 含糖量较高，富含维生素和矿物质\n")
    result.append("• 谷物: 碳水化合物丰富，提供能量\n")
    result.append("• 坚果: 健康脂肪，营养密度高\n")
    result.append("• 乳制品: 钙质丰富，蛋白质含量中等\n\n")

    result.append("🎯 每日饮食指南\n")
    result.append("─".repeat(60)).append("\n")
    result.append("1. 每日摄入 2000 卡路里（可根据个人需求调整）\n")
    result.append("2. 蛋白质: 每日 50-60 克（占总热量 10-15%）\n")
    result.append("3. 碳水化合物: 每日 250-300 克（占总热量 50-60%）\n")
    result.append("4. 脂肪: 每日 65-75 克（占总热量 25-35%）\n")
    result.append("5. 纤维素: 每日 25-30 克\n")
    result.append("6. 多喝水，每日 8-10 杯\n")
    result.append("7. 选择多样化的食物，确保营养完整\n")
    result.append("8. 避免过度加工的食品\n")
    result.append("9. 定期评估饮食，根据需要调整\n")
    result.append("10. 如有特殊饮食需求，咨询营养师\n")

    return result.toString()
}

代码说明

这段 Kotlin 代码实现了完整的营养成分分析和饮食指导功能。让我详细解释关键部分：

数据验证：首先验证输入的食物名称和重量是否有效，确保数据在合理范围内。同时检查食物是否在数据库中。

食物数据库：包含了常见食物的营养成分数据（每100克），包括蛋白质、碳水化合物、脂肪、热量和食物分类。

营养计算：根据实际重量计算各营养成分的含量。使用公式：实际含量 = 每100克含量 × 实际重量 / 100。

营养密度计算：营养密度 = (蛋白质 + 碳水化合物) / 热量，反映食物的营养价值与热量的比值。

营养均衡度评估：根据蛋白质、碳水化合物、脂肪的比例评估营养均衡程度。理想比例为蛋白质 20-35%、碳水 45-65%、脂肪 20-35%。

每日摄入占比：计算该食物相对于每日推荐摄入量的占比，帮助用户了解该食物在日常饮食中的比重。

个性化建议：根据食物分类和营养成分生成相应的建议，包括搭配建议和饮食指导。

---

JavaScript 调用示例

编译后的 JavaScript 代码可以在 Node.js 或浏览器中直接调用。以下是 JavaScript 的使用示例：

// 导入编译后的 Kotlin/JS 模块
const { nutritionAnalyzer } = require('./hellokjs.js');

// 示例 1：鸡肉
const result1 = nutritionAnalyzer("chicken 100");
console.log("示例 1 - 鸡肉:");
console.log(result1);
console.log("\n");

// 示例 2：米饭
const result2 = nutritionAnalyzer("rice 150");
console.log("示例 2 - 米饭:");
console.log(result2);
console.log("\n");

// 示例 3：苹果
const result3 = nutritionAnalyzer("apple 200");
console.log("示例 3 - 苹果:");
console.log(result3);
console.log("\n");

// 示例 4：西兰花
const result4 = nutritionAnalyzer("broccoli 150");
console.log("示例 4 - 西兰花:");
console.log(result4);
console.log("\n");

// 示例 5：坚果
const result5 = nutritionAnalyzer("nuts 30");
console.log("示例 5 - 坚果:");
console.log(result5);
console.log("\n");

// 示例 6：使用默认参数
const result6 = nutritionAnalyzer();
console.log("示例 6 - 使用默认参数:");
console.log(result6);

// 实际应用场景：从用户输入获取数据
function analyzeUserNutrition(userInput) {
    try {
        const result = nutritionAnalyzer(userInput);
        return {
            success: true,
            data: result
        };
    } catch (error) {
        return {
            success: false,
            error: error.message
        };
    }
}

// 测试实际应用
const userInput = "salmon 150";
const analysis = analyzeUserNutrition(userInput);
if (analysis.success) {
    console.log("用户营养分析结果:");
    console.log(analysis.data);
} else {
    console.log("分析失败:", analysis.error);
}

// 每日饮食追踪应用示例
function trackDailyNutrition(meals) {
    console.log("\n每日饮食追踪:");
    console.log("═".repeat(60));
    
    const results = meals.map((meal, index) => {
        const analysis = nutritionAnalyzer(meal);
        return {
            mealNumber: index + 1,
            meal,
            analysis
        };
    });

    results.forEach(result => {
        console.log(`\n第 ${result.mealNumber} 餐 (${result.meal}):`);
        console.log(result.analysis);
    });

    return results;
}

// 测试每日饮食追踪
const meals = [
    "egg 100",
    "rice 200",
    "chicken 150",
    "broccoli 100",
    "apple 150"
];

trackDailyNutrition(meals);

// 营养统计分析
function analyzeNutritionStats(meals) {
    const analyses = meals.map(meal => {
        const parts = meal.split(' ');
        const food = parts[0];
        const weight = parseFloat(parts[1]);
        
        const foodDatabase = {
            "chicken": {protein: 26, carbs: 0, fat: 1.4, calories: 165},
            "beef": {protein: 26, carbs: 0, fat: 15, calories: 250},
            "fish": {protein: 20, carbs: 0, fat: 1, calories: 100},
            "rice": {protein: 2.7, carbs: 28, fat: 0.3, calories: 130},
            "bread": {protein: 9, carbs: 49, fat: 1, calories: 265},
            "apple": {protein: 0.3, carbs: 14, fat: 0.2, calories: 52},
            "banana": {protein: 1.1, carbs: 27, fat: 0.3, calories: 89},
            "broccoli": {protein: 2.8, carbs: 7, fat: 0.4, calories: 34},
            "carrot": {protein: 0.9, carbs: 10, fat: 0.2, calories: 41},
            "milk": {protein: 3.2, carbs: 4.8, fat: 3.6, calories: 61},
            "egg": {protein: 13, carbs: 1.1, fat: 11, calories: 155},
            "nuts": {protein: 20, carbs: 27, fat: 50, calories: 607},
            "olive_oil": {protein: 0, carbs: 0, fat: 100, calories: 884},
            "yogurt": {protein: 3.5, carbs: 4.7, fat: 0.4, calories: 59},
            "salmon": {protein: 25, carbs: 0, fat: 13, calories: 208}
        };
        
        const data = foodDatabase[food];
        return {
            protein: data.protein * weight / 100,
            carbs: data.carbs * weight / 100,
            fat: data.fat * weight / 100,
            calories: data.calories * weight / 100
        };
    });

    const totalProtein = analyses.reduce((sum, a) => sum + a.protein, 0);
    const totalCarbs = analyses.reduce((sum, a) => sum + a.carbs, 0);
    const totalFat = analyses.reduce((sum, a) => sum + a.fat, 0);
    const totalCalories = analyses.reduce((sum, a) => sum + a.calories, 0);

    console.log("\n每日营养统计:");
    console.log(`总蛋白质: ${totalProtein.toFixed(1)} 克`);
    console.log(`总碳水化合物: ${totalCarbs.toFixed(1)} 克`);
    console.log(`总脂肪: ${totalFat.toFixed(1)} 克`);
    console.log(`总热量: ${totalCalories.toFixed(0)} 卡`);
}

analyzeNutritionStats(meals);

JavaScript 代码说明

这段 JavaScript 代码展示了如何在 Node.js 环境中调用编译后的 Kotlin 函数。关键点包括：

模块导入：使用 require 导入编译后的 JavaScript 模块，获取导出的 nutritionAnalyzer 函数。

多个示例：展示了不同食物（鸡肉、米饭、苹果、西兰花、坚果）的调用方式。

错误处理：在实际应用中，使用 try-catch 块来处理可能的错误，确保程序的稳定性。

每日饮食追踪：trackDailyNutrition 函数展示了如何处理多餐的营养分析，这在实际的饮食管理应用中很常见。

营养统计：analyzeNutritionStats 函数演示了如何进行每日营养的统计分析，计算总蛋白质、碳水化合物、脂肪和热量。

---

ArkTS 页面集成与调用

在 OpenHarmony 的 ArkTS 页面中集成这个营养成分分析工具。以下是完整的 ArkTS 实现代码：

import { nutritionAnalyzer } from './hellokjs';

@Entry
@Component
struct NutritionAnalyzerPage {
  @State foodName: string = "chicken";
  @State weight: string = "100";
  @State analysisResult: string = "";
  @State isLoading: boolean = false;

  private foodList = [
    "chicken", "beef", "fish", "rice", "bread", "apple", "banana",
    "broccoli", "carrot", "milk", "egg", "nuts", "olive_oil", "yogurt", "salmon"
  ];

  build() {
    Column() {
      // 顶部栏
      Row() {
        Text("🥗 营养分析工具")
          .fontSize(24)
          .fontWeight(FontWeight.Bold)
          .fontColor(Color.White)
      }
      .width("100%")
      .height(60)
      .backgroundColor("#2E7D32")
      .justifyContent(FlexAlign.Center)
      .padding({ top: 10, bottom: 10 })

      // 主容器
      Scroll() {
        Column() {
          // 食物名称选择
          Text("选择食物")
            .fontSize(14)
            .fontColor("#333333")
            .margin({ top: 20, left: 15 })

          Select(this.foodList)
            .value(this.foodName)
            .onSelect((index: number, value?: string) => {
              this.foodName = value || this.foodList[index];
            })
            .width("90%")
            .height(45)
            .margin({ top: 8, bottom: 15, left: 15, right: 15 })
            .backgroundColor("#C8E6C9")
            .border({ width: 1, color: "#2E7D32" })

          // 食物重量输入
          Text("食物重量（克）")
            .fontSize(14)
            .fontColor("#333333")
            .margin({ left: 15 })

          TextInput({
            placeholder: "例如: 100",
            text: this.weight
          })
            .width("90%")
            .height(45)
            .margin({ top: 8, bottom: 15, left: 15, right: 15 })
            .padding({ left: 10, right: 10 })
            .backgroundColor("#C8E6C9")
            .border({ width: 1, color: "#2E7D32" })
            .onChange((value: string) => {
              this.weight = value;
            })

          // 按钮区域
          Row() {
            Button("📊 分析营养")
              .width("45%")
              .height(45)
              .backgroundColor("#2E7D32")
              .fontColor(Color.White)
              .fontSize(16)
              .fontWeight(FontWeight.Bold)
              .onClick(() => {
                this.isLoading = true;
                setTimeout(() => {
                  const input = `${this.foodName} ${this.weight}`;
                  this.analysisResult = nutritionAnalyzer(input);
                  this.isLoading = false;
                }, 300);
              })

            Blank()

            Button("🔄 重置")
              .width("45%")
              .height(45)
              .backgroundColor("#2196F3")
              .fontColor(Color.White)
              .fontSize(16)
              .fontWeight(FontWeight.Bold)
              .onClick(() => {
                this.foodName = "chicken";
                this.weight = "100";
                this.analysisResult = "";
                this.isLoading = false;
              })
          }
          .width("90%")
          .margin({ top: 10, bottom: 20, left: 15, right: 15 })
          .justifyContent(FlexAlign.SpaceBetween)

          // 加载指示器
          if (this.isLoading) {
            Row() {
              LoadingProgress()
                .width(40)
                .height(40)
                .color("#2E7D32")
              Text("  正在分析中...")
                .fontSize(14)
                .fontColor("#666666")
            }
            .width("90%")
            .height(50)
            .margin({ bottom: 15, left: 15, right: 15 })
            .justifyContent(FlexAlign.Center)
            .backgroundColor("#C8E6C9")
            .borderRadius(8)
          }

          // 结果显示区域
          if (this.analysisResult.length > 0) {
            Column() {
              Text("📈 分析结果")
                .fontSize(16)
                .fontWeight(FontWeight.Bold)
                .fontColor("#2E7D32")
                .margin({ bottom: 10 })

              Text(this.analysisResult)
                .width("100%")
                .fontSize(12)
                .fontFamily("monospace")
                .fontColor("#333333")
                .lineHeight(1.6)
                .padding(10)
                .backgroundColor("#FAFAFA")
                .border({ width: 1, color: "#E0E0E0" })
                .borderRadius(8)
            }
            .width("90%")
            .margin({ top: 20, bottom: 30, left: 15, right: 15 })
            .padding(15)
            .backgroundColor("#C8E6C9")
            .borderRadius(8)
            .border({ width: 1, color: "#2E7D32" })
          }
        }
        .width("100%")
      }
      .layoutWeight(1)
      .backgroundColor("#FFFFFF")
    }
    .width("100%")
    .height("100%")
    .backgroundColor("#F5F5F5")
  }
}

ArkTS 代码说明

这段 ArkTS 代码实现了完整的用户界面和交互逻辑。关键点包括：

导入函数：从编译后的 JavaScript 模块中导入 nutritionAnalyzer 函数。

状态管理：使用 @State 装饰器管理四个状态：食物名称、重量、分析结果和加载状态。

UI 布局：包含顶部栏、食物名称下拉选择、食物重量输入框、分析和重置按钮、加载指示器和结果显示区域。

交互逻辑：用户选择食物、输入重量后，点击分析按钮。应用会调用 Kotlin 函数进行分析，显示加载动画，最后展示详细的分析结果。

样式设计：使用绿色主题，与营养和健康相关的主题相符。所有输入框、按钮和结果显示区域都有相应的样式设置，提供清晰的视觉层次。

---

数据输入与交互体验

输入数据格式规范

为了确保工具能够正确处理用户输入，用户应该遵循以下规范：

1. 食物名称：英文名称，支持的食物包括 chicken、beef、fish、rice、bread、apple、banana、broccoli、carrot、milk、egg、nuts、olive_oil、yogurt、salmon。
2. 食物重量：整数或浮点数，单位为克，范围通常在 1-10000 克之间。
3. 分隔符：使用空格分隔食物名称和重量。

示例输入

• 鸡肉 100 克：chicken 100
• 米饭 150 克：rice 150
• 苹果 200 克：apple 200
• 西兰花 150 克：broccoli 150
• 坚果 30 克：nuts 30

交互流程

1. 用户打开应用，看到食物选择和重量输入框
2. 用户选择食物、输入重量
3. 点击"分析营养"按钮，应用调用 Kotlin 函数进行分析
4. 应用显示加载动画，表示正在处理
5. 分析完成后，显示详细的分析结果，包括营养成分、营养评估、每日占比、饮食建议等
6. 用户可以点击"重置"按钮清空数据，重新开始

---

编译与自动复制流程

编译步骤

1. 编译 Kotlin 代码：

   ./gradlew build
   

2. 生成 JavaScript 文件：
   编译过程会自动生成 hellokjs.d.ts 和 hellokjs.js 文件。

3. 复制到 ArkTS 项目：
   使用提供的脚本自动复制生成的文件到 ArkTS 项目的 pages 目录：

   ./build-and-copy.bat
   

文件结构

编译完成后，项目结构如下：

kmp_openharmony/
├── src/
│   └── jsMain/
│       └── kotlin/
│           └── App.kt (包含 nutritionAnalyzer 函数)
├── build/
│   └── js/
│       └── packages/
│           └── hellokjs/
│               ├── hellokjs.d.ts
│               └── hellokjs.js
└── kmp_ceshiapp/
    └── entry/
        └── src/
            └── main/
                └── ets/
                    └── pages/
                        ├── hellokjs.d.ts (复制后)
                        ├── hellokjs.js (复制后)
                        └── Index.ets (ArkTS 页面)

---

总结

这个案例展示了如何使用 Kotlin Multiplatform 技术实现一个跨端的营养工具 - 营养成分分析工具。通过将核心逻辑写在 Kotlin 中，然后编译为 JavaScript，最后在 ArkTS 中调用，我们实现了代码的一次编写、多端复用。

核心优势

1. 代码复用：Kotlin 代码可以在 JVM、JavaScript 和其他平台上运行，避免重复开发。
2. 类型安全：Kotlin 的类型系统确保了代码的安全性和可维护性。
3. 性能优化：Kotlin 编译为 JavaScript 后，性能与手写 JavaScript 相当。
4. 易于维护：集中管理业务逻辑，使得维护和更新变得更加容易。
5. 用户体验：通过 ArkTS 提供的丰富 UI 组件，可以创建美观、易用的用户界面。

扩展方向

1. 数据持久化：将用户的饮食记录保存到本地存储或云端。
2. 数据可视化：使用图表库展示营养成分的分布和每日摄入趋势。
3. 多用户支持：支持多个用户的饮食管理和对比。
4. 智能推荐：根据用户的营养需求推荐合适的食物组合。
5. 社交功能：允许用户分享健康饮食成果和相互鼓励。
6. 集成第三方 API：连接营养数据库、食物条形码扫描等外部服务。
7. AI 营养顾问：使用机器学习提供更个性化的营养建议。
8. 健身配合：与运动工具结合，提供运动和饮食的综合方案。

通过这个案例，开发者可以学到如何在 KMP 项目中实现复杂的营养分析计算逻辑，以及如何在 OpenHarmony 平台上构建高效的跨端应用。这个营养成分分析工具可以作为健康管理应用、营养咨询平台或饮食管理系统的核心模块。