目录

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

---

概述

本案例在 Kotlin Multiplatform (KMP) 工程中实现了一个 生活工具 - 天气穿衣建议工具：

• 输入：用户的天气信息（温度、湿度、风速、天气状况），使用空格分隔，例如：25 60 10 sunny。
• 输出：
  • 天气数据分析：温度、湿度、风速、天气状况等基本信息
  • 舒适度评估：舒适度等级、体感温度、天气评价
  • 穿衣建议：根据天气给出的详细穿衣建议
  • 配饰建议：根据天气给出的配饰建议
  • 出行建议：根据天气给出的出行建议和注意事项
• 技术路径：Kotlin → Kotlin/JS → JavaScript 模块 → ArkTS 页面调用。

这个案例展示了 KMP 跨端开发在日常生活领域的应用：

把天气穿衣逻辑写在 Kotlin 里，一次实现，多端复用；把穿衣界面写在 ArkTS 里，专注 UI 和体验。

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

---

功能设计

输入数据格式

天气穿衣建议工具采用简单直观的输入格式：

• 使用 空格分隔 各个参数。
• 第一个参数是温度（整数或浮点数，单位：摄氏度）。
• 第二个参数是湿度（整数，单位：百分比）。
• 第三个参数是风速（整数或浮点数，单位：m/s）。
• 第四个参数是天气状况（sunny/cloudy/rainy/snowy/windy）。
• 输入示例：

25 60 10 sunny

这可以理解为：

• 温度：25 摄氏度
• 湿度：60%
• 风速：10 m/s
• 天气状况：晴天

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

• 舒适度等级：非常舒适/舒适/一般/不舒适/非常不舒适
• 体感温度：根据温度、湿度、风速计算的体感温度
• 穿衣建议：根据温度和天气的详细穿衣建议
• 配饰建议：根据天气的帽子、围巾、手套等建议
• 出行建议：根据天气的出行方式和注意事项

输出信息结构

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

1. 标题区：例如"🌤️ 天气穿衣建议"，一眼看出工具用途。
2. 天气数据：温度、湿度、风速、天气状况等基本信息。
3. 舒适度评估：舒适度等级、体感温度、天气评价。
4. 穿衣建议：根据天气的详细穿衣建议。
5. 配饰建议：根据天气的帽子、围巾、手套等建议。
6. 出行建议：根据天气的出行方式和注意事项。

这样的输出结构使得：

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

---

Kotlin 实现代码（KMP）

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

