开发一个微信小程序(4)：查询天气获取某个城市的实时天气

从这一篇开始介绍如何实现一个查询天气小程序

 

准备工作：

1、申请和风天气开发者账号，并创建一个 Web API 类型的应用 (要调用和风天气 api 获取天气，关于如何使用和风天气api需要自行查阅文档，传送门：和风天气开发平台)；

2、下载和风天气图标 (查询到天气时，前端展示对应天气图标，传送门：和风天气图标)；

3、申请腾讯位置服务开发者账号(主要用于获取用户当前所在城市，传送门：腾讯位置服务开发指南)

tips：在试验前，一定要把相关接口的域名添加到小程序的request合法域名中，不然是调不通的！！

 

本篇来实现一个基础功能：在输入框中输入城市，点击查询，显示实时天气，如下

 

拆解一下步骤：

1、前端写一个输入框、一个按钮；

2、按钮绑定一个事件，当点击按钮触发查询请求，把输入框输入的参数传给后端，后端调用实时天气查询接口，返回结果；

3、前端渲染返回的数据；

下面是具体的步骤

1、前端定义输入框、查询按钮

打开 pages/weather/weather.wxml

定义一个输入框和一个按钮：

其中输入框绑定了一个名为 getInputValue 的方法，这个方法的作用是获取输入框内输入的值

按钮我是用view标签表示的，没有用常规的button标签，它绑定了 queryWeather 方法

<!--pages/weather/weather.wxml-->
<view class='search'>
    <view class="search-container">
      <input type="text" placeholder="请输入城市名" placeholder-class='placeho' bindinput="getInutValue" value=""/>
    </view>
    <view class="search-button" bindtap="queryWeather">
      <!-- <view><text>点击</text></view> -->
      <view><image src="../../images/operation.png"></image></view>
    </view>
</view>

2、编写 getInputValue 方法

打开 pages/weather/weather.js

先在data中定义一些参数

  /**
   * 页面的初始数据
   */
  data: {
    key: '79ab60ad0xxxxxxxxxx7a937',
    city: '',
    weather_now: {},
    future: {},
    twenty_four: {},
    indices: {},
    flag: false,
    latitude_value: 1,
    longitude_value: 12
  },

定义 getInputValue 方法，它的作用是获取输入框输入的值，拿到前端输入的城市后，后续查询城市对应的locationid时需要传入它

  //获取输入框的值
  getInputValue(e) {
    console.log(e);
    this.setData({
      city: e.detail.value  //获取页面input输入框输入的值，并传给city
    })
    console.log(this.data.city);
  },

3、编写 weather_now 方法

因为「查询天气」和「查询天气指数」的接口需要传入城市的locationid，所以在这个方法中需要先后调3个接口：

先调用获取城市 locationid 的接口，再调用「获取实时天气」的接口和「获取天气指数」的接口

  //调用和风天气查询now天气接口
  weather_now() {
    //获取locationid
    wx.request({
      url: 'https://geoapi.qweather.com/v2/city/lookup', 
      method: 'GET',
      data: {
        key: this.data.key,
        location: this.data.city  //这个就是前端输入的城市名
      },
      success: (res) => {
        console.log(res);
        // return res.data.location[0].id
        this.setData({
          location: res.data.location[0].id  //提取返回结果中的id
        })

        // 获取locationid后，查询当前天气，在success中发起请求
        var location_id = this.data.location;
        // console.log(location_id);
        wx.request({
          url: 'https://devapi.qweather.com/v7/weather/now', 
          method: 'GET',
          data: {
            key: this.data.key,
            location: location_id
          },
          success: (res) => {
            console.log(res);
            this.setData({
              weather_now: res.data.now,
              flag: true
            })
          },
        });
          // 获取locationid后，查询天气指数
          wx.request({
            url: 'https://devapi.qweather.com/v7/indices/1d', 
            method: 'GET',
            data: {
              key: this.data.key,
              location: location_id,
              type: 3
            },
            success: (res) => {
              console.log(res);
              this.setData({
                indices: res.data.daily,
                flag: true
              })
            },


          });
      },
    })
  },

编写queryWeather方法

  //发起查询请求
  queryWeather() {
    this.weather_now()
  },

 4、前端渲染数据

主要是把查询到的天气和天气指数展示出来

我提前下载好了和风天气图标，把它放到项目中，如下

因为天气查询接口的返回内容中包含天气图标代码，只需要引用即可

<!--pages/weather/weather.wxml-->
<view class='search'>
    <view class="search-container">
      <input type="text" placeholder="请输入城市名" placeholder-class='placeho' bindinput="getInputValue" value=""/>
    </view>
    <view class="search-button" bindtap="queryWeather">
      <!-- <view><text>点击</text></view> -->
      <view><image src="../../images/operation.png"></image></view>
    </view>
</view>

<block wx:if="{{flag}}">
  <view class="title"><text>实时天气</text> </view>
  <view class="top-box">
    <view class="weather-image">
      <view class="">
        <image wx:if="{{weather_now.icon}}" src="../../QWeather-Icons-1.1.1/icons/{{weather_now.icon}}.svg"></image>
      </view>
      <view class="weather-text">
        <text class="temp" space="nbsp">{{weather_now.temp}} ℃</text>
        <text class="text">{{weather_now.text}}</text>
        <text class="wind">{{weather_now.windDir}}{{weather_now.windScale}}级</text>
      </view>
    </view>
    <view class="indices">{{indices[0].text}}</view>  <!-- 天气指数 -->
  <view>

 这样就完成了天气查询的基本功能