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

2019-11-19 13:27:31

字體：大中小

來源：轉載

供稿：網友

本文實例為大家分享了微信小程序實現天氣預報功能的具體代碼，供大家參考，具體內容如下

這個案例是仿UC中天氣界面做的中間也有點出入，預留了顯示當前城市名字和刷新圖標的位置，自己可以寫下，也可以添加搜索城市。值得注意的是100%這個設置好像已經不好使了，可以通過獲取設備的高度通過數據綁定設置高度。地址：weather

界面主要分為四部分：

第一部分

這里是預留的一塊可以自行添加補充下

<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  }  ]  })  } }) } }) }})

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;}/*當前度數樣式*/.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;}

PS：

開發者工具無法顯示問題：是因為View沒有獲得高度，默認個高度或者直接修改wxml中height高度即可。

另外，本站在線工具小程序上有一款天氣查詢工具，還添加了城市選擇的功能，感興趣的朋友可以掃描如下小程序碼查看：