@OptIn(ExperimentalJsExport::class)
@JsExport
fun weatherDressingAdvisor(inputData: String = "25 60 10 sunny"): String {
    // 输入格式: 温度(℃) 湿度(%) 风速(m/s) 天气状况
    val parts = inputData.trim().split(" ").filter { it.isNotEmpty() }

    if (parts.size < 4) {
        return "❌ 错误: 请输入完整的信息，格式: 温度(℃) 湿度(%) 风速(m/s) 天气状况\n例如: 25 60 10 sunny"
    }

    val temperature = parts[0].toDoubleOrNull() ?: return "❌ 错误: 温度必须是数字"
    val humidity = parts[1].toIntOrNull() ?: return "❌ 错误: 湿度必须是整数"
    val windSpeed = parts[2].toDoubleOrNull() ?: return "❌ 错误: 风速必须是数字"
    val weatherCondition = parts[3].lowercase()

    if (temperature < -50 || temperature > 60) {
        return "❌ 错误: 温度必须在 -50 到 60 摄氏度之间"
    }

    if (humidity < 0 || humidity > 100) {
        return "❌ 错误: 湿度必须在 0-100% 之间"
    }

    if (windSpeed < 0 || windSpeed > 50) {
        return "❌ 错误: 风速必须在 0-50 m/s 之间"
    }

    val validWeather = listOf("sunny", "cloudy", "rainy", "snowy", "windy")
    if (weatherCondition !in validWeather) {
        return "❌ 错误: 天气状况必须是以下之一: ${validWeather.joinToString(", ")}"
    }

    // 计算体感温度（风冷指数）
    val windChill = if (temperature <= 10 && windSpeed > 0) {
        13.12 + 0.6215 * temperature - 11.37 * Math.pow(windSpeed, 0.16) + 0.3965 * temperature * Math.pow(windSpeed, 0.16)
    } else {
        temperature
    }

    // 计算舒适度
    val comfortScore = when {
        temperature in 20.0..26.0 && humidity in 40..60 && windSpeed < 5 -> 95
        temperature in 18.0..28.0 && humidity in 30..70 && windSpeed < 8 -> 85
        temperature in 15.0..30.0 && humidity in 20..80 && windSpeed < 10 -> 75
        temperature in 10.0..32.0 && humidity in 10..90 && windSpeed < 15 -> 60
        else -> 40
    }

    // 判断舒适度等级
    val comfortLevel = when {
        comfortScore >= 90 -> "非常舒适"
        comfortScore >= 80 -> "舒适"
        comfortScore >= 70 -> "一般"
        comfortScore >= 50 -> "不舒适"
        else -> "非常不舒适"
    }

    // 天气评价
    val weatherEvaluation = when (weatherCondition) {
        "sunny" -> "晴朗，阳光充足"
        "cloudy" -> "多云，光线柔和"
        "rainy" -> "下雨，需要防水"
        "snowy" -> "下雪，需要保暖"
        "windy" -> "大风，需要防风"
        else -> "未知天气"
    }

    // 穿衣建议
    val dressingAdvice = when {
        temperature < -10 -> {
            when (weatherCondition) {
                "snowy" -> "穿着：厚重羽绒服、厚毛衣、长裤、厚袜子\n材质：选择保暖的羊毛、羽绒等材料\n重点：保护头部、颈部、手部和脚部"
                else -> "穿着：厚羽绒服、毛衣、长裤、厚袜子\n材质：选择保暖的羊毛、羽绒等材料\n重点：多层穿衣法，保持温暖"
            }
        }
        temperature in -10.0..0.0 -> "穿着：羽绒服、毛衣、长裤、厚袜子\n材质：选择保暖的材料\n重点：避免露出皮肤，防止冻伤"
        temperature in 0.0..10.0 -> "穿着：厚外套、长袖衣服、长裤\n材质：选择保暖但透气的材料\n重点：分层穿衣，便于调整"
        temperature in 10.0..15.0 -> "穿着：中等厚度外套、长袖衣服、长裤\n材质：选择舒适的棉麻混纺\n重点：可根据活动量调整"
        temperature in 15.0..20.0 -> "穿着：轻薄外套、长袖或短袖、长裤或短裤\n材质：选择透气的棉质或麻质\n重点：根据个人感受灵活搭配"
        temperature in 20.0..25.0 -> {
            when (weatherCondition) {
                "sunny" -> "穿着：短袖衣服、短裤或长裤\n材质：选择透气的棉质\n重点：做好防晒准备"
                "rainy" -> "穿着：长袖衣服、长裤、防水外套\n材质：选择快干的材料\n重点：防水防湿"
                else -> "穿着：短袖衣服、短裤或长裤\n材质：选择透气的棉质\n重点：舒适透气"
            }
        }
        temperature in 25.0..30.0 -> {
            when (weatherCondition) {
                "sunny" -> "穿着：短袖T恤、短裤、凉鞋\n材质：选择吸汗透气的棉质\n重点：做好防晒，穿浅色衣服"
                "rainy" -> "穿着：短袖衣服、短裤、防水外套\n材质：选择快干的材料\n重点：防水防湿，透气"
                else -> "穿着：短袖衣服、短裤\n材质：选择吸汗透气的棉质\n重点：保持通风，避免过热"
            }
        }
        else -> "穿着：极简短装、凉鞋\n材质：选择最透气的棉麻材料\n重点：防晒防热，多喝水"
    }

    // 配饰建议
    val accessoriesAdvice = when {
        temperature < 0 -> "帽子：必须戴厚帽子\n围巾：必须戴厚围巾\n手套：必须戴厚手套\n鞋子：防滑防冷的靴子"
        temperature in 0.0..10.0 -> "帽子：建议戴帽子\n围巾：建议戴围巾\n手套：建议戴手套\n鞋子：舒适的运动鞋"
        temperature in 10.0..20.0 -> "帽子：可选\n围巾：可选\n手套：可选\n鞋子：舒适的运动鞋或休闲鞋"
        else -> {
            when (weatherCondition) {
                "sunny" -> "帽子：必须戴遮阳帽\n墨镜：必须戴\n围巾：可选\n鞋子：凉鞋或运动鞋"
                "rainy" -> "帽子：建议戴防水帽\n雨具：必须带伞\n鞋子：防水鞋或靴子"
                else -> "帽子：可选\n围巾：可选\n手套：可选\n鞋子：舒适的鞋子"
            }
        }
    }

    // 出行建议
    val travelAdvice = when (weatherCondition) {
        "sunny" -> "出行方式：适合户外活动\n建议：做好防晒，涂抹防晒霜，戴墨镜和帽子\n注意：避免长时间暴晒，多喝水"
        "cloudy" -> "出行方式：适合户外活动\n建议：可以进行正常的户外活动\n注意：虽然多云但紫外线仍然存在，建议涂抹防晒霜"
        "rainy" -> "出行方式：建议室内活动\n建议：如必须外出，携带雨伞和防水衣物\n注意：避免积水区域，防止滑倒，注意交通安全"
        "snowy" -> "出行方式：建议减少外出\n建议：如必须外出，穿着防滑靴子，走稳当的路线\n注意：避免在冰面上行走，防止摔伤，开车要小心"
        "windy" -> "出行方式：适合户外活动但需谨慎\n建议：穿着防风衣物，固定好帽子和围巾\n注意：避免高空作业，注意行人安全，保护好眼睛"
        else -> "出行方式：正常出行\n建议：根据其他条件调整\n注意：保持警惕"
    }

    // 健康建议
    val healthAdvice = when {
        temperature < 0 -> "防冻伤：定期检查手、脚、耳朵等暴露部位\n保暖：保持室内温暖，避免长时间在寒冷环境中\n补充：多吃高热量食物，保持体力"
        temperature in 0.0..10.0 -> "防感冒：避免受风着凉，保持温暖\n补充：多喝温水，增加营养\n运动：适度运动，增强体质"
        temperature in 10.0..20.0 -> "调理：根据天气变化及时增减衣物\n补充：保持营养均衡\n运动：适度户外运动"
        temperature in 20.0..25.0 -> "舒适：这是最舒适的温度范围\n补充：保持正常饮食和运动\n预防：做好防晒准备"
        else -> "防晒：做好防晒工作，避免晒伤\n补充：多喝水，补充电解质\n休息：避免过度疲劳，保持充足睡眠"
    }

    // 构建输出文本
    val result = StringBuilder()
    result.append("🌤️ 天气穿衣建议\n")
    result.append("═".repeat(60)).append("\n\n")
    
    result.append("📊 天气数据\n")
    result.append("─".repeat(60)).append("\n")
    result.append("温度: ${String.format("%.1f", temperature)}°C\n")
    result.append("湿度: ${humidity}%\n")
    result.append("风速: ${String.format("%.1f", windSpeed)} m/s\n")
    result.append("天气状况: ${weatherEvaluation}\n")
    result.append("体感温度: ${String.format("%.1f", windChill)}°C\n\n")

    result.append("😊 舒适度评估\n")
    result.append("─".repeat(60)).append("\n")
    result.append("舒适度等级: ${comfortLevel}\n")
    result.append("舒适度评分: ${comfortScore}/100\n")
    result.append("天气评价: ${weatherEvaluation}\n\n")

    result.append("👕 穿衣建议\n")
    result.append("─".repeat(60)).append("\n")
    result.append("${dressingAdvice}\n\n")

    result.append("🧣 配饰建议\n")
    result.append("─".repeat(60)).append("\n")
    result.append("${accessoriesAdvice}\n\n")

    result.append("🚗 出行建议\n")
    result.append("─".repeat(60)).append("\n")
    result.append("${travelAdvice}\n\n")

    result.append("💪 健康建议\n")
    result.append("─".repeat(60)).append("\n")
    result.append("${healthAdvice}\n\n")

    result.append("📋 穿衣分层建议\n")
    result.append("─".repeat(60)).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. 根据温度变化及时增减衣物，避免感冒\n")
    result.append("2. 选择透气吸汗的材料，保持舒适\n")
    result.append("3. 颜色选择：冷天选深色吸热，热天选浅色反光\n")
    result.append("4. 鞋子选择：舒适透气，适合当天活动\n")
    result.append("5. 配饰搭配：不仅美观，更要实用\n")
    result.append("6. 定期检查天气预报，提前准备\n")
    result.append("7. 根据个人体质调整，不要盲目跟风\n")
    result.append("8. 保持衣物清洁卫生，定期更换\n")
    result.append("9. 注意季节交替时的温度变化\n")
    result.append("10. 相信自己的感受，灵活调整穿衣\n")

    return result.toString()
}

