本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)天氣預(yù)報(bào)功能的具體代碼，供大家參考，具體內(nèi)容如下
創(chuàng)新互聯(lián)專注于于田網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠為您提供于田營銷型網(wǎng)站建設(shè)，于田網(wǎng)站制作、于田網(wǎng)頁設(shè)計(jì)、于田網(wǎng)站官網(wǎng)定制、微信平臺(tái)小程序開發(fā)服務(wù)，打造于田網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供于田網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。
這個(gè)案例是仿UC中天氣界面做的中間也有點(diǎn)出入，預(yù)留了顯示當(dāng)前城市名字和刷新圖標(biāo)的位置，自己可以寫下，也可以添加搜索城市。值得注意的是100%這個(gè)設(shè)置好像已經(jīng)不好使了，可以通過獲取設(shè)備的高度通過數(shù)據(jù)綁定設(shè)置高度。地址：weather
界面主要分為四部分：
第一部分
這里是預(yù)留的一塊可以自行添加補(bǔ)充下
第二部分：
{{currentTemperature}} {{nightAirTemperature}} / {{dayAirTemperature}} {{weather}}
第三部分：
{{aqi}} {{quality}} {{windPower}} {{windDirection}}
第四部分：
星期一 星期二 星期三 星期四 星期五 星期六 星期日 {{item.night_air_temperature}} / {{item.day_air_temperature}}
js
重慶分公司
重慶分公司
//index.js
//獲取應(yīng)用實(shí)例
var app = getApp()
Page({
data: {
//加載狀態(tài)
loadingHidden: false,
//當(dāng)前溫度
currentTemperature: '',
//夜間溫度
nightAirTemperature: '',
//白天溫度
dayAirTemperature: '',
//當(dāng)前天氣
weather: '',
//污染指數(shù)
aqi: '',
//污染程度
quality: '',
//風(fēng)力
windPower: '',
//風(fēng)向
windDirection: '',
//因?yàn)閿?shù)據(jù)返回不是數(shù)組所以要自己封裝一個(gè)數(shù)組
list: [],
height: 0,
},
onLoad: function () {
console.log('onLoad')
var that = this
//100%好像不好使 可以獲取設(shè)備高度
wx.getSystemInfo({
success: function (res) {
that.data.height = res.windowHeight;
}
})
wx.getLocation({
success: function (res) {
//通過經(jīng)緯度請(qǐng)求數(shù)據(jù)
wx.request({
//這個(gè)網(wǎng)站有免費(fèi)API趕緊收藏
url: 'http://route.showapi.com/9-5',
data: {
showapi_appid: '11697',
showapi_sign: '6c0c15c5ec61454dac5288cea2d32881',
//
from: '5',
lng: res.longitude,
lat: res.latitude,
//獲取一周情況 0是不獲取
needMoreDay: '1',
needIndex: '1'
},
success: function (res) {
console.log(res)
console.log(res.data.showapi_res_body.now.api)
that.setData({
//改變加載狀態(tài)
loadingHidden: true,
currentTemperature: res.data.showapi_res_body.now.temperature,
nightAirTemperature: res.data.showapi_res_body.f1.night_air_temperature,
dayAirTemperature: res.data.showapi_res_body.f1.day_air_temperature,
weather: res.data.showapi_res_body.now.weather,
aqi: res.data.showapi_res_body.now.aqi,
quality: res.data.showapi_res_body.now.aqiDetail.quality,
windPower: res.data.showapi_res_body.now.wind_power,
windDirection: res.data.showapi_res_body.now.wind_direction,
//拼接數(shù)組
list: [
{
'day_weather_pic': res.data.showapi_res_body.f1.day_weather_pic,
'weekday': res.data.showapi_res_body.f1.weekday,
'day_air_temperature': res.data.showapi_res_body.f1.day_air_temperature,
'night_air_temperature': res.data.showapi_res_body.f1.night_air_temperature
},
{
'day_weather_pic': res.data.showapi_res_body.f2.day_weather_pic,
'weekday': res.data.showapi_res_body.f2.weekday,
'day_air_temperature': res.data.showapi_res_body.f2.day_air_temperature,
'night_air_temperature': res.data.showapi_res_body.f2.night_air_temperature
},
{
'day_weather_pic': res.data.showapi_res_body.f3.day_weather_pic,
'weekday': res.data.showapi_res_body.f3.weekday,
'day_air_temperature': res.data.showapi_res_body.f3.day_air_temperature,
'night_air_temperature': res.data.showapi_res_body.f3.night_air_temperature
},
{
'day_weather_pic': res.data.showapi_res_body.f4.day_weather_pic,
'weekday': res.data.showapi_res_body.f4.weekday,
'day_air_temperature': res.data.showapi_res_body.f4.day_air_temperature,
'night_air_temperature': res.data.showapi_res_body.f4.night_air_temperature
},
{
'day_weather_pic': res.data.showapi_res_body.f5.day_weather_pic,
'weekday': res.data.showapi_res_body.f5.weekday,
'day_air_temperature': res.data.showapi_res_body.f5.day_air_temperature,
'night_air_temperature': res.data.showapi_res_body.f5.night_air_temperature
},
{
'day_weather_pic': res.data.showapi_res_body.f6.day_weather_pic,
'weekday': res.data.showapi_res_body.f6.weekday,
'day_air_temperature': res.data.showapi_res_body.f6.day_air_temperature,
'night_air_temperature': res.data.showapi_res_body.f6.night_air_temperature
},
{
'day_weather_pic': res.data.showapi_res_body.f7.day_weather_pic,
'weekday': res.data.showapi_res_body.f7.weekday,
'day_air_temperature': res.data.showapi_res_body.f7.day_air_temperature,
'night_air_temperature': res.data.showapi_res_body.f7.night_air_temperature
}
]
})
}
})
}
})
}
})
wxss
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.newTopView {
display: flex;
flex-direction: row;
justify-content: space-between;
}
/* 頭部樣式上半部分*/
.topView {
flex-direction: column;
align-self: center;
margin-top: -450rpx;
}
/*當(dāng)前度數(shù)樣式*/
.degreeView {
flex-direction: row;
position: relative;
}
/*當(dāng)前溫度度數(shù)圖標(biāo)*/
.circle {
width: 35rpx;
height: 35rpx;
position: absolute;
left: 130rpx;
}
/*當(dāng)前度數(shù)數(shù)組*/
.degree {
color: white;
font-size: 130rpx
}
/*詳細(xì)View樣式*/
.detailInfoView {
flex-direction: row;
}
/*當(dāng)前最高和最低溫度度數(shù)圖標(biāo)*/
.detailInfoCircle {
width: 20rpx;
height: 20rpx;
position: absolute;
left: 30rpx;
}
/*當(dāng)前度數(shù)數(shù)組*/
.detailInfoDegree {
color: white;
font-size: 30rpx
}
/*斜線*/
.detailInfoLine {
color: white;
margin-left: 15rpx;
font-size: 30rpx;
}
/*比如陰天 晴天，暴雨*/
.detailInfoName {
font-size: 30rpx;
color: white;
margin-left: 20rpx;
align-self: center
}
/*中間view樣式*/
.centerView {
display: flex;
flex-direction: row;
margin-top: -550rpx;
justify-content: center;
align-items: center;
}
/*中間view分為兩個(gè)view*/
.centerItem {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
/*Item中圖片樣式*/
.centerItemImage {
width: 25rpx;
height: 25rpx;
}
/*文字樣式*/
.centerItemText {
font-size: 28rpx;
color: white;
}
/*底部view樣式*/
.bottomView {
margin-top: -200rpx;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
.bottomItemView {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 200rpx;
}
/*最近七天樣式*/
.bottomImage {
width: 70rpx;
height: 70rpx;
}
.bottomText {
font-size: 28rpx;
color: white;
}PS：
開發(fā)者工具無法顯示問題：是因?yàn)閂iew沒有獲得高度，默認(rèn)個(gè)高度或者直接修改wxml中height高度即可。
另外，本站在線工具小程序上有一款天氣查詢工具，還添加了城市選擇的功能，感興趣的朋友可以掃描如下小程序碼查看：
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
