vue中引入天气的使用

1，先注册访问 OpenWeatherMap 网站

点击红色标注的位置是登录注册

为注册账号的人选中红色标记的位置

注册并登录后，进入你的账户页面

在账户页面中，找到“API keys”部分

你可以看到一个默认的API密钥，或者你可以创建一个新的API密钥

<script>
export default {methods: {fetchWeatherData() {const apiKey = '5c9dbef1bf937d326b96a5ff0d86165b'; // OpenWeatherMap API Keyconst city = 'Beijing'; // 默认城市，可以根据实际情况修改const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;fetch(apiUrl).then(response => response.json()).then(data => {this.weatherData.radiation = data.clouds ? data.clouds.all : '--';this.weatherData.temperature = data.main ? data.main.temp : '--';this.weatherData.humidity = data.main ? data.main.humidity : '--';this.weatherData.windSpeed = data.wind ? data.wind.speed : '--';this.weatherUpdateTime = new Date().toLocaleString();console.log('气象数据', this.weatherData);}).catch(error => {console.error('获取气象数据失败', error);});}}
}</script>