代码说明

这段 Kotlin 代码实现了完整的天气穿衣建议和舒适度评估功能。让我详细解释关键部分：

数据验证：首先验证输入的温度、湿度、风速和天气状况是否有效，确保数据在合理范围内。

体感温度计算：根据温度、湿度和风速计算体感温度，这是判断穿衣的重要指标。

舒适度评分：根据温度、湿度和风速的综合情况计算舒适度评分，帮助用户了解当前天气的舒适程度。

穿衣建议生成：根据温度和天气状况生成详细的穿衣建议，包括衣服类型、材质和重点。

配饰建议：根据温度和天气状况提供帽子、围巾、手套等配饰的建议。

出行建议：根据天气状况提供相应的出行方式和注意事项。

健康建议：根据温度提供相应的健康建议和防护措施。

---

JavaScript 调用示例

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

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

// 示例 1：晴天温暖
const result1 = weatherDressingAdvisor("25 60 10 sunny");
console.log("示例 1 - 晴天温暖:");
console.log(result1);
console.log("\n");

// 示例 2：多云温度适中
const result2 = weatherDressingAdvisor("18 55 8 cloudy");
console.log("示例 2 - 多云温度适中:");
console.log(result2);
console.log("\n");

// 示例 3：下雨温度较低
const result3 = weatherDressingAdvisor("12 75 15 rainy");
console.log("示例 3 - 下雨温度较低:");
console.log(result3);
console.log("\n");

