微信小程序?qū)崿F(xiàn)天氣預報功能
更新時間：2018年07月18日 17:13:52 作者：順子_RTFSC
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)天氣預報功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序?qū)崿F(xiàn)天氣預報功能的具體代碼，供大家參考，具體內(nèi)容如下
這個案例是仿UC中天氣界面做的中間也有點出入，預留了顯示當前城市名字和刷新圖標的位置，自己可以寫下，也可以添加搜索城市。值得注意的是100%這個設(shè)置好像已經(jīng)不好使了，可以通過獲取設(shè)備的高度通過數(shù)據(jù)綁定設(shè)置高度。地址：weather
界面主要分為四部分：
第一部分
這里是預留的一塊可以自行添加補充下
<view class="newTopView"> <!--左邊添加當前城市名字，點擊跳轉(zhuǎn)選擇城市 右邊添加刷新當前天氣--> </view>
第二部分：
<view class="topView">
<view class="degreeView">
<!--當前溫度-->
<text class="degree">{{currentTemperature}}</text>
<!--度數(shù)圖標-->
<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優(yōu)先級比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" />
<!-- 相同屬性抽出來！ -->
<!--污染指數(shù)-->
<text class="centerItemText" style="margin-left: 10rpx; margin-right: 10rpx">{{aqi}}</text>
<!--污染指數(shù)對應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">
<!--數(shù)據(jù)返回的不是數(shù)組 在js中拼接的數(shù)組-->
<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優(yōu)先級比class高會覆蓋class中相同屬性 -->
<image class="detailInfoCircle" style="margin-left: 57rpx; margin-right: 40rpx" src="../../image/circle.png" />
</view>
</view>
js
//index.js
//獲取應用實例
var app = getApp()
Page({
data: {
//加載狀態(tài)
loadingHidden: false,
//當前溫度
currentTemperature: '',
//夜間溫度
nightAirTemperature: '',
//白天溫度
dayAirTemperature: '',
//當前天氣
weather: '',
//污染指數(shù)
aqi: '',
//污染程度
quality: '',
//風力
windPower: '',
//風向
windDirection: '',
//因為數(shù)據(jù)返回不是數(shù)組所以要自己封裝一個數(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)緯度請求數(shù)據(jù)
wx.request({
//這個網(wǎng)站有免費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;
}
/*當前度數(shù)樣式*/
.degreeView {
flex-direction: row;
position: relative;
}
/*當前溫度度數(shù)圖標*/
.circle {
width: 35rpx;
height: 35rpx;
position: absolute;
left: 130rpx;
}
/*當前度數(shù)數(shù)組*/
.degree {
color: white;
font-size: 130rpx
}
/*詳細View樣式*/
.detailInfoView {
flex-direction: row;
}
/*當前最高和最低溫度度數(shù)圖標*/
.detailInfoCircle {
width: 20rpx;
height: 20rpx;
position: absolute;
left: 30rpx;
}
/*當前度數(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分為兩個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ā)者工具無法顯示問題：是因為View沒有獲得高度，默認個高度或者直接修改wxml中height高度即可。
另外，本站在線工具小程序上有一款天氣查詢工具，還添加了城市選擇的功能，感興趣的朋友可以掃描如下小程序碼查看：
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家介紹了原生JS和jQuery操作DOM的一些對比總結(jié)，文中總結(jié)了很多的對比，相信對大家的學習或者工作能帶來一定的幫助，需要的朋友可以參考借鑒，下面來一起看看吧。2017-01-01
這篇文章主要介紹了js實現(xiàn)仿百度瀑布流的方法,以完整實例形式分析了js仿百度瀑布流的相關(guān)樣式與實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
這篇文章主要為大家詳細介紹了js實現(xiàn)購物車商品數(shù)量加減，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
十個開發(fā)人員面臨的最常見的JavaScript問題總結(jié)
今天，JavaScript?是幾乎所有現(xiàn)代?Web?應用的核心。這就是為什么JavaScript問題，以及找到導致這些問題的錯誤，是?Web?發(fā)者的首要任務。本文總結(jié)了十個常見的問題及解決方法，需要的可以參考一下2022-11-11
第一步點擊需要拖動的元素,在點擊下的元素被選中，進行move移動,當鼠標彈起的時候，停止動作.點擊元素oDIV的時候，可用的是oDIV區(qū)域，而move和up則是全局區(qū)域2013-03-03
這篇文章主要介紹了20個JS簡寫技巧提升工作效率，本文特點以言簡意賅為主，圍繞JS簡寫技巧的話題展開全文，具有一定的查看價值 ，需要的小伙伴可以參考一下2021-12-12
這個例子是通過測試的。是真真正正根據(jù)記錄的條數(shù)掛鉤的。2009-07-07
javascript addLoadEvent函數(shù)說明
網(wǎng)頁加載完整后會觸發(fā)一個onload事件，默認地一個事件只能和一個函數(shù)綁定。2010-01-01
本篇文章主要介紹了解決JS中乘法的浮點錯誤的方法。需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
這篇文章主要介紹了移動端和PC端在使用定位過程中需要注意的事項,包括系統(tǒng)GPS打開、定位權(quán)限、頁面授權(quán)等,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2025-02-02