1.天气预报接口之接口验证

前言

定义

在页面的标题上，增加一个 天气显示，具体的位置如下 👇

image

接下来需要写一个天气接口的案例代码进行验证。可以让AI写一个weather_test，html页面进行验证，验证通过后，再进行接口的编码。

提示词：👇

写一个weather_test，html页面实现，获取当前城市的天气信息，并显示在页面上，文字显示。

image

接下来，在浏览器打开，weather_test.html，查看天气信息是否正常显示。

image

但是发现显示的是北京，而目前我在长沙，因此需要修改代码，让它显示我所在的城市的天气信息。

image

因此我们需要修改定位方式：通过ip地址获得城市，在通过城市获得天气信息。

image

发现天气信息显示不正常，可以使用wttr.in​ 免费获取天气信息

https://wttr.in/Beijing?format=j1

综合以上，可以写一个weather_test.html，html页面实现，获取当前城市的天气信息，并显示在页面上，文字显示。

完成weather_test.html，通过ip地址获得城市，然后使用https://wttr.in/Beijing?format=j1，Beijing替换为当前城市，获取天气信息，并显示在页面上，文字显示。

天气的返回值：
{
  "current_condition": [
    {
      "FeelsLikeC": "5",
      "FeelsLikeF": "42",
      "cloudcover": "0",
      "humidity": "24",
      "lang_zh": [
        {
          "value": "晴天"
        }
      ],
      "localObsDateTime": "2025-12-27 04:03 PM",
      "observation_time": "08:03 AM",
      "precipInches": "0.0",
      "precipMM": "0.0",
      "pressure": "1021",
      "pressureInches": "30",
      "temp_C": "6",
      "temp_F": "43",
      "uvIndex": "0",
      "visibility": "10",
      "visibilityMiles": "6",
      "weatherCode": "113",
      "weatherDesc": [
        {
          "value": "Sunny"
        }
      ],
      "weatherIconUrl": [
        {
          "value": ""
        }
      ],
      "winddir16Point": "SW",
      "winddirDegree": "217",
      "windspeedKmph": "5",
      "windspeedMiles": "3"
    }
  ]
 
}

打开weather_test.html，查看天气信息是否正常显示。 👇

image

2.天气预报接口之接口编码

前言

定义

在页面的标题上，增加一个 天气显示，具体的位置如下 👇

image

接下来结合weather_test.html，完成页面的改造

在 index.html 中，class="flex items-center space-x-4" 的组件内，增加一个天气显示（城市，天气，温度）,天气信息获得参考weather_test.html

image

启动服务，查看效果

image