我的第一个天气应用小程序

构建一个简单的天气应用程序，然后集成API

随着我在不断学习和提高我的编程技能，我决定使用API来获取实时数据，构建一个基本的天气应用。这个项目让我了解了如何与API进行交互，处理异步操作，并动态更新用户界面。在这篇博文中，我将带你们浏览我用来开发这个天气应用的代码。

此处内容省略

项目简介,

天气应用为指定地点获取数据，并显示当前天气及3天预报。它通过WeatherAPI获取数据，而JavaScript负责处理这些功能。

此处省略内容

主要功能

1. 地点查询：用户可以输入城市名来获取天气信息。

2. 现在天气：显示现在的温度、天气情况和其他相关信息。

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

我们来看看让这个应用程序运作的关键代码部分。

此处为原文的分隔符，表示章节划分或内容预留。

使用 API 查天气

步骤一是从WeatherAPI获取天气数据。这是第一步。这是我设置用来处理API调用的函数的方法。

    async function searchWeather(term) {
        var response = await fetch(`https://api.weatherapi.com/v1/forecast.json?key=7d77b96c972b4d119a3151101212704&q=${term}&days=3`);
        // 判断响应是否成功且状态码不是400
        if (response.ok && response.status !== 400) {
            let weatherData = await response.json();
            // 显示当前天气信息
            displayCurrent(weatherData.location, weatherData.current);
            // 显示未来三天的天气预报
            displayForecast(weatherData.forecast.forecastday);
        }
    }

进入全屏 退出全屏

此功能使用 fetch() 发起一个异步请求，向 WeatherAPI 获取当前天气情况以及未来三天的天气预报，并将其传递给 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);
    });

进入全屏。退出全屏。

这可以让用户通过在搜索框中输入内容或者点击搜索按钮来获取天气信息。

查看当前天气情况

一旦数据获取完毕，这个 displayCurrent() 函数会负责在页面上展示当前的天气信息。这是它的工作方式大致如下：

    function displayCurrent(location, currentWeather) {
        if (currentWeather) {
            let lastUpdatedDate = new Date(currentWeather.last_updated);
            let cardHTML = `
                <div id="todayCard">
                    <div class="card">
                        <div class="card-header d-flex justify-content-between px-4 text-grey">
                            <span>${days[lastUpdatedDate.getDay()]}</span>
                            <span>${monthNames[lastUpdatedDate.getMonth()]} ${lastUpdatedDate.getDate()}</span>
                        </div>
                        <div class="card-body">
                            <h5 class="card-title location">${location.name}</h5>
                            <div class="degree">
                                <div class="num px-2">${currentWeather.temp_c}<sup>o</sup>C</div>
                                <div class="forecast-ico">
                                    <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https:${currentWeather.condition.icon}" alt="" width="90px">
                                </div>
                            </div>
                            <div class="current-info d-flex">
                                <span><i class="fa-solid fa-umbrella"> </i> 20%</span>
                                <span><i class="fa-solid fa-wind"></i> ${currentWeather.gust_kph} 公里/小时</span>
                                <span><i class="fa-regular fa-compass"></i>西方</span>
                            </div>
                        </div>
                    </div>
                </div>
            `;
            document.getElementById('day').innerHTML = cardHTML;
        }
    }

全屏，退出全屏

此功能生成一个卡片，显示当前的温度和天气状况，以及其他相关信息如风速和湿度。它通过将生成的HTML插入到DOM中来实时更新页面。

显示的是未来三天的天气预报

接下来，我会展示未来三天的天气预报，这通过 displayForecast() 函数来实现：

function displayForecast(forecastData) {
    let forecastHTML = '';
    for (let i = 1; i < forecastData.length; i++) {
        forecastHTML += `
            <div class="col-lg-6 p-0">
                <div class="text-center forecastCard">
                    <div class="card w-100">
                        <div class="card-header d-flex justify-content-center px-4 text-grey">
                            <span>${days[new Date(forecastData[i].date).getDay()]}</span>
                        </div>
                        <div class="card-body d-flex flex-column align-items-center justify-content-center">
                            <div class="degree">
                                <div>
                                    <div class="forecast-ico">
                                        <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="${forecastData[i].day.condition.icon}" alt="">
                                    </div>
                                    <h1>${forecastData[i].day.maxtemp_c}<sup>o</sup>摄氏度</h1>
                                    <h4 class="text-muted">${forecastData[i].day.mintemp_c}<sup>o</sup>摄氏度</h4>
                                </div>
                            </div>
                            <div class="custom text-primary">${forecastData[i].day.condition.text}</div>  
                        </div>
                    </div>
                </div>
            </div>
        `;
    }
    document.getElementById('next').innerHTML = forecastHTML;
}

点击进入全屏 点击退出全屏

此功能会循环处理预报数据，并为未来的两天生成卡片，显示最高及最低温度、天气状况及其图标，为每一天的数据生成卡片。

结论:

这对我来说是个很好的学习过程，我学会了如何使用API接口、解析JSON数据以及动态更新网页内容。这个项目加深了我对异步的JavaScript、操作DOM和处理事件的理解。

如果你是刚开始接触JavaScript和API，这个天气应用是一个简单却强大的练习技能的好工具。你可以通过添加更多功能来扩展这个应用，比如错误处理、更详细的预报，甚至是暗模式，这样更符合中文表达习惯。

您可以随意尝试并根据需要调整代码。如果您有任何问题或建议，请随时告诉我！