用iVX和API实现的天气应用，快速，轻松！

后端

2023-11-09 12:38:59

前言

在上一篇文章中，我们完成了一个新闻应用，但数据是手动添加的，使用iVX的API功能，直接获取网络数据，以便于数据更新。

项目准备

1. 新建iVX项目

创建iVX项目，需要有账号，没有账号的小伙伴，可以先注册一个。登录账号后，点击新建项目，选择空白项目，项目名称处输入“天气应用”，点击创建即可。

2. 搭建基本页面

1）引入样式表

<link rel="stylesheet" href="style.css">

2）页面主体内容

<div id="app">
  <div class="container">
    <div class="title">天气应用</div>
    <div class="search">
      <input type="text" id="city" placeholder="输入城市名称">
      <button id="search">搜索</button>
    </div>
    <div class="weather-info">
      <div class="city-name"></div>
      <div class="weather-icon"></div>
      <div class="temperature"></div>
      <div class="weather-desc"></div>
    </div>
  </div>
</div>

3. JavaScript 脚本

// 引入必要的库
const iVX = require('@ivx/ivx');

// 创建iVX实例
const ivx = new iVX();

// 获取DOM元素
const cityInput = document.getElementById('city');
const searchButton = document.getElementById('search');
const cityName = document.querySelector('.city-name');
const weatherIcon = document.querySelector('.weather-icon');
const temperature = document.querySelector('.temperature');
const weatherDesc = document.querySelector('.weather-desc');

// 监听搜索按钮点击事件
searchButton.addEventListener('click', () => {
  // 获取城市名称
  const city = cityInput.value;

  // 调用API获取天气数据
  ivx.api.get('http://api.openweathermap.org/data/2.5/weather', {
    params: {
      q: city,
      appid: '你的API密钥',
    }
  }).then(res => {
    // 获取天气数据
    const data = res.data;

    // 设置城市名称
    cityName.textContent = data.name;

    // 设置天气图标
    weatherIcon.innerHTML = `<img src="http://openweathermap.org/img/wn/${data.weather[0].icon}@2x.png">`;

    // 设置温度
    temperature.textContent = `${Math.round(data.main.temp - 273.15)}℃`;

    // 设置天气
    weatherDesc.textContent = data.weather[0].description;
  }).catch(err => {
    alert('获取天气数据失败！');
  });
});