柚子快報邀請碼778899分享：天氣查詢小程序

http://yzkb.51969.com/

2024年夏季《移動軟件開發(fā)》實驗報告

? ? ? ? ?課程名稱：中國海洋大學24夏 《移動軟件開發(fā)》

實驗2：天氣查詢小程序? ? ? ? ? ? ?

一、實驗目標

1、學習使用快速啟動模板創(chuàng)建小程序的方法；

2、學習不使用模板手動創(chuàng)建小程序的方法。

二、實驗步驟

1.預先準備

(1)首先登陸和風天氣官網https://www.qweather.com進行注冊，選擇’免費用戶’后訪問*https://console.qweather.com/my/service *查看賬號信息，在進入控制臺創(chuàng)建一個新項目，就可申請得到個人認證key

點擊查看就能得到用戶key 免費用戶調用接口語法格式：https://devapi.qweather.com/v7/weather/now?location=xxx&key=xxx 其中的location和key分別對應城市區(qū)域id號碼以及剛剛申請的個人用戶key

(2)通過mp.weixin.qq.com進入小程序開發(fā)者網頁，在開發(fā)管理模塊添加服務器域名，這里我們在request合法域名處添加如下兩個域名

https://devapi.qweather.com https://geoapi.qweather.com

(3)下載附件中提供的天氣圖標壓縮包并解壓 https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/demo2_file.zip

2.創(chuàng)建小程序項目

(1)刪除utils文件夾及其內部所有內容。 (2)刪除 pages文件夾下的 logs目錄及其內部所有內容。 (3)刪除index. wxml和 index. wxss中的全部代碼。 (4)刪除 index. js中的全部代碼,并且輸入關鍵詞“page”找到第二個選項按回車鍵讓其自動補全函數。(5)刪除app. wxss中的全部代碼。(6)刪除 app.js 中的全部代碼,并且輸入關鍵詞“app”找到第一個選項按回車鍵讓其自動補全函數。

3.對小程序的視圖進行設計

app.json文件代碼如下

{

"pages": [

"pages/index/index"

],

"window": {

"navigationBarBackgroundColor": "#3883FA",

"navigationBarTitleText": "今日天氣"

}

}

WXML頁面設計代碼如下

{{region}}

{{now.temp}}℃ {{now.text}}

濕度

氣壓

能見度

{{now.humidity}}%

{{now.pressure}}hpa

{{now.vis}}km

風向

風速

風力

{{now.windDir}}

{{now.windSpeed}}km/h

{{now.windScale}}級

WXSS文件代碼如下

/**index.wxss**/

.container{

height: 100vh;

display: flex;

flex-direction: column;

align-items: center;

justify-content: space-around;

}

text{

font-size: 80rpx;

color:#3C5F81;

}

image{

width: 220rpx;

}

.detail{

width: 100%;

display: flex;

flex-direction: column;

}

.bar{

display: flex;

flex-direction: row;

margin: 20rpx 0;

}

.box{

width: 33.3%;

text-align: center;

}

如此便可以實現初步區(qū)域外觀規(guī)劃

4.獲取實時天氣數據

?這里我們使用自定義函數getWeather獲取實時天氣數據，要注意的是，由于和風氣象版本更新后以前的url中的location不在支持中文或者拼音輸入，必須要通過其所規(guī)定的id序列號才能進行查詢，因此通過閱讀官方手冊https://dev.qweather.com/docs/api/geoapi/city-lookup ,可以發(fā)現我們可以通過https://geoapi.qweather.com/v2/city/lookup 進行中文查詢，得到的返回結果中可以獲得該地區(qū)的id，再將該id作為前面getWeather的location參數傳遞，即可查詢得到實時天氣。

js文件代碼如下:

// index.js

Page({

data:{

region:['福建省','泉州市','豐澤區(qū)'],

locationID:'101230512',

now:{

temp:0,

text:'未知',

icon:'999',

humidity:0,

pressure:0,

vis:0,

windDir:0,

windSpeed:0,

windScale:0

}

},

getID: function(){

var that=this;

wx.request({

url: 'https://geoapi.qweather.com/v2/city/lookup',

data:{

location:that.data.region[2],

key:'0cd0dd568bf244d4a8888845d7af2ad3'

},

success:function(res){

that.setData({locationID:res.data.location[0].id});

}

})

},

getWeather: function(){

var that=this;

wx.request({

url: 'https://devapi.qweather.com/v7/weather/now',

data:{

location:that.data.locationID,

key:'0cd0dd568bf244d4a8888845d7af2ad3'

},

success:function(res){

that.setData({now:res.data.now});

}

})

},

regionChange: function(e){

this.setData({region: e.detail.value})

this.getID();

this.getWeather();

},

onLoad: function(options){

this.getWeather();

},

})

5.實驗結果

三、程序運行結果

四、問題總結與體會

?在本次實驗中按照實驗方案在調整外觀布局的時候不會遇見阻礙，但在進行實時數據獲取的時候會因為原url已經失效的原因導致無法根據教程做出預期結果。在網上查詢資料以及翻閱和風氣象團隊提供的建議手冊后對其中的函數進行了調整，通過新增了一個getID函數先獲取區(qū)域id在通過原方法查詢天氣。達成了最終實驗目的。?通過這次實驗，熟練了微信小程序的開發(fā)過程和框架結構，對于各種工具的使用更有經驗，同時還理解了版本更替，技術革新導致的升級迭代是永無止境的，還需通過后續(xù)實驗不斷磨練技術。

柚子快報邀請碼778899分享：天氣查詢小程序

http://yzkb.51969.com/

精彩文章