// 示例 4：下雪严寒
const result4 = weatherDressingAdvisor("-5 40 20 snowy");
console.log("示例 4 - 下雪严寒:");
console.log(result4);
console.log("\n");

// 示例 5：大风炎热
const result5 = weatherDressingAdvisor("32 50 25 windy");
console.log("示例 5 - 大风炎热:");
console.log(result5);
console.log("\n");

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

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

// 测试实际应用
const userInput = "22 65 12 cloudy";
const advice = getWeatherAdvice(userInput);
if (advice.success) {
    console.log("天气穿衣建议:");
    console.log(advice.data);
} else {
    console.log("获取建议失败:", advice.error);
}

// 每日天气穿衣建议应用示例
function getDailyWeatherAdvice(weatherReadings) {
    console.log("\n每日天气穿衣建议:");
    console.log("═".repeat(60));
    
    const results = weatherReadings.map((reading, index) => {
        const advice = weatherDressingAdvisor(reading);
        return {
            day: index + 1,
            reading,
            advice
        };
    });

    results.forEach(result => {
        console.log(`\n第 ${result.day} 天 (${result.reading}):`);
        console.log(result.advice);
    });

    return results;
}

// 测试每日天气穿衣建议
const weatherReadings = [
    "15 60 8 cloudy",
    "18 55 10 sunny",
    "22 65 12 cloudy",
    "25 70 15 sunny",
    "20 75 20 rainy"
];

getDailyWeatherAdvice(weatherReadings);

