第三方天气插件无法直接通过标签引入，必须使用api key发起认证请求或嵌入iframe；明文暴露key有风险，推荐服务端代理或用openweathermap官方widget。
第三方天气插件通常不支持直接在 index.html 里用 <script></script> 标签硬引入
绝大多数现代天气插件（比如 WeatherAPI、OpenWeatherMap 的官方 SDK 或社区封装如 weather-widget-js）要求你先获取 API key，再通过 JavaScript 发起带认证的 HTTP 请求。它们不是纯前端静态资源——没有一个 weather.min.js 下载后 <script src="..."></script> 就能跑起来。
常见错误现象：401 Unauthorized、CORS error、控制台报 Failed to fetch，本质是跨域或密钥缺失。
- 必须在服务端代理请求，或使用支持 CORS 的公开 endpoint（极少）
- 浏览器直连 OpenWeatherMap 等接口需配置
appid查询参数，且部分功能（如地理编码）默认禁用 CORS - 很多“一键嵌入”的天气小部件（如 Weather.com 提供的 iframe 版本）其实绕过了 JS 跨域限制，但无法自定义样式和行为
想快速展示天气？优先用 iframe 嵌入已托管的天气组件
这是最稳妥、零配置的方式，适合非交互型展示（例如页脚放一个城市当前温度）。
以 OpenWeatherMap 为例，它提供免费的 widget：
<iframe width="100%" height="100" src="https://www.openweathermap.org/weather-widget/5768937?vertical=true&lang=zh_cn&units=metric" scrolling="no" frameborder="0" allowtransparency="true"></iframe>
-
5768937是城市 ID（可在 OpenWeatherMap 官网搜城市查到） -
units=metric控制温度单位，可选imperial或standard - 注意：iframe 内容由对方服务器动态渲染，你无法用 JS 拿到其中 DOM 或数据
需要 JS 控制天气数据？必须配 API key 并写 fetch 逻辑
不能跳过认证环节。OpenWeatherMap 免费 tier 允许每分钟 1000 次调用，但强制要求 appid 参数。
示例（放在 index.html 的 <script></script> 块中）：
<script>
fetch('https://api.openweathermap.org/data/2.5/weather?q=Beijing&appid=YOUR_API_KEY&units=metric')
.then(r => r.json())
.then(data => {
document.body.innerHTML += `<p>${data.name}: ${data.main.temp}°C`;
})
.catch(err => console.error('天气请求失败:', err));
</script>
-
YOUR_API_KEY必须替换成你在 OpenWeatherMap Keys 页面 生成的真实 key - 明文暴露 key 在前端有风险（他人可盗用你的额度），生产环境应走后端代理
- 中文城市名可能因编码或重名失败，推荐用城市 ID 或经纬度（
lat/lon参数）
npm 包或 GitHub 插件不能直接 script 引入？检查是否含 Node.js 依赖
看到某个 GitHub 仓库标着 “weather plugin”，先看它的 package.json 和文档：如果依赖 axios、node-fetch 或用了 import 语法，说明它是为构建流程（Webpack/Vite）设计的，不能直接丢进 index.html。
真正能裸用的 JS 库极少见，典型例外是 moment-timezone 这类纯计算库；天气类基本都需要网络请求能力 + 认证管理。
- 若该插件提供
dist/weather-widget.umd.js文件，且文档明确说 “works with <script>”，才可尝试引入</script> - 否则，运行
npx serve启一个本地服务，再按它的 README 配构建步骤，别卡在 HTML 单文件里硬搞 - 很多所谓“插件”其实是 React/Vue 组件，根本不是通用 JS
appid 或声称“免 key”的方案，要么失效，要么不可靠。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
