天气信息获取失败解决办法

[shuaidaoya]

使用高德的天气 API，不知道是不是安全密钥验证模块的问题，返回的天气数据为空
另外 原先的教书先生API失效了，替换成下面的韩小韩天气 API

韩小韩天气 API 接口文档
https://api.vvhan.com/article/tianqi.html
接口地址： https://api.vvhan.com/api/weather

[shuaidaoya]

可以替换备用 API 恢复天气显示
需要改两个文件
第一个：
src/api/index.js
将70行以后的内容替换成

// 获取韩小韩天气 API
export const getOtherWeather = async (city = null) => {
let url = 'https://api.vvhan.com/api/weather';
if (city) {
url += ?city=${encodeURIComponent(city)};
}
try {
const res = await fetch(url);
const data = await res.json();
if (data.success) {
console.log(data, 'data');
ElMessage({
message: 当前${data.city}，天气${data.data.type}，温度${data.data.low.replace("°C", "")}-${data.data.high.replace("°C", "")}摄氏度,
duration: 3500,
});
return data;
} else {
console.error('获取天气数据失败:', data.message);
return null;
}
} catch (error) {
console.error('请求天气数据时出错:', error);
return null;
}
};

第二个
src/components/Weather.vue
避免大家操作麻烦，这个文件整个代码替换成以下代码

{{ weatherData.adCode.city }}  {{ weatherData.weather.weather }}  {{ weatherData.weather.temperature }}℃  {{ weatherData.weather.winddirection + '风' }}  {{ weatherData.weather.windpower }} 级

天气数据获取失败

<script setup> import { getAdcode, getWeather, getOtherWeather } from "@/api"; import { Error } from "@icon-park/vue-next"; // 高德开发者 Key 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 isWeatherDataValid = computed(() => { return ( weatherData.adCode.city && weatherData.weather.weather && weatherData.weather.temperature !== null ); }); // 获取天气数据 const getWeatherData = async () => { try { if (!mainKey) { console.log("未配置高德 API，使用备用韩小韩天气 API 接口"); const result = await getOtherWeather(); // 自动识别位置 if (result && result.success && result.data) { const data = result.data; weatherData.adCode = { city: result.city || "未知地区", // 城市名称 }; weatherData.weather = { weather: data.type, // 天气现象 temperature: getTemperature(data.low.replace("°C", ""), data.high.replace("°C", "")), // 温度 winddirection: data.fengxiang, // 风向 windpower: data.fengli.replace("级", ""), // 风力级别 }; console.log("weatherData:", weatherData); } else { throw new Error("备用天气接口返回数据格式错误或数据获取失败"); } } else { // 使用高德 API 获取天气数据（保持不变） const adCode = await getAdcode(mainKey); if (adCode.infocode !== "10000") { throw new Error("地区查询失败"); } weatherData.adCode = { city: adCode.city, adcode: adCode.adcode, }; const result = await getWeather(mainKey, weatherData.adCode.adcode); weatherData.weather = { weather: result.lives[0].weather, temperature: result.lives[0].temperature, winddirection: result.lives[0].winddirection, windpower: result.lives[0].windpower, }; } } catch (error) { console.error("天气信息获取失败:", error); onError("天气信息获取失败"); } }; // 计算平均温度 const getTemperature = (min, max) => { const average = (Number(min) + Number(max)) / 2; return Math.round(average); }; // 报错信息 const onError = (message) => { ElMessage({ message, icon: h(Error, { theme: "filled", fill: "#efefef", }), }); console.error(message); }; onMounted(() => { getWeatherData(); }); </script>

[kkzdq]

url += ?city=${encodeURIComponent(city)};和message: 当前${data.city}，天气${data.data.type}，温度${data.data.low.replace("°C", "")}-${data.data.high.replace("°C", "")}摄氏度,缺少反引号

[NanoRocky]

我遇到了，高德的定位 API 不支持 IPV6，所以如果你的网络环境有 IPV6 且 IPV6 优先，就会返回不了地址。腾讯那边支持，但是遇到点问题，就是它貌似没有 access-control-allow-headers 头部。正在处理....

[Deep-sea-lab]

s

emm....为啥直接白屏了

[Deep-sea-lab]

所有的语法错误我已更正
选择Reference in a new issue之后复制，把>和空格都删了

src\api\index.js
替换第70行向下
// 获取教书先生天气 API
// https://api.oioweb.cn/doc/weather/GetWeather
//换成了韩小韩WebAPI接口
//https://api.vvhan.com/api/weather
export const getOtherWeather = async (city = null) => {
let url = 'https://api.vvhan.com/api/weather';
if (city) {
url += ?city=${encodeURIComponent(city)};
}
try {
const res = await fetch(url);
const data = await res.json();
if (data.success) {
const lowTemp = data.data.low.replace(/°C/g, '');
const highTemp = data.data.high.replace(/°C/g, '');

  ElMessage({ 
    message: `当前${data.city}，天气${data.data.type}，温度${lowTemp}-${highTemp}摄氏度`,
    duration: 3500,
  });
  return data;
} else {
  console.error('获取天气数据失败:', data.message);
  return null;
}

} catch (error) {
console.error('请求天气数据时出错:', error);
return null;
}
};

src\components\Weather.vue
替换为

{{ weatherData.adCode.city }}  {{ weatherData.weather.weather }}  {{ weatherData.weather.temperature }}℃  {{ weatherData.weather.winddirection + '风' }}  {{ weatherData.weather.windpower }} 级

天气数据获取失败

<script setup> import { reactive, computed, onMounted } from 'vue'; import { getAdcode, getWeather, getOtherWeather } from "@/api"; import { ElMessage } from 'element-plus'; import { Error } from '@icon-park/vue-next'; // 高德开发者 Key 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 isWeatherDataValid = computed(() => { return ( weatherData.adCode.city && weatherData.weather.weather && weatherData.weather.temperature !== null ); }); // 获取天气数据 const getWeatherData = async () => { try { if (!mainKey) { console.log("未配置高德 API，使用备用韩小韩天气 API 接口"); const result = await getOtherWeather(); // 自动识别位置 if (result &&result.success &&result.data) { const data = result.data; weatherData.adCode.city = result.city || "未知地区"; // 城市名称 weatherData.weather = { weather: data.type, // 天气现象 temperature: getTemperature(data.low.replace('°C', ''), data.high.replace('°C', '')), // 温度 winddirection: data.fengxiang, // 风向 windpower: data.fengli.replace('级', '') // 风力级别 }; console.log("weatherData:", weatherData); } else { throw new Error("备用天气接口返回数据格式错误或数据获取失败"); } } else { // 使用高德 API 获取天气数据 const adCode = await getAdcode(mainKey); if (adCode.infocode !== '10000') { throw new Error('地区查询失败'); } weatherData.adCode = { city: adCode.city, adcode: adCode.adcode, }; const result = await getWeather(mainKey, weatherData.adCode.adcode); weatherData.weather = { weather: result.lives[0].weather, temperature: result.lives[0].temperature, winddirection: result.lives[0].winddirection, windpower: result.lives[0].windpower, }; } } catch (error) { console.error('天气信息获取失败:', error); onError('天气信息获取失败'); } }; // 计算平均温度 const getTemperature = (min, max) => { const average = (Number(min) + Number(max)) / 2; return Math.round(average); }; // 报错信息 const onError = (message) => { ElMessage({ message, icon: h(Error, { theme: 'filled', fill: '#efefef' }) }); console.error(message); }; onMounted(() => { getWeatherData(); }); </script>

[NanoRocky]

#374 我尝试修复了这个功能