vue实现天气界面

Vue 实现天气界面的方法

数据获取

通过调用天气API（如和风天气、OpenWeatherMap等）获取实时天气数据。使用axios或fetch发送请求，建议在created或mounted生命周期钩子中调用。

// 示例：使用axios获取天气数据
methods: {
  fetchWeather() {
    axios.get('https://api.openweathermap.org/data/2.5/weather?q=城市名&appid=你的API密钥')
      .then(response => {
        this.weatherData = response.data;
      })
      .catch(error => {
        console.error('获取天气失败:', error);
      });
  }
}

界面布局

使用Vue的模板语法设计天气卡片，包含温度、湿度、风速等关键信息。结合CSS实现响应式布局。

<template>
  <div class="weather-card">
    <h3>{{ weatherData.name }}</h3>
    <div class="weather-info">
      <p>温度: {{ Math.round(weatherData.main.temp - 273.15) }}°C</p>
      <p>湿度: {{ weatherData.main.humidity }}%</p>
      <p>风速: {{ weatherData.wind.speed }} m/s</p>
    </div>
  </div>
</template>

动态样式

根据天气类型（晴、雨、雪等）切换背景颜色或图标。使用计算属性或条件类绑定。

computed: {
  weatherClass() {
    return {
      'sunny': this.weatherData.weather[0].main === 'Clear',
      'rainy': this.weatherData.weather[0].main === 'Rain'
    };
  }
}

自动更新

通过setInterval定时刷新数据（如每30分钟），注意在组件销毁时清除定时器。

mounted() {
  this.fetchWeather();
  this.interval = setInterval(this.fetchWeather, 1800000);
},
beforeDestroy() {
  clearInterval(this.interval);
}

错误处理

添加加载状态和错误提示，提升用户体验。

<div v-if="loading">加载中...</div>
<div v-else-if="error">{{ errorMessage }}</div>
<div v-else class="weather-card">...</div>

完整组件示例

以下是一个简单的Vue天气组件示例：

<template>
  <div :class="['weather-card', weatherClass]">
    <h3>{{ city }}</h3>
    <div v-if="loading">加载中...</div>
    <div v-else-if="error" class="error">{{ error }}</div>
    <div v-else class="weather-info">
      <p>当前: {{ description }}</p>
      <p>温度: {{ temp }}°C</p>
      <p>湿度: {{ humidity }}%</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      city: '北京',
      weatherData: null,
      loading: true,
      error: null
    };
  },
  computed: {
    description() {
      return this.weatherData.weather[0].description;
    },
    temp() {
      return Math.round(this.weatherData.main.temp - 273.15);
    },
    humidity() {
      return this.weatherData.main.humidity;
    },
    weatherClass() {
      const main = this.weatherData?.weather[0]?.main;
      return main ? main.toLowerCase() : '';
    }
  },
  methods: {
    async fetchWeather() {
      try {
        const response = await axios.get(
          `https://api.openweathermap.org/data/2.5/weather?q=${this.city}&appid=你的API密钥`
        );
        this.weatherData = response.data;
      } catch (err) {
        this.error = '无法获取天气数据';
      } finally {
        this.loading = false;
      }
    }
  },
  mounted() {
    this.fetchWeather();
  }
};
</script>

<style>
.weather-card {
  padding: 20px;
  border-radius: 10px;
  max-width: 300px;
}
.sunny {
  background-color: #ffeb3b;
}
.rainy {
  background-color: #bbdefb;
}
.error {
  color: red;
}
</style>