文章目錄

• 一、實(shí)現(xiàn)效果
• 二、天氣查詢API
• 三、微信小程序設(shè)計(jì)思路
• • 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、獲取未來天氣的方法

一、實(shí)現(xiàn)效果

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

二、天氣查詢API

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

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

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

1、頁面跳轉(zhuǎn)

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

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

2、獲取天氣信息

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

3、信息顯示

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

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

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

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

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

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

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

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

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

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

2、獲取天氣信息

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

2.1、變量聲明

data: {lin_weather_inform:{},},

聲明一個(gè)變量用來存儲(chǔ)查詢到的天氣信息。

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

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

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

3、天氣信息顯示

這里先解釋一下，本人為了實(shí)現(xiàn)天氣圖標(biāo)顯示并且能夠根據(jù)實(shí)況天氣顯示對(duì)應(yīng)圖標(biāo)，加入了一個(gè)判斷過程，所以顯得程序非常繁雜，如果大佬有好的方法還請(qǐng)?jiān)u論區(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><!-- 天氣圖標(biāo)判斷顯示 --><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"> 實(shí)時(shí)氣溫：{{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ā)布時(shí)間：{{lin_weather_inform.lives[0].reporttime}}</view> </view>

五、總結(jié)

1、遇到的問題

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

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

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

3、獲取未來天氣的方法

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

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

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

總結(jié)

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

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