一直以来，我都想做点“既能练技术、又能自用”的小工具。既然每天都要查天气，那干脆自己动手写一个“天气预报小组件”吧！从获取城市天气，到用 SVG 画温度曲线，再到界面美化、异步数据处理，最后甚至还尝试加入定位和空气质量功能，这一过程让我在实战中重新认识了前端的强大。

这篇文章就带你完整回顾我实现这个小组件的全过程。没有过度分点，也没有冰冷的技术堆砌，有的只是一个开发者从构想到落地的细致旅程。

想做点有趣的，那就从天气说起

最开始我想做个能展示今天气温的小组件，结果写着写着变成了一个可以：

  • 输入城市名实时获取天气；
  • 显示接下来的三天预报；
  • 用 SVG 曲线画出温度变化；
  • 背景图还能随天气自动变化；
  • 空气质量也能一并显示……

我不是冲着“卷功能”去的，而是在实现过程中不断有了新灵感，比如画温度曲线那一块，原本是想用 ECharts，但觉得太重，就转向用 SVG 自己画，结果收获不小。

一切从架构开始

我的项目采用纯前端实现，核心技术选用 HTML + CSS + JavaScript，数据源来自 OpenWeatherMap 免费 API。整个系统的逻辑结构非常清晰，用一张流程图描述如下：

天气预报小组件制作_CSS

天气数据的魔法来自哪里？

当然得感谢 OpenWeatherMap 提供的 API，免费版就能满足我们基本需求：

  • 实时天气：https://api.openweathermap.org/data/2.5/weather
  • 天气预报(3 日)：https://api.openweathermap.org/data/2.5/forecast
  • 空气质量：https://api.openweathermap.org/data/2.5/air_pollution

你需要去官网注册个账号拿到 API Key，然后在 fetch 请求里拼接这个 Key 就能调用了。

例如，我的请求写成这样：

const apiKey = '你的API_KEY';
const city = 'Shanghai';
const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric&lang=zh_cn`;

fetch(url)
  .then(response => response.json())
  .then(data => renderWeather(data))
  .catch(error => console.error('获取天气失败:', error));
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.

默认温度是 Kelvin，我加了 units=metric 参数改为摄氏度；为了支持中文，把 lang=zh_cn 加进去，完美！

UI 设计：不仅要能用，还得好看

做小组件最大的痛点是不能丑。于是我参考了一些天气 App 的界面风格，最后决定用卡片式设计。主要部分包括：

  • 城市搜索输入框；
  • 当前天气展示区域(图标、温度、描述)；
  • 三日天气预报列表；
  • SVG 温度曲线；
  • 空气质量提示条；
  • 背景自动切换(晴、雨、雪等)。

基础 HTML 结构如下：

<div class="weather-widget">
  <input type="text" id="cityInput" placeholder="请输入城市名">
  <div class="weather-info">
    <div id="current-weather"></div>
    <svg id="temperature-chart"></svg>
    <div id="forecast"></div>
    <div id="aqi"></div>
  </div>
</div>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.

而 CSS 方面，我使用了现代设计语言：大圆角、阴影卡片、渐变背景、流畅动画等元素。像下面这段就是搜索框的样式：

#cityInput {
  width: 90%;
  padding: 12px 16px;
  font-size: 1rem;
  border: none;
  border-r