小程序网络API：天气查询

创建项目

创建微信小程序空项目

配置结构

1. 在pages中创建index文件夹并创建JavaScript文件index.js、数据结构的文件index.json、页面结构文件index.wxml和页面样式表文件index.wxss。

2. 在和风天气官网注册并申请API。

3. 在和风天气官网下载天气图标素材包并导入微信小程序文件中。

视图设计

设计小程序页面如图所示，用户可以自行选择城市，查询该城市的气温、天气状况、温度、气压、能见度、风向、风速和风力，并可视化显示。

代码实现

• 视图实现

  使用<picker>标签实现城市选择功能：

  <picker mode="region" bindchange="regionChange">
      <view class="head">地区选择</view>
      <view class="region">{{region[0]}} {{region[1]}} {{region[2]}}</view> 
  </picker>

  使用<text>标签实现气温及天气显示功能：

  <text class="wea">{{now.temp}}℃ {{now.text}}</text>

  使用<image>标签实现天气状况可视化功能：

  <image class="img" src="/image/QWeather-Icons-1.6.0/icons/{{now.icon}}.svg" mode="widthFix"/>

使用<view>标签实现湿度，气压等数据的显示：

  <view class="info">
    <view class="father">
      <view class="son1">湿度</view>
      <view class="son1">气压</view>
      <view class="son1">能见度</view>
    </view>
    <view class="father">
      <view class="son">{{now.humidity}} %</view>
      <view class="son">{{now.pressure}} hPa</view>
      <view class="son">{{now.vis}} km</view>
    </view>
    <view class="father">
      <view class="son1">风向</view>
      <view class="son1">风速</view>
      <view class="son1">风力</view>
    </view>
    <view class="father">
      <view class="son">{{now.windDir}}</view>
      <view class="son">{{now.windSpeed}} km/h</view>
      <view class="son">{{now.windScale}} 级</view>
    </view>
  </view>

使用flex进行布局：

.father {  
  display: flex;  
  justify-content: space-between; 
  align-items: center;  
  margin-bottom: 10px;  
}  
  
.son {  
  flex: 1; /* 使每个子元素平均分配空间 */  
  text-align: center; 
  width: 100px; 
  font-size: large;
  font-weight: 400;
  color: #000000b0;
}

• 功能实现

  在index.js中定义地区选择数组region，地区编号id，当前天气信息数组now。

  data: {
      region:['山东省','青岛市','黄岛区'],
      id: 370211000,
      now: {
        tmp: 0,
        cond_txt:'No',
        cond_code:'0',
        hum: 0,
        pressure: 0,
        vis: 0,
        wind_dir: 0,
        wind_spd: 0,
        wind_sc: 0
      }
    }

  编写regionChange（）函数，当用户选择地区时更新页面数据中的region为用户选择的地区，并调用getId方法，传入用户选择的城市名。

  regionChange: function(e) {
      this.setData({region: e.detail.value})
      this.getId(this.data.region[1])
    },

  编写getId（）函数，通过调用QWeather的地理位置查询API，根据城市名获取对应的地区ID。成功后，更新页面数据中的id为获取到的地区ID，并调用getWeather方法查询天气。

  getId: function(city) {  
      if (!city || city.length === 0) {  
          console.error('City name is required and cannot be empty.');  
          return;  
      }  
    
      city = city.slice(0, -1); // 假设这是为了去掉某些不必要的字符，确保逻辑正确  
    
      wx.request({  
          url: 'https://geoapi.qweather.com/v2/city/lookup?',  
          data: {  
              location: city,  
              key: "60ad9ce033cc4c82b9930a0ae1ac0cfb"  
          },  
          success: (res) => {  
              if (res.data && res.data.location && res.data.location.length > 0) {  
                  this.setData({ id: res.data.location[0].id });  
                  this.getWeather();  
              } else {  
                  console.error('Failed to retrieve city ID.', res.data);  
              }  
          },  
          fail: (error) => {  
              console.error('Request failed:', error);  
          }  
      });  
  }

  编写getWeather（）函数，使用QWeather的实时天气查询API，根据页面数据中的id（即地区ID）查询实时天气信息。成功后，将查询结果更新到页面数据中的now对象。

  getWeather: function() {  
      if (!this.data.id) {  
          console.error('City ID is not set. Cannot fetch weather.');  
          return;  
      }  
    
      console.log(this.data.id);  
    
      wx.request({  
          url: 'https://devapi.qweather.com/v7/weather/now',  
          data: {  
              location: this.data.id,  
              key: "60ad9ce033cc4c82b9930a0ae1ac0cfb"  
          },  
          success: (res) => {  
              if (res.data) {  
                  console.log(res.data);  
                  this.setData({ now: res.data.now });  
              } else {  
                  console.error('No weather data found.', res.data);  
              }  
          },  
          fail: (error) => {  
              console.error('Request failed:', error);  
          }  
      });  
  }

三、程序运行结果

天气查询结果：

示例1

示例2