和风天气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',
})
},

最终效果图如下