// 天气趋势分析
function analyzeWeatherTrend(readings) {
    const analyses = readings.map(reading => {
        const parts = reading.split(' ').map((v, i) => i < 3 ? parseFloat(v) : v);
        return {
            temp: parts[0],
            humidity: parts[1],
            wind: parts[2],
            condition: parts[3]
        };
    });

    const avgTemp = analyses.reduce((sum, a) => sum + a.temp, 0) / analyses.length;
    const avgHumidity = analyses.reduce((sum, a) => sum + a.humidity, 0) / analyses.length;
    const avgWind = analyses.reduce((sum, a) => sum + a.wind, 0) / analyses.length;

    console.log("\n天气趋势分析:");
    console.log(`平均温度: ${avgTemp.toFixed(1)}°C`);
    console.log(`平均湿度: ${avgHumidity.toFixed(0)}%`);
    console.log(`平均风速: ${avgWind.toFixed(1)} m/s`);
    
    const tempTrend = analyses[analyses.length - 1].temp - analyses[0].temp;
    console.log(`温度变化: ${tempTrend > 0 ? '上升' : '下降'} ${Math.abs(tempTrend).toFixed(1)}°C`);
}

analyzeWeatherTrend(weatherReadings);

JavaScript 代码说明

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

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

多个示例：展示了不同天气条件（晴天、多云、下雨、下雪、大风）的调用方式。

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

每日天气建议：getDailyWeatherAdvice 函数展示了如何处理多天的天气数据，这在实际的天气应用中很常见。

趋势分析：analyzeWeatherTrend 函数演示了如何进行天气趋势分析，计算平均值和变化趋势。

---

ArkTS 页面集成与调用

在 OpenHarmony 的 ArkTS 页面中集成这个天气穿衣建议工具。以下是完整的 ArkTS 实现代码：

import { weatherDressingAdvisor } from './hellokjs';

@Entry
@Component
struct WeatherDressingAdvisorPage {
  @State temperature: string = "25";
  @State humidity: string = "60";
  @State windSpeed: string = "10";
  @State weatherCondition: string = "sunny";
  @State adviceResult: string = "";
  @State isLoading: boolean = false;

  private weatherConditions = ["sunny", "cloudy", "rainy", "snowy", "windy"];

