零注册零Key零费用:给个人网站加天气,一条fetch就搞定
你是不是也遇到过这种情况:只是想给个人博客或作品集加个简单的天气显示,却被各种开放平台拦在门外?
注册账号、验证邮箱、生成 API Key、阅读额度限制、担心免费到期……为了几行天气数据,这套流程比写代码还累。
今天介绍的 Nimbus,就是专门来“掀桌”的。
老办法:为了一个天气 Widget,大动干戈
过去如果你想接入天气数据,通常绕不开这些步骤:
- 先注册一个开发者账号
- 验证邮箱
- 去后台生成一串 API Key
- 把 Key 贴进代码里
- 开始担心调用次数会不会超
- 过几个月收到邮件:“您的免费额度即将到期”
如果只是一个放在个人网站角落的小挂件,这套组合拳是不是太重了?
新办法:一个 fetch,直接拿走
Nimbus 是一个完全开放的公共接口。不需要注册,不需要 Key,不需要请求头,浏览器里直接发请求就行。
// 直接发起请求,不需要任何 API Key 或请求头
fetch('https://nimbus-api-gxuc.onrender.com/api/v1/weather?city=Berlin')
.then(response => response.json())
.then(data => {
// 在控制台查看返回的天气数据
console.log(data);
});
就这三行。没有 Token,没有签名,没有额度焦虑。
实战:把它嵌入你的网页
下面这段代码可以直接复制到任何 HTML 文件里。把 Berlin 换成你想查的城市,刷新页面就能看到效果。
<!-- 天气挂件容器 -->
<div id="weather-widget">
<p>Loading weather...</p>
</div>
<script>
// 请求柏林的天气数据,无需 API Key
fetch('https://nimbus-api-gxuc.onrender.com/api/v1/weather?city=Berlin')
.then(res => res.json())
.then(data => {
// 拼接温度、天气描述、风速和湿度信息
const weatherHtml = data.temp_celsius + '°C • ' + data.description +
'<br>Wind: ' + data.wind_speed_kmh + ' km/h • Humidity: ' + data.humidity_percent + '%';
// 将生成的 HTML 插入到页面中的 weather-widget 容器
document.getElementById('weather-widget').innerHTML =
'<strong>' + data.location + '</strong><br>' + weatherHtml;
})
.catch(function() {
// 请求失败时的兜底提示
document.getElementById('weather-widget').innerHTML =
'<p>Weather not available right now</p>';
});
</script>
city 参数换成 Beijing、Shanghai、Tokyo 都可以试。接口会返回温度、天气描述、风速和湿度等常用字段,直接拿来拼 HTML 就行。
为什么做这样一个接口?
作者的原话是:受够了那些每隔半年就改一次定价的封闭 API。
Nimbus 是开源的,代码在 GitHub 上公开,你可以随时翻看、Fork 或者自己部署一份。作者说,托管这样一个天气端点的成本很低,他宁可自己贴点钱,也不想设付费墙。对个人开发者和小项目来说,这种“拿来就用”的体验非常舒服。
现在就能试
打开你的终端,复制下面这行命令:
# 直接在终端请求伦敦的天气,无需任何认证
curl https://nimbus-api-gxuc.onrender.com/api/v1/weather?city=London
回车,你会立刻收到一段 JSON 数据。没有任何验证,零门槛。
小预告: 作者还在做地理编码接口,到时候可以直接把城市名转成经纬度,同样不需要额外的 API Key。如果你感兴趣,可以关注一下这个项目的仓库更新。
