我的第一个天气应用程序

使用 API 集成构建简单的天气应用程序

随着我继续学习和提高编码技能，我决定使用 API 来构建一个基本的天气应用程序来获取实时数据。这个项目帮助我了解了如何与 API 交互、处理异步操作以及动态更新用户界面。在本博客中，我将引导您完成用于创建应用程序的代码。

---

项目概况

天气应用程序获取给定位置的天气数据并显示当前天气和 3 天的天气预报。它使用 Wea​​therAPI 收集数据，并由 JavaScript 处理该功能。

---

主要特点

1. 位置搜索：用户可以输入城市名称来获取天气数据。

2. 当前天气：显示当前温度、天气状况等。

3. 天气预报：显示未来 3 天的天气预报。

让我们看一下使这个应用程序运行的代码的关键部分。

---

1. 使用 API 获取天气数据

第一步是从 WeatherAPI 获取天气数据。以下是我如何设置函数来处理 API 调用：

async function searchWeather(term) {
    var response = await fetch(`https://api.weatherapi.com/v1/forecast.json?key=7d77b96c972b4d119a3151101212704&q=${term}&days=3`);
    if (response.ok && response.status !== 400) {
        let weatherData = await response.json();
        displayCurrent(weatherData.location, weatherData.current);
        displayForecast(weatherData.forecast.forecastday);
    }
}

该函数使用 fetch() 向 WeatherAPI 发出异步请求。它检索当前天气和 3 天的天气预报，然后将该数据传递给 displayCurrent() 和 displayForecast() 函数。

---

1. 处理用户输入

应用程序通过搜索框监听用户输入。当用户输入某个位置（例如“伦敦”）时，它会触发天气搜索：

document.getElementById('search').addEventListener('keyup', function (event) {
    searchWeather(event.target.value);
});

另外，我添加了一个按钮，点击时触发搜索：

document.getElementById('searchBtn').addEventListener('click', function() {
    let searchTerm = document.getElementById('search').value;
    searchWeather(searchTerm);
});

这允许用户在搜索框中键入或单击搜索按钮来获取天气数据。

---

1. 显示当前天气

获取数据后，displayCurrent() 函数负责在页面上显示当前天气详细信息。其工作原理如下：

函数displayCurrent（位置，当前天气）{
    如果（当前天气）{
        让lastUpdatedDate = new Date(currentWeather.last_updated);
        让cardHTML = `
            <div>



<p>此函数会生成一张卡片，显示当前温度、天气状况以及风速和湿度等其他详细信息。它通过将生成的 HTML 插入 DOM 来动态更新页面。</p>


<hr>

<ol>
<li>显示 3 天天气预报</li>
</ol>

<p>接下来，我显示未来三天的天气预报。这是由 displayForecast() 函数处理的：<br>
</p>
<pre class="brush:php;toolbar:false">函数displayForecast(forecastData) {
    让 ForecastHTML = '';
    for (让 i = 1; i 



<p>此函数循环预测数据并生成未来两天的卡片，显示最高和最低温度、天气状况和图标。</p>


<hr>

<p>结论</p>

<p>构建这个天气应用程序对我来说是一次很好的练习，因为我学会了如何与 API 交互、处理 JSON 数据以及动态更新网页。该项目帮助我巩固了异步 JavaScript、DOM 操作和事件处理方面的知识。</p>

<p>如果您刚刚开始使用 JavaScript 和 API，这款天气应用程序是练习技能的简单而强大的方法。您可以通过添加更多功能（例如错误处理、更详细的预测，甚至 UI 的深色模式）来扩展此项目。</p>


<hr>

<p>请随意尝试代码并调整它以满足您的需求。如果您有任何问题或建议请告诉我！</p>


          

以上是我的第一个天气应用程序的详细内容。更多信息请关注PHP中文网其他相关文章！