文章目錄

• 一、實現(xiàn)效果
• 二、天氣查詢API
• 三、微信小程序設(shè)計思路
• • 1、頁面跳轉(zhuǎn)
  • 2、獲取天氣信息
  • 3、信息顯示
• 四、程序?qū)崿F(xiàn)
• • 1、頁面跳轉(zhuǎn)功能
  • 2、獲取天氣信息
  • • 2.1、變量聲明
    • 2.2、獲取所在地區(qū)天氣信息
  • 3、天氣信息顯示
• 五、總結(jié)
• • 1、遇到的問題
  • 2、后續(xù)優(yōu)化方向
  • 3、獲取未來天氣的方法

一、實現(xiàn)效果

本人的需求比較簡單，只是一個頁面用來顯示兩個人所在地的實時天氣信息，主要信息包括所在省份、所在地區(qū)、天氣、實時氣溫、風(fēng)向、風(fēng)力、空氣濕度和發(fā)布時間，可以根據(jù)實時天氣信息顯示相應(yīng)天氣圖標，下面是實現(xiàn)效果

二、天氣查詢API

本人使用的是高德的天氣查詢API，相關(guān)文檔可點擊鏈接查看。高德的天氣查詢API是一個簡單的HTTP接口，可以根據(jù)用戶輸入的城市編碼獲取相應(yīng)地區(qū)的天氣情況，但是使用前需要申請自己的key，具體申請方法可以點擊這篇大佬的文章查看微信小程序開發(fā)——調(diào)用免費天氣api接口（高德、天氣API）

使用高德天氣查詢API是免費的，而且可查詢次數(shù)非常多，完全足夠普通的個人開發(fā)者使用。

三、微信小程序設(shè)計思路

1、頁面跳轉(zhuǎn)

看過之前文章的應(yīng)該清除，本人的小程序是分三個部分，最中間是首頁，也就是公共部分，查詢天氣是常用的功能，因此直接放在了公共部分的頁面，點擊天氣圖標可以進入上面的天氣顯示頁面，公共頁面如下圖

點擊圖中的天氣圖標即可，音樂是另外一個功能，但是由于時間有限，本文只介紹天氣查詢功能的實現(xiàn)，音樂功能后續(xù)會另外介紹，此外還有已經(jīng)基本實現(xiàn)的記事本功能，期待的小伙伴們可以關(guān)注一下專欄呀，希望大家互相學(xué)習(xí)，共同進步。

2、獲取天氣信息

跳轉(zhuǎn)到天氣頁面后需要獲取天氣信息，根據(jù)高德的開發(fā)指南，需要知道兩個人所在地區(qū)的城市編碼，城市編碼可以根據(jù)高德開發(fā)指南里的城市編碼表確定。此外，根據(jù)開發(fā)指南，不僅可以獲取實況天氣，還可以獲取預(yù)報天氣，也就是未來幾天的天氣，本人嘗試過，獲取預(yù)報天氣時只有白天天氣、夜間天氣、白天溫度、夜間溫度、白天風(fēng)力、風(fēng)向和夜間風(fēng)力、風(fēng)向這些信息，沒有發(fā)布時間、實時氣溫、空氣濕度這些信息。

3、信息顯示

正如最開始的效果圖，本人的需求只是顯示兩個人的實時天氣，所以在信息顯示方面設(shè)計的較為簡單，為了不那么單一，特地加上了兩個頭像，大家也可以根據(jù)自己的想法進行渲染修飾。

天氣圖標的話是利用wx:if函數(shù)判別當前天氣情況然后顯示的，實現(xiàn)方法較為粗暴，如果大佬有更好的方法可以評論區(qū)交流呀。

四、程序?qū)崿F(xiàn)

1、頁面跳轉(zhuǎn)功能

頁面跳轉(zhuǎn)功能實現(xiàn)較為簡單，只是插入了一張圖片，給圖片加入了點擊觸發(fā)的跳轉(zhuǎn)函數(shù)，當然還有其他方法，這里就暫時不做介紹了，后續(xù)記事本的文章會介紹另一種方法。

主頁.wxml代碼如下

<!-- 天氣 --><view class="app"><image src="../../image/weather_cover/weather.png" bindtap="weather" style="width: 133rpx; height: 129rpx; display: inline-block; box-sizing: border-box; position: relative; left: -60rpx; top: -300rpx"></image><text style="position: relative; left: -155rpx; top: -260rpx">天氣</text></view>

咳咳，本人由于能力有限，在調(diào)整圖標位置和大小時使用了微信開發(fā)工具的可視化開發(fā)功能，所以導(dǎo)致整體代碼有些長，希望大家多多指教，雖然后來發(fā)現(xiàn)可以通過在.wxss文件增加對應(yīng)的樣式可以達到這種調(diào)整大小的效果，但是在嘗試的過程中發(fā)現(xiàn)對于位置的調(diào)節(jié)并沒有達到預(yù)期效果，需要繼續(xù)學(xué)習(xí)。

頁面跳轉(zhuǎn).wxss文件代碼如下

.app{width: auto;height: auto; }

頁面跳轉(zhuǎn).ts文件代碼如下

weather:function(){wx.navigateTo({url:'/pages/weather/weather'})},

2、獲取天氣信息

獲取天氣信息需要上面申請的key和所在地的城市編碼，還是按照慣例，先上程序

2.1、變量聲明

data: {lin_weather_inform:{},},

聲明一個變量用來存儲查詢到的天氣信息。

2.2、獲取所在地區(qū)天氣信息

