微信小程序实现一个天气预报应用程序

<view class="container">
  <view class="header">
    <input class="input" placeholder="请输入城市名称" bindinput="onInput" value="{{ inputValue }}" />
    <button class="button" bindtap="searchWeather">查询</button>
  </view>
  <view class="weather-info" wx:if="{{ weatherData }}">
    <view class="city">{{ weatherData.city }}</view>
    <view class="temperature">温度：{{ weatherData.temperature }}℃</view>
    <view class="weather">{{ weatherData.weather }}</view>
    <view class="wind">风向：{{ weatherData.wind }}</view>
    <view class="humidity">湿度：{{ weatherData.humidity }}</view>
  </view>
</view>

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.input {
  flex-grow: 1;
  padding: 10px;
  border: 1px solid #CCC;
  border-radius: 4px;
}
.button {
  padding: 10px 20px;
  margin-left: 10px;
  background-color: #007AFF;
  color: #FFF;
  border-radius: 4px;
}
.weather-info {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.city {
  font-size: 24px;
  margin-bottom: 10px;
}
.temperature {
  font-size: 16px;
  margin-bottom: 10px;
}
.weather {
  font-size: 16px;
  margin-bottom: 10px;
}
.wind {
  font-size: 16px;
  margin-bottom: 10px;
}
.humidity {
  font-size: 16px;
  margin-bottom: 10px;
}

Page({
  data: {
    inputValue: '', // 输入框的值
    weatherData: null // 天气数据
  },
  onInput(e) {
    this.setData({
      inputValue: e.detail.value
    });
  },
  searchWeather() {
    const that = this;
    wx.request({
      url: 'https://api.weatherapi.com/v1/current.json',
      data: {
        key: 'YOUR_API_KEY',
        q: this.data.inputValue,
        aqi: 'no'
      },
      success(res) {
        const weather = res.data.current;
        that.setData({
          weatherData: {
            city: res.data.location.name,
            temperature: weather.temp_c,
            weather: weather.condition.text,
            wind: `${weather.wind_dir} ${weather.wind_kph}km/h`,
            humidity: `${weather.humidity}%`
          }
        });
      }
    });
  }
});