首选OpenWeather免费版，因其API稳定、无需预审域名、支持CORS；注意用英文城市名或经纬度查询，fetch需加catch处理错误，温度单位为开尔文需转换，图标URL需动态拼接icon字段。
天气API选哪个？OpenWeather 和 WeatherAPI 的实际差异
直接用 OpenWeather 的免费版最稳妥，https://api.openweathermap.org/data/2.5/weather 返回结构清晰、字段稳定，且不需要预审域名或绑定信用卡。WeatherAPI 虽然文档友好，但免费层每小时请求上限低（100次），且 current.condition.text 这类嵌套路径在前端解析时容易因字段缺失报错。
关键判断点：appid 必须作为 URL 参数传，不能放请求头；城市名要用英文（如 q=Beijing），中文会 404；坐标查询更可靠，推荐用 lat/lon 参数避免拼写歧义。
怎么在纯 HTML 页面里发起请求？不用框架也能做
index.html 是静态文件，浏览器默认禁止跨域请求，但 OpenWeather 支持 CORS，所以可以直接用 fetch。别用 XMLHttpRequest——写法冗长还容易漏掉 response.json() 链式调用。
实操要点：
立即学习“前端免费学习笔记（深入）”；
- 把
fetch写在<script>标签里，且放在</body>前，确保 DOM 已加载 - 必须加
.catch()捕获网络失败或 404，否则控制台静默失败，组件不显示也不报错 - 响应成功后，用
data.main.temp取温度（单位是开尔文，要减 273.15），data.weather[0].description取天气描述
示例片段：
fetch('https://api.openweathermap.org/data/2.5/weather?q=Shanghai&appid=YOUR_KEY&units=metric')
.then(r => r.json())
.then(data => {
document.getElementById('weather-temp').textContent = Math.round(data.main.temp) + '°C';
document.getElementById('weather-desc').textContent = data.weather[0].description;
})
.catch(err => console.error('天气加载失败:', err));
DOM 更新失败？检查这三处硬性限制
常见现象：控制台没报错，但页面空白或显示 undefined。大概率是以下任一问题：
-
getElementById查找的 ID 在 HTML 中不存在，或拼写不一致（比如写了weatherDesc但 HTML 是weather-desc） - API 返回的
data.weather是空数组（城市名无效时发生），直接访问data.weather[0].description会报Cannot read property 'description' of undefined - 免费 API 有调用频率限制，连续刷新 5 次以上可能触发 429，需等 1 分钟或换 IP
安全写法：用可选链 data?.weather?.[0]?.description（注意兼容性：IE 不支持），或加一层判断 if (data.weather && data.weather.length)。
要不要加 loading 和错误提示？真有必要
用户点击页面就看到空白几秒，会以为功能没生效。简单加两行 DOM 操作就能提升体验：
- 请求发起前，设
document.getElementById('weather-widget').innerHTML = '加载中...'; -
catch块里改成document.getElementById('weather-widget').textContent = '暂无法获取天气'; - 不要用
alert——打断操作流，移动端还会被浏览器拦截
额外提醒：OpenWeather 的图标 URL 是动态的，格式为 https://openweathermap.org/img/wn/${icon}@2x.png，其中 icon 来自 data.weather[0].icon。别硬编码路径，也别漏掉 @2x 后缀，否则高清屏显示模糊。
