📅 最后修改于: 2023-12-03 14:49:47.361000 🧑 作者: Mango
本文介绍如何使用 Vanilla JavaScript （即原生的、没有使用框架或库的 JavaScript）开发一个天气应用。这个应用会使用 OpenWeatherMap API 来获取当前天气信息，并将其展示给用户。
我们将首先创建一个 HTML 文件，命名为 index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>天气应用</title>
</head>
<body>
<div class="app">
<h1>天气应用</h1>
<div class="location"></div>
<div class="weather"></div>
</div>
<script src="app.js"></script>
</body>
</html>
在这个 HTML 文件中，我们创建了一个 div 元素，用于包含我们的应用。这个元素下面又分别创建了两个 div 元素，一个用于显示当前位置，一个用于显示当前天气。最后，我们引入了一个名为 app.js 的 JavaScript 文件，这将会是我们的应用逻辑所在的地方。
接下来，我们创建 app.js 文件：
const app = document.querySelector('.app');
const locationEl = app.querySelector('.location');
const weatherEl = app.querySelector('.weather');
const API_KEY = '你的 API 密钥';
const API_URL = `https://api.openweathermap.org/data/2.5/weather?appid=${API_KEY}&units=metric`;
async function getWeather(city) {
const response = await fetch(`${API_URL}&q=${city}`);
const data = await response.json();
return data;
}
async function updateWeather(city) {
const data = await getWeather(city);
locationEl.textContent = data.name;
weatherEl.textContent = `${data.main.temp} °C, ${data.weather[0].description}`;
}
updateWeather('上海');
在这个 JavaScript 文件中，我们首先获取了 HTML 中的三个元素：整个应用的根元素、用于显示位置的元素和用于显示天气的元素。然后，我们定义了两个常量 API_KEY 和 API_URL，分别用于存储 API 密钥和 API 的 URL。这里我们使用了 metric 单位，也就是摄氏度。你可以根据需要选择其他的单位。
接下来，我们创建了一个异步函数 getWeather，用于从 OpenWeatherMap API 获取数据。这个函数接收一个参数 city，表示要获取哪个城市的天气信息。函数通过 fetch 函数向 API 发送请求，然后将返回的数据转换为 JSON 格式后返回。
最后，我们定义了另一个异步函数 updateWeather，用于更新应用中的位置和天气信息。这个函数先调用 getWeather 函数获取数据，然后将位置和天气信息显示在页面上。
在代码的最后，我们调用 updateWeather 函数，传入参数 '上海'，以显示上海的天气信息。你可以将这个参数换成其他城市的名字。
以上就是一个使用 Vanilla JavaScript 的天气应用的开发过程。在这个应用中，我们使用了 HTML、CSS 和 JavaScript，通过调用 OpenWeatherMap API 来获取天气数据，并将其展示在页面上。如果你想要对这个应用进行扩展，比如显示更多天气信息、添加搜索功能等，可以参考 OpenWeatherMap API 的文档。