使用 API 集成構(gòu)建簡(jiǎn)單的天氣應(yīng)用程序

隨著我繼續(xù)學(xué)習(xí)和提高編碼技能，我決定使用 API 來構(gòu)建一個(gè)基本的天氣應(yīng)用程序來獲取實(shí)時(shí)數(shù)據(jù)。這個(gè)項(xiàng)目幫助我了解了如何與 API 交互、處理異步操作以及動(dòng)態(tài)更新用戶界面。在本博客中，我將引導(dǎo)您完成用于創(chuàng)建應(yīng)用程序的代碼。

項(xiàng)目概況

天氣應(yīng)用程序獲取給定位置的天氣數(shù)據(jù)并顯示當(dāng)前天氣和 3 天的天氣預(yù)報(bào)。它使用 Wea??therAPI 收集數(shù)據(jù)，并由 JavaScript 處理該功能。

主要特點(diǎn)

1. 位置搜索：用戶可以輸入城市名稱來獲取天氣數(shù)據(jù)。

2. 當(dāng)前天氣：顯示當(dāng)前溫度、天氣狀況等。

3. 天氣預(yù)報(bào)：顯示未來 3 天的天氣預(yù)報(bào)。

讓我們看一下使這個(gè)應(yīng)用程序運(yùn)行的代碼的關(guān)鍵部分。

1. 使用 API 獲取天氣數(shù)據(jù)

第一步是從 WeatherAPI 獲取天氣數(shù)據(jù)。以下是我如何設(shè)置函數(shù)來處理 API 調(diào)用：

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);
    }
}

該函數(shù)使用 fetch() 向 WeatherAPI 發(fā)出異步請(qǐng)求。它檢索當(dāng)前天氣和 3 天的天氣預(yù)報(bào)，然后將該數(shù)據(jù)傳遞給 displayCurrent() 和 displayForecast() 函數(shù)。

1. 處理用戶輸入

應(yīng)用程序通過搜索框監(jiān)聽用戶輸入。當(dāng)用戶輸入某個(gè)位置（例如“倫敦”）時(shí)，它會(huì)觸發(fā)天氣搜索：

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

另外，我添加了一個(gè)按鈕，點(diǎn)擊時(shí)觸發(fā)搜索：

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

這允許用戶在搜索框中鍵入或單擊搜索按鈕來獲取天氣數(shù)據(jù)。

1. 顯示當(dāng)前天氣

獲取數(shù)據(jù)后，displayCurrent() 函數(shù)負(fù)責(zé)在頁面上顯示當(dāng)前天氣詳細(xì)信息。其工作原理如下：

函數(shù)displayCurrent（位置，當(dāng)前天氣）{
    如果（當(dāng)前天氣）{
        讓lastUpdatedDate = new Date(currentWeather.last_updated);
        讓cardHTML = `
            <div>



<p>此函數(shù)會(huì)生成一張卡片，顯示當(dāng)前溫度、天氣狀況以及風(fēng)速和濕度等其他詳細(xì)信息。它通過將生成的 HTML 插入 DOM 來動(dòng)態(tài)更新頁面。</p>


<hr>

<ol>
<li>顯示 3 天天氣預(yù)報(bào)</li>
</ol>

<p>接下來，我顯示未來三天的天氣預(yù)報(bào)。這是由 displayForecast() 函數(shù)處理的：<br>
</p>
<pre class="brush:php;toolbar:false">函數(shù)displayForecast(forecastData) {
    讓 ForecastHTML = '';
    for (讓 i = 1; i 



<p>此函數(shù)循環(huán)預(yù)測(cè)數(shù)據(jù)并生成未來兩天的卡片，顯示最高和最低溫度、天氣狀況和圖標(biāo)。</p>


<hr>

<p>結(jié)論</p>

<p>構(gòu)建這個(gè)天氣應(yīng)用程序?qū)ξ襾碚f是一次很好的練習(xí)，因?yàn)槲覍W(xué)會(huì)了如何與 API 交互、處理 JSON 數(shù)據(jù)以及動(dòng)態(tài)更新網(wǎng)頁。該項(xiàng)目幫助我鞏固了異步 JavaScript、DOM 操作和事件處理方面的知識(shí)。</p>

<p>如果您剛剛開始使用 JavaScript 和 API，這款天氣應(yīng)用程序是練習(xí)技能的簡(jiǎn)單而強(qiáng)大的方法。您可以通過添加更多功能（例如錯(cuò)誤處理、更詳細(xì)的預(yù)測(cè)，甚至 UI 的深色模式）來擴(kuò)展此項(xiàng)目。</p>


<hr>

<p>請(qǐng)隨意嘗試代碼并調(diào)整它以滿足您的需求。如果您有任何問題或建議請(qǐng)告訴我！</p>