零注册零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。如果你感兴趣,可以关注一下这个项目的仓库更新。

直达网址:https://nimbus-api-gxuc.onrender.com

类似文章