【web网页添加天气等插件】-vue3

前言

前端页面展示天气、定位、风速等内容

一、步骤1

在views文件夹下添加weather文件夹，在weather文件夹下再新增weather.vue

代码：

  

    
      
        z
      
      {{ weatherInfo.area }}
     |
    {{ weatherInfo.weather }}
    {{ weatherInfo.temperature }}°C |
    {{ weatherInfo.wind_direction }}
    {{ weatherInfo.wind_power }} |
    {{ weatherInfo.quality }}
    
加载中...
    
{{ errorMessage }}
  


import {computed, onMounted, reactive, ref} from "vue";
import axios from "axios";
import {LocationInformation} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";
const errorMessage = ref(""); // 错误信息
const isLoading = ref(false); // 加载状态
const weatherInfo = reactive({
  area: '',
  temperature: '',
  weather: '',
  weather_pic: '',
  wind_direction: '',
  wind_power: '',
  quality: ''
});
// 计算属性，根据空气质量动态返回 tag 类型
const tagType = computed(() => {
  switch (weatherInfo.quality) {
    case '优质':
    case '良好':
      return 'success';
    case '轻度污染':
    case '中度污染':
    case '重度污染':
    case '严重污染':
      return 'warning';
    case '重度污染':
    case '严重污染':
      return 'danger';
    default:
      return 'default';
  }
});
const flushLocation = async () => {
  try {
    // 使用 ip-api 获取城市信息
    const response = await fetch('http://ip-api.com/json/?lang=zh-CN');
    if (!response.ok) throw new Error('网络响应失败');
    const data = await response.json();
    getWeather(data.city);
  } catch (error) {
    console.error('获取城市信息失败：', error);
    errorMessage.value = "无法获取城市信息。";
    ElMessage.error("无法获取城市信息！");
  }
}
// 获取城市信息的函数
const getLocation = () => {
  const weather = JSON.parse(localStorage.getItem('weather'));
  if (weather) {
    // 如果本地存储中已有天气信息，直接使用
    Object.assign(weatherInfo, weather);
  } else {
    flushLocation();
  }
};
// 获取天气信息
const getWeather = async (area) => {
  isLoading.value = true; // 开始加载
  try {
    const response = await axios({
      method: "get",
      url: "https://ali-weather.showapi.com/area-to-weather",
      params: {area},
      headers: {Authorization: "APPCODE bbff6e8a7d56410fbfca556ccf53b171"},
      timeout: 5000,
    });
    const weatherData = response.data.showapi_res_body.now;
    weatherInfo.area = area;
    weatherInfo.temperature = weatherData.temperature;
    weatherInfo.weather = weatherData.weather;
    weatherInfo.weather_pic = weatherData.weather_pic;
    weatherInfo.wind_power = weatherData.wind_power;
    weatherInfo.wind_direction = weatherData.wind_direction;
    weatherInfo.quality = response.data.showapi_res_body.now.aqiDetail.quality;
    // 更新 localStorage
    localStorage.setItem("weather", JSON.stringify(weatherInfo));
    // 完成加载
    isLoading.value = false;
  } catch (error) {
    console.error('获取天气信息失败：', error);
    errorMessage.value = "无法获取天气信息。";
    ElMessage.error("无法获取天气信息！");
    isLoading.value = false;
  }
};
// 初始化获取城市信息
getLocation();


span {
  margin: auto 3px;
}
.loading {
  font-size: 14px;
  color: #409eff;
  font-weight: bold;
}
.error-message {
  color: red;
  font-weight: bold;
  margin-top: 10px;
}

二、步骤2

1.在home.vue中引入weather.vue

import weather from '@/views/weather/weather.vue

2.在home.vue的template里添加weather

效果展示

总结

此方法通过仅添加前端组件完成页面天气内容的展示