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

第一步创建一个项目

第二步项目目录下找到 pages/index/index.wxml 文件

<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>

第三步在 pages/index/index.wxss 文件中写入样式

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

第四步在 pages/index/index.js 文件中添加以下代码

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

项目简介

这个示例展示了一个天气预报应用程序，包括一个输入框和一个查询按钮，用于查询指定城市的实时天气信息。在下方显示了城市名称、温度、天气状况、风向和湿度。