一、应用概述

1.1 应用简介

天气卡片（Weather Card）是一款模拟天气展示的应用。显示当前天气状况、温度、湿度、风速等气象数据，并提供7天天气预报。该应用深入展示了ArkTS框架中的数据模拟、多维度信息展示、条件渲染和日期处理技术。

1.2 核心功能

二、数据模型

2.1 天气数据结构

interface WeatherData {
  city: string;
  temperature: number;
  feelsLike: number;
  weatherType: string;
  weatherIcon: string;
  humidity: number;
  windSpeed: number;
  uvIndex: number;
  airQuality: number;
  sunrise: string;
  sunset: string;
}

interface ForecastDay {
  day: string;
  icon: string;
  weather: string;
  high: number;
  low: number;
  wind: number;
}

@State weather: WeatherData = {
  city: '北京', temperature: 28, feelsLike: 30,
  weatherType: '晴', weatherIcon: '☀️',
  humidity: 45, windSpeed: 12, uvIndex: 6,
  airQuality: 75, sunrise: '05:28', sunset: '19:42'
};

@State forecast: ForecastDay[] = [];

三、数据模拟

3.1 模拟数据生成

generateForecast(): void {
  const days = ['今天', '明天', '后天', '周三', '周四', '周五', '周六'];
  const weathers = ['☀️', '⛅', '☁️', '🌧️', '⛈️', '🌨️', '🌫️'];
  const types = ['晴', '多云', '阴', '小雨', '雷阵雨', '小雪', '雾'];
  this.forecast = days.map((day, i) => ({
    day, high: 25 + Math.floor(Math.random() * 10),
    low: 15 + Math.floor(Math.random() * 8),
    weather: types[i % types.length],
    icon: weathers[i % weathers.length],
    wind: Math.floor(Math.random() * 20) + 1
  }));
}

refreshWeather(): void {
  this.weather.temperature = 15 + Math.floor(Math.random() * 20);
  this.weather.humidity = 30 + Math.floor(Math.random() * 50);
  this.weather.windSpeed = Math.floor(Math.random() * 30);
  this.weather.airQuality = 30 + Math.floor(Math.random() * 150);
  this.generateForecast();
}

四、空气质量映射

4.1 颜色映射

getAirQualityLevel(aqi: number): string {
  if (aqi <= 50) return '优';
  if (aqi <= 100) return '良';
  if (aqi <= 150) return '轻度污染';
  if (aqi <= 200) return '中度污染';
  return '重度污染';
}

getAirQualityColor(aqi: number): string {
  if (aqi <= 50) return '#4CAF50';
  if (aqi <= 100) return '#FF9800';
  if (aqi <= 150) return '#FF5722';
  return '#F44336';
}

五、总结

5.1 核心技术

1. 数据模拟生成
2. 多维度信息展示
3. 条件渲染策略
4. 颜色映射系统
5. 日期时间处理

5.2 扩展方向

1. 真实API集成
2. 天气预警系统
3. 历史天气统计
4. 天气地图
5. 生活指数建议