柚子快報(bào)邀請(qǐng)碼778899分享：天氣查詢(xún)小程序
柚子快報(bào)邀請(qǐng)碼778899分享：天氣查詢(xún)小程序
2024年夏季《移動(dòng)軟件開(kāi)發(fā)》實(shí)驗(yàn)報(bào)告
? ? ? ? ?課程名稱(chēng)：中國(guó)海洋大學(xué)24夏 《移動(dòng)軟件開(kāi)發(fā)》
實(shí)驗(yàn)2：天氣查詢(xún)小程序? ? ? ? ? ? ?
一、實(shí)驗(yàn)?zāi)繕?biāo)
1、學(xué)習(xí)使用快速啟動(dòng)模板創(chuàng)建小程序的方法；
2、學(xué)習(xí)不使用模板手動(dòng)創(chuàng)建小程序的方法。
二、實(shí)驗(yàn)步驟
1.預(yù)先準(zhǔn)備
(1)首先登陸和風(fēng)天氣官網(wǎng)https://www.qweather.com進(jìn)行注冊(cè)，選擇’免費(fèi)用戶(hù)’后訪問(wèn)*https://console.qweather.com/my/service *查看賬號(hào)信息，在進(jìn)入控制臺(tái)創(chuàng)建一個(gè)新項(xiàng)目，就可申請(qǐng)得到個(gè)人認(rèn)證key
點(diǎn)擊查看就能得到用戶(hù)key 免費(fèi)用戶(hù)調(diào)用接口語(yǔ)法格式：https://devapi.qweather.com/v7/weather/now?location=xxx&key=xxx 其中的location和key分別對(duì)應(yīng)城市區(qū)域id號(hào)碼以及剛剛申請(qǐng)的個(gè)人用戶(hù)key
(2)通過(guò)mp.weixin.qq.com進(jìn)入小程序開(kāi)發(fā)者網(wǎng)頁(yè)，在開(kāi)發(fā)管理模塊添加服務(wù)器域名，這里我們?cè)趓equest合法域名處添加如下兩個(gè)域名
https://devapi.qweather.com https://geoapi.qweather.com
(3)下載附件中提供的天氣圖標(biāo)壓縮包并解壓 https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/demo2_file.zip
2.創(chuàng)建小程序項(xiàng)目
(1)刪除utils文件夾及其內(nèi)部所有內(nèi)容。 (2)刪除 pages文件夾下的 logs目錄及其內(nèi)部所有內(nèi)容。 (3)刪除index. wxml和 index. wxss中的全部代碼。 (4)刪除 index. js中的全部代碼,并且輸入關(guān)鍵詞“page”找到第二個(gè)選項(xiàng)按回車(chē)鍵讓其自動(dòng)補(bǔ)全函數(shù)。(5)刪除app. wxss中的全部代碼。(6)刪除 app.js 中的全部代碼,并且輸入關(guān)鍵詞“app”找到第一個(gè)選項(xiàng)按回車(chē)鍵讓其自動(dòng)補(bǔ)全函數(shù)。
3.對(duì)小程序的視圖進(jìn)行設(shè)計(jì)
app.json文件代碼如下
{
"pages": [
"pages/index/index"
],
"window": {
"navigationBarBackgroundColor": "#3883FA",
"navigationBarTitleText": "今日天氣"
}
}
WXML頁(yè)面設(shè)計(jì)代碼如下
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;
}
如此便可以實(shí)現(xiàn)初步區(qū)域外觀規(guī)劃
4.獲取實(shí)時(shí)天氣數(shù)據(jù)
?這里我們使用自定義函數(shù)getWeather獲取實(shí)時(shí)天氣數(shù)據(jù)，要注意的是，由于和風(fēng)氣象版本更新后以前的url中的location不在支持中文或者拼音輸入，必須要通過(guò)其所規(guī)定的id序列號(hào)才能進(jìn)行查詢(xún)，因此通過(guò)閱讀官方手冊(cè)https://dev.qweather.com/docs/api/geoapi/city-lookup ,可以發(fā)現(xiàn)我們可以通過(guò)https://geoapi.qweather.com/v2/city/lookup 進(jìn)行中文查詢(xún)，得到的返回結(jié)果中可以獲得該地區(qū)的id，再將該id作為前面getWeather的location參數(shù)傳遞，即可查詢(xún)得到實(shí)時(shí)天氣。
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.實(shí)驗(yàn)結(jié)果
三、程序運(yùn)行結(jié)果
四、問(wèn)題總結(jié)與體會(huì)
?在本次實(shí)驗(yàn)中按照實(shí)驗(yàn)方案在調(diào)整外觀布局的時(shí)候不會(huì)遇見(jiàn)阻礙，但在進(jìn)行實(shí)時(shí)數(shù)據(jù)獲取的時(shí)候會(huì)因?yàn)樵璾rl已經(jīng)失效的原因?qū)е聼o(wú)法根據(jù)教程做出預(yù)期結(jié)果。在網(wǎng)上查詢(xún)資料以及翻閱和風(fēng)氣象團(tuán)隊(duì)提供的建議手冊(cè)后對(duì)其中的函數(shù)進(jìn)行了調(diào)整，通過(guò)新增了一個(gè)getID函數(shù)先獲取區(qū)域id在通過(guò)原方法查詢(xún)天氣。達(dá)成了最終實(shí)驗(yàn)?zāi)康摹?通過(guò)這次實(shí)驗(yàn)，熟練了微信小程序的開(kāi)發(fā)過(guò)程和框架結(jié)構(gòu)，對(duì)于各種工具的使用更有經(jīng)驗(yàn)，同時(shí)還理解了版本更替，技術(shù)革新導(dǎo)致的升級(jí)迭代是永無(wú)止境的，還需通過(guò)后續(xù)實(shí)驗(yàn)不斷磨練技術(shù)。
柚子快報(bào)邀請(qǐng)碼778899分享：天氣查詢(xún)小程序
精彩文章
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點(diǎn)和立場(chǎng)。
轉(zhuǎn)載請(qǐng)注明，如有侵權(quán)，聯(lián)系刪除。
Zalando鞋履風(fēng)尚
