和风天气OUC——通过搜索城市快速查询天气

在小程序的首页，默认会获取用户的地理位置信息，之后将此位置信息进行转换，作为参数再去调用和风天气的API。但有时候想要看一下其它城市的天气情况，这时就可以通过在首页进行搜索来查询天气。
搜索函数的代码如下

  //搜索城市
  commitSearch (res) {
    let val = ((res.detail || {}).value || '').replace(/\s+/g, '')
    this.search(val)
  },
  clearInput () {
    this.setData({
      searchText: '',
    })
  },
  search (val, callback) {
    wx.pageScrollTo({
      scrollTop: 0,
      duration: 300,
    })
    if (val) {
      this.setData({
        located: false,
      })
      this.getWeather(val)
      //this.getHourly(val)
    }
    callback && callback()
  },

从上面的代码中可以看到，search函数中调用了一个API，名称为pageScrollTo，此API是用来实现滚动效果的，因为在首页中，除了可以搜索查询城市外，还可以通过选择城市的方式来进行查询。
后面if语句中的val的内容就是用户输入的想要搜索的城市名，如果此名不为空，那么将located设置为false，也就是说现在不使用定位信息了。后面再调用查询天气的函数，次函数具体实现如下。

  //根据获取到的地理位置，查询天气
  getWeather (location) {
    wx.request({
      url: `${globalData.requestUrl.weather}`,
      data: {
        location,
        key,
      },
      success: (res) => {
        //console.log(res)
        if (res.statusCode === 200) {
          let data = res.data.HeWeather6[0]
          if (data.status === 'ok') {
            this.clearInput()
            this.success(data, location)
          } else {
            wx.showToast({
              title: '查询失败',
              icon: 'none',
            })
          }
        }
      },
      fail: () => {
        wx.showToast({
          title: '查询失败',
          icon: 'none',
        })
      },
    })
  },

此函数调用了和风天气的网络API，通过它返回josn格式的数据。
搜索框通过input组件实现，此组件在citychose页面中，通过下面的代码调用citychose页面。

  toCitychoose () {
    wx.navigateTo({
      url: '/pages/citychoose/citychoose',
    })
  },

最终效果图如下