在小程序的首頁，默認會獲取用戶的地理位置信息，之后將此位置信息進行轉換，作為參數再去調用和風天氣的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',})},

最終效果圖如下

總結

以上是生活随笔為你收集整理的和风天气OUC——通过搜索城市快速查询天气的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。