onLoad:function(){var that = this;// 獲取小林所在地區(qū)溫度wx.request({url: 'https://restapi.amap.com/v3/weather/weatherInfo',data:{'key': '自己申請的key', //改為自己申請的Key'city': '210911',},success:function(res){that.setData({lin_weather_inform: res.data,})}})}

在對應(yīng)位置填入自己申請的key和城市編碼即可，url的網(wǎng)址可以直接用同一個。

3、天氣信息顯示

這里先解釋一下，本人為了實現(xiàn)天氣圖標顯示并且能夠根據(jù)實況天氣顯示對應(yīng)圖標，加入了一個判斷過程，所以顯得程序非常繁雜，如果大佬有好的方法還請評論區(qū)指教呀。

天氣顯示代碼如下

<!-- 小林天氣 --> <view class="lin_weather"><image src="../../image/weather_cover/lin.png" style="width: 232rpx; height: 227rpx; display: inline-block; box-sizing: border-box; position: absolute; left: 473rpx; top: 30rpx"></image><view class="info" style="position: absolute; left: 55rpx; top: 120rpx"> 所在省份：{{lin_weather_inform.lives[0].province}}</view><view class="info" style="position: absolute; left: 55rpx; top: 190rpx"> 城市：{{lin_weather_inform.lives[0].city}}</view><view class="info" style="position: absolute; left: 55rpx; top: 250rpx">天氣：{{lin_weather_inform.lives[0].weather}}</view><!-- 天氣圖標判斷顯示 --><image class="weather_icon" wx:if="{{lin_weather_inform.lives[0].weather == ('晴')}}" src="../../image/weather_cover/fine.png" style="position: absolute; left: 220rpx; top: 250rpx"></image><image class="weather_icon" wx:if="{{lin_weather_inform.lives[0].weather == ('陰')}}" src="../../image/weather_cover/cloudy_yin.png" style="position: absolute; left: 220rpx; top: 250rpx"></image><image class="weather_icon" wx:if="{{lin_weather_inform.lives[0].weather == ('多云')}}" src="../../image/weather_cover/cloudy.png" style="position: absolute; left: 220rpx; top: 250rpx"></image><image class="weather_icon" wx:if="{{lin_weather_inform.lives[0].weather == ('雨') || lin_weather_inform.lives[0].weather == ('陣雨') || lin_weather_inform.lives[0].weather == ('小雨') || lin_weather_inform.lives[0].weather == ('中雨') || lin_weather_inform.lives[0].weather == ('大雨') || lin_weather_inform.lives[0].weather == ('暴雨')}}" src="../../image/weather_cover/rain.png" style="position: absolute; left: 220rpx; top: 250rpx"></image><image class="weather_icon" wx:if="{{lin_weather_inform.lives[0].weather == ('雷陣雨') || lin_weather_inform.lives[0].weather == ('雷陣雨并伴有冰雹')}}" src="../../image/weather_cover/thunderstorm.png" style="position: absolute; left: 220rpx; top: 250rpx"></image><image class="weather_icon" wx:if="{{lin_weather_inform.lives[0].weather == ('雪') || lin_weather_inform.lives[0].weather == ('陣雪') || lin_weather_inform.lives[0].weather == ('小雪') || lin_weather_inform.lives[0].weather == ('中雪') || lin_weather_inform.lives[0].weather == ('大雪') || lin_weather_inform.lives[0].weather == ('暴雪')}}" src="../../image/weather_cover/snow.png" style="position: absolute; left: 220rpx; top: 250rpx"></image><image class="weather_icon" wx:if="{{lin_weather_inform.lives[0].weather == ('霧')}}" src="../../image/weather_cover/fog.png" style="position: absolute; left: 220rpx; top: 250rpx"></image><view class="info" style="position: absolute; left: 55rpx; top: 310rpx"> 實時氣溫：{{lin_weather_inform.lives[0].temperature}}℃</view><view class="info" style="position: absolute; left: 55rpx; top: 370rpx"> 風(fēng)向：{{lin_weather_inform.lives[0].winddirection}}</view><view class="info" style="position: absolute; left: 55rpx; top: 430rpx"> 風(fēng)力：{{lin_weather_inform.lives[0].windpower}}</view><view class="info" style="position: absolute; left: 55rpx; top: 490rpx"> 空氣濕度：{{lin_weather_inform.lives[0].humidity}}%</view><view class="info" style="position: absolute; left: 55rpx; top: 550rpx"> 發(fā)布時間：{{lin_weather_inform.lives[0].reporttime}}</view> </view>

五、總結(jié)

1、遇到的問題

在利用上述方法實現(xiàn)天氣查詢時需要在微信小程序開發(fā)工具中不校驗合法域名這一項勾選，否則會報錯，這么設(shè)置的話雖然可以正常調(diào)試，但是對于需要發(fā)布的微信小程序會導(dǎo)致無法發(fā)布，要根本解決這個問題需要我們將網(wǎng)址添加到request的合法域名中。

2、后續(xù)優(yōu)化方向

后續(xù)可以添加一個按鈕，用來查詢未來天氣，點擊可以看到未來幾天的天氣情況。

3、獲取未來天氣的方法

首先看一下高德官方文檔的介紹

由此可以看出，只需要在wx.request中將氣象類型修改成all即可，具體程序如下

wx.request({url: 'https://restapi.amap.com/v3/weather/weatherInfo',data:{'key': '自己的key', //改為自己申請的Key'city': '210911','extensions': 'all',},success:function(res){that.setData({lin_weather_inform: res.data,})}})

總結(jié)

以上是生活随笔為你收集整理的微信小程序开发笔记—天气获取显示的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。