Homepage 第三方天气API接口教程

之前一直用高德的个人开发者认证里的天气api，每月有免费的额度，用了一年多了也没出啥问题。最近有一个莫名的上海电话说涉及商用必须要付钱，我查看了下后台，我的小博客每月撑死几百个请求，完全不商用也没超量，搞不清楚高德想闹哪样，直接注销了高德开发者。换了一个接口。

如果你也用我同款的homepage主页，只要修改以下两个文件即可，api地址已经写进去了，高德api部分保留没有修改，保证 .env 文件里的 key 为空就不会调用高德。

1.api里的 index.js 文件，替换备用天气接口部分代码

// 备用天气接口
export const getOtherWeather = async () => {
  const res = await fetch("https://api.vvhan.com/api/weather");
  if (!res.ok) throw new Error("备用天气接口请求失败");
  return await res.json();
};

2.components里的 weather.vue 文件

<template>
  <div class="weather" v-if="weatherData.adCode.city && weatherData.weather.weather">
    <span>{{ weatherData.adCode.city }}&nbsp;</span>
    <span>{{ weatherData.weather.weather }}&nbsp;</span>
    <span>{{ weatherData.weather.temperature }}℃</span>
    <span class="sm-hidden">
      &nbsp;{{
        weatherData.weather.winddirection?.endsWith("风")
          ? weatherData.weather.winddirection
          : weatherData.weather.winddirection + "风"
      }}&nbsp;
    </span>
    <span class="sm-hidden">{{ weatherData.weather.windpower }}&nbsp;级</span>
  </div>
  <div class="weather" v-else>
    <span>天气数据获取失败</span>
  </div>
</template>

<script setup>
import { reactive, onMounted, h } from "vue";
import { getAdcode, getWeather, getOtherWeather } from "@/api";
import { Error } from "@icon-park/vue-next";
import { ElMessage } from "element-plus";

const mainKey = import.meta.env.VITE_WEATHER_KEY;

const weatherData = reactive({
  adCode: {
    city: null,
    adcode: null,
  },
  weather: {
    weather: null,
    temperature: null,
    winddirection: null,
    windpower: null,
  },
});

const onError = (message) => {
  ElMessage({
    message,
    icon: h(Error, {
      theme: "filled",
      fill: "#efefef",
    }),
  });
  console.error(message);
};

const getWeatherData = async () => {
  try {
    if (!mainKey) {
      // 备用接口请求
      const result = await getOtherWeather();
      console.log("备用天气接口返回数据：", result);

      if (!result.success || !result.data) {
        throw new Error("备用天气接口返回错误");
      }

      const data = result.data;

      weatherData.adCode.city = result.city || "未知地区";
      weatherData.weather.weather = data.type || "未知";

      // 拼接显示温度范围（去除 °C）
      weatherData.weather.temperature = `${data.low.replace("°C", "")} ~ ${data.high.replace("°C", "")}`;

      weatherData.weather.winddirection = data.fengxiang || "未知";

      weatherData.weather.windpower = data.fengli ? data.fengli.replace(/级$/, "") : "0";
    } else {
      // 高德接口请求流程
      const adCode = await getAdcode(mainKey);

      if (adCode.infocode !== "10000") {
        throw new Error("地区查询失败");
      }

      weatherData.adCode.city = adCode.city;
      weatherData.adCode.adcode = adCode.adcode;

      const result = await getWeather(mainKey, weatherData.adCode.adcode);

      if (result.infocode !== "10000") {
        throw new Error("天气查询失败");
      }

      const live = result.lives[0];
      weatherData.weather.weather = live.weather;
      weatherData.weather.temperature = live.temperature;
      weatherData.weather.winddirection = live.winddirection;
      weatherData.weather.windpower = live.windpower;
    }
  } catch (error) {
    onError("天气信息获取失败");
  }
};

onMounted(() => {
  getWeatherData();
});
</script>

<style scoped>
.weather {
  font-size: 14px;
  color: #666;
}
.sm-hidden {
  display: none;
}
@media (min-width: 640px) {
  .sm-hidden {
    display: inline;
  }
}
</style>

当然，你也可以换用你喜欢的其他第三方天气api接口，调整相应的字段对应关系即可。

链接：韩小韩的公益API