  build() {
    Column() {
      // 顶部栏
      Row() {
        Text("🌤️ 天气穿衣建议")
          .fontSize(24)
          .fontWeight(FontWeight.Bold)
          .fontColor(Color.White)
      }
      .width("100%")
      .height(60)
      .backgroundColor("#00BCD4")
      .justifyContent(FlexAlign.Center)
      .padding({ top: 10, bottom: 10 })

      // 主容器
      Scroll() {
        Column() {
          // 温度输入
          Text("温度 (℃)")
            .fontSize(14)
            .fontColor("#333333")
            .margin({ top: 20, left: 15 })

          TextInput({
            placeholder: "例如: 25",
            text: this.temperature
          })
            .width("90%")
            .height(45)
            .margin({ top: 8, bottom: 15, left: 15, right: 15 })
            .padding({ left: 10, right: 10 })
            .backgroundColor("#B2EBF2")
            .border({ width: 1, color: "#00BCD4" })
            .onChange((value: string) => {
              this.temperature = value;
            })

          // 湿度输入
          Text("湿度 (%)")
            .fontSize(14)
            .fontColor("#333333")
            .margin({ left: 15 })

          TextInput({
            placeholder: "例如: 60",
            text: this.humidity
          })
            .width("90%")
            .height(45)
            .margin({ top: 8, bottom: 15, left: 15, right: 15 })
            .padding({ left: 10, right: 10 })
            .backgroundColor("#B2EBF2")
            .border({ width: 1, color: "#00BCD4" })
            .onChange((value: string) => {
              this.humidity = value;
            })

          // 风速输入
          Text("风速 (m/s)")
            .fontSize(14)
            .fontColor("#333333")
            .margin({ left: 15 })

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

          // 天气状况选择
          Text("天气状况")
            .fontSize(14)
            .fontColor("#333333")
            .margin({ left: 15 })

          Select(this.weatherConditions)
            .value(this.weatherCondition)
            .onSelect((index: number, value?: string) => {
              this.weatherCondition = value || this.weatherConditions[index];
            })
            .width("90%")
            .height(45)
            .margin({ top: 8, bottom: 15, left: 15, right: 15 })
            .backgroundColor("#B2EBF2")
            .border({ width: 1, color: "#00BCD4" })

          // 按钮区域
          Row() {
            Button("🌡️ 获取建议")
              .width("45%")
              .height(45)
              .backgroundColor("#00BCD4")
              .fontColor(Color.White)
              .fontSize(16)
              .fontWeight(FontWeight.Bold)
              .onClick(() => {
                this.isLoading = true;
                setTimeout(() => {
                  const input = `${this.temperature} ${this.humidity} ${this.windSpeed} ${this.weatherCondition}`;
                  this.adviceResult = weatherDressingAdvisor(input);
                  this.isLoading = false;
                }, 300);
              })

            Blank()

            Button("🔄 重置")
              .width("45%")
              .height(45)
              .backgroundColor("#2196F3")
              .fontColor(Color.White)
              .fontSize(16)
              .fontWeight(FontWeight.Bold)
              .onClick(() => {
                this.temperature = "25";
                this.humidity = "60";
                this.windSpeed = "10";
                this.weatherCondition = "sunny";
                this.adviceResult = "";
                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("#00BCD4")
              Text("  正在生成建议中...")
                .fontSize(14)
                .fontColor("#666666")
            }
            .width("90%")
            .height(50)
            .margin({ bottom: 15, left: 15, right: 15 })
            .justifyContent(FlexAlign.Center)
            .backgroundColor("#B2EBF2")
            .borderRadius(8)
          }

          // 结果显示区域
          if (this.adviceResult.length > 0) {
            Column() {
              Text("📋 穿衣建议")
                .fontSize(16)
                .fontWeight(FontWeight.Bold)
                .fontColor("#00BCD4")
                .margin({ bottom: 10 })

              Text(this.adviceResult)
                .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("#B2EBF2")
            .borderRadius(8)
            .border({ width: 1, color: "#00BCD4" })
          }
        }
        .width("100%")
      }
      .layoutWeight(1)
      .backgroundColor("#FFFFFF")
    }
    .width("100%")
    .height("100%")
    .backgroundColor("#F5F5F5")
  }
}

ArkTS 代码说明

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

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

状态管理：使用 @State 装饰器管理六个状态：温度、湿度、风速、天气状况、建议结果和加载状态。

UI 布局：包含顶部栏、温度输入框、湿度输入框、风速输入框、天气状况下拉选择、获取建议和重置按钮、加载指示器和结果显示区域。

交互逻辑：用户输入天气信息后，点击获取建议按钮。应用会调用 Kotlin 函数生成建议，显示加载动画，最后展示详细的穿衣建议。

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

---

数据输入与交互体验

输入数据格式规范

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

1. 温度：整数或浮点数，单位摄氏度，范围 -50 到 60。
2. 湿度：整数，单位百分比，范围 0-100。
3. 风速：整数或浮点数，单位 m/s，范围 0-50。
4. 天气状况：sunny（晴天）、cloudy（多云）、rainy（下雨）、snowy（下雪）、windy（大风）。
5. 分隔符：使用空格分隔各个参数。

示例输入

• 晴天温暖：25 60 10 sunny
• 多云温度适中：18 55 8 cloudy
• 下雨温度较低：12 75 15 rainy
• 下雪严寒：-5 40 20 snowy
• 大风炎热：32 50 25 windy

交互流程

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 (包含 weatherDressingAdvisor 函数)
├── 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. 实时更新：连接天气 API，获取实时天气数据。
5. 个性化推荐：根据用户的穿衣习惯和偏好提供个性化建议。
6. 社交功能：允许用户分享穿衣搭配和相互评价。
7. AI 优化：使用机器学习根据用户反馈优化建议。
8. 衣柜管理：集成衣柜管理功能，推荐搭配方案。

通过这个案例，开发者可以学到如何在 KMP 项目中实现复杂的天气穿衣建议逻辑，以及如何在 OpenHarmony 平台上构建高效的跨端应用。这个天气穿衣建议工具可以作为天气应用、生活助手或时尚搭配应用的核心模块。