微信小程序實現天氣預報功能

<view class="newTopView">
<!--左邊添加當前城市名字，點擊跳轉選擇城市 右邊添加刷新當前天氣-->
</view>

 <view class="topView">
 <view class="degreeView">
 <!--當前溫度-->
 <text class="degree">{{currentTemperature}}</text>
 <!--度數圖標-->
 <image class="circle" src="../../image/circle.png"></image>
 </view>
 <view class="detailInfo">
 <view class="degreeView">
 <!--夜間天氣情況-->
 <text class="detailInfoDegree">{{nightAirTemperature}}</text>
 <image class="detailInfoCircle" src="../../image/circle.png" />
 <text class="detailInfoLine">/</text>
 <!--白天天氣-->
 <text class="detailInfoDegree">{{dayAirTemperature}}</text>
 <!-- style優先級比class高會覆蓋class中相同屬性 -->
 <image class="detailInfoCircle" style="margin-left: 57rpx; margin-right: 40rpx" src="../../image/circle.png" />
 <!-- 當前天氣名字 -->
 <text class="detailInfoName">{{weather}}</text>
 </view>
 </view>
 </view>

 <!-- 中間部分 -->
 <view class="centerView">
 <view class="centerItem" style="margin-right: 25rpx;">
 <image class="centerItemImage" src="../../image/leaf.png" />
 <!-- 相同屬性抽出來！ -->
 <!--污染指數-->
 <text class="centerItemText" style="margin-left: 10rpx; margin-right: 10rpx">{{aqi}}</text>
 <!--污染指數對應name-->
 <text class="centerItemText">{{quality}}</text>
 </view>
 <view class="centerItem" style="margin-left: 25rpx">
 <image class="centerItemImage" src="../../image/wind.png" />
 <text class="centerItemText" style="margin-left: 10rpx; margin-right: 10rpx">{{windPower}}</text>
 <!--風-->
 <text class="centerItemText">{{windDirection}}</text>
 </view>
 </view>

<!-- 底部view -->
 <view class="bottomView">
 <!--數據返回的不是數組 在js中拼接的數組-->
 <block wx:for-items="{{list}}">
 <view class="bottomItemView">
 <image class="bottomImage" src="{{item.day_weather_pic}}" style="margin-bottom: 15rpx;" />
 <text wx:if="{{item.weekday == 1}}" class="bottomText">星期一</text>
 <text wx:elif="{{item.weekday == 2}}" class="bottomText">星期二</text>
 <text wx:elif="{{item.weekday == 3}}" class="bottomText">星期三</text>
 <text wx:elif="{{item.weekday == 4}}" class="bottomText">星期四</text>
 <text wx:elif="{{item.weekday == 5}}" class="bottomText">星期五</text>
 <text wx:elif="{{item.weekday == 6}}" class="bottomText">星期六</text>
 <text wx:else="{{item.weekday == 7}}" class="bottomText">星期日</text>
 <view class="degreeView" style="margin-top: 20rpx;">
 <text class="detailInfoDegree">{{item.night_air_temperature}}</text>
 <image class="detailInfoCircle" src="../../image/circle.png" />
 <text class="detailInfoLine">/</text> 
 <text class="detailInfoDegree">{{item.day_air_temperature}}</text>
 <!-- style優先級比class高會覆蓋class中相同屬性 -->
 <image class="detailInfoCircle" style="margin-left: 57rpx; margin-right: 40rpx" src="../../image/circle.png" />
 </view>
</view>

//index.js
//獲取應用實例
var app = getApp()
Page({
 data: {
 //加載狀態
 loadingHidden: false,
 //當前溫度
 currentTemperature: '',
 //夜間溫度
 nightAirTemperature: '',
 //白天溫度
 dayAirTemperature: '',
 //當前天氣
 weather: '',
 //污染指數
 aqi: '',
 //污染程度
 quality: '',
 //風力
 windPower: '',
 //風向
 windDirection: '',
 //因為數據返回不是數組所以要自己封裝一個數組
 list: [],
 height: 0,


 },

 onLoad: function () {
 console.log('onLoad')
 var that = this

 //100%好像不好使 可以獲取設備高度
 wx.getSystemInfo({
 success: function (res) {
 that.data.height = res.windowHeight;
 }
 })

 wx.getLocation({
 success: function (res) {
 //通過經緯度請求數據
 wx.request({
 //這個網站有免費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({
 //改變加載狀態
 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,
 //拼接數組
 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
 }

 ]
 })
 }
 })

 }
 })

 }
})

.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;
}
/*當前度數樣式*/
.degreeView {
 flex-direction: row;
 position: relative;
}
/*當前溫度度數圖標*/
.circle {
 width: 35rpx;
 height: 35rpx; 
 position: absolute;
 left: 130rpx;
} 
/*當前度數數組*/
.degree {
 color: white;
 font-size: 130rpx
}

/*詳細View樣式*/
.detailInfoView {
 flex-direction: row;
}
/*當前最高和最低溫度度數圖標*/
.detailInfoCircle {
 width: 20rpx;
 height: 20rpx; 
 position: absolute;
 left: 30rpx;
} 

/*當前度數數組*/
.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分為兩個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;
}