简单天气预报应用构建指南

开发 weather app, API integration, JavaScript tutorial, OpenWeatherMap, frontend development 01-20

构建一个简单的天气预报应用程序

在这篇文章中，我们将构建一个简单的天气预报应用程序。这个应用将从天气 API 获取数据，并在用户界面上显示当前天气信息。本文旨在帮助初学者理解如何使用 API 来实现应用程序的基本功能。

功能概述

用户输入城市名称。
点击"获取天气"按钮。
显示该城市的当前天气信息，如温度、天气状况等。

所需工具

一个文本编辑器（如 VSCode）。
一个天气数据的 API Key（我们将在这里使用 OpenWeatherMap）。
Web 浏览器。

第一步：设置基本的 HTML 结构

创建一个 index.html 文件，并添加以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Weather App</title>
    <style>
        body { font-family: Arial, sans-serif; display: flex; flex-direction: column; align-items: center; }
        input { margin: 10px; }
        button { margin: 10px; }
    </style>
</head>
<body>
    <h1>Weather App</h1>
    <input type="text" id="city" placeholder="Enter city name">
    <button onclick="getWeather()">Get Weather</button>
    <div id="weather"></div>
    <script src="app.js"></script>
</body>
</html>

第二步：编写 JavaScript 代码

创建一个 app.js 文件，并添加以下代码以实现获取天气数据的功能：

async function getWeather() {
    const city = document.getElementById('city').value;
    const apiKey = 'YOUR_API_KEY'; // 替换为你的 OpenWeatherMap API key
    const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;

    try {
        const response = await fetch(apiUrl);
        if (!response.ok) {
            throw new Error('City not found');
        }
        const data = await response.json();
        displayWeather(data);
    } catch (error) {
        document.getElementById('weather').innerHTML = `<p>${error.message}</p>`;
    }
}

function displayWeather(data) {
    const weatherContainer = document.getElementById('weather');
    weatherContainer.innerHTML = `
        <h2>${data.name}</h2>
        <p>Temperature: ${data.main.temp} °C</p>
        <p>Weather: ${data.weather[0].description}</p>
    `;
}

第三步：获取 API Key

前往 OpenWeatherMap 网站（https://openweathermap.org/）注册一个帐户。
通过控制面板获取你的 API Key。
将 YOUR_API_KEY 替换为你获得的实际 API Key。

第四步：启动应用程序

确保 index.html 和 app.js 文件位于同一目录。
打开 index.html 文件以在浏览器中查看应用程序。
输入城市名称，点击"获取天气"按钮，即可查看该城市的天气信息。

结论

通过这篇文章，我们了解了如何从 API 获取数据，并在页面上显示。这个过程涉及的基本前端技术，如 HTML、CSS 和 JavaScript，为构建动态 Web 应用程序奠定了基础。希望这能够激发你进一步学习和探索前端开发的兴趣。

编辑：一起学习网