|
前言：歡迎收看一周學(xué)會(huì)小程序系列2-日播天氣。看了蘋(píng)果的自帶天氣軟件，發(fā)現(xiàn)很簡(jiǎn)單使用。在小程序上看了一下天氣的小程序，沒(méi)有發(fā)現(xiàn)類(lèi)似的，于是就模仿了一個(gè)。雖然模仿的不是很像，請(qǐng)大家不要見(jiàn)笑！
主要功能：
1. 通過(guò)定位或選取位置獲取當(dāng)天詳細(xì)天氣預(yù)報(bào)
（1）天氣情況，包括溫度「當(dāng)前溫度、最低溫度和最高溫度」、天氣、空氣質(zhì)量、濕度、風(fēng)向和風(fēng)速、日出和日落、氣壓、能見(jiàn)度等； （2）生活指數(shù)，包括舒適度、穿衣、感冒、運(yùn)動(dòng)、旅游、紫外線強(qiáng)度、洗車(chē)、污染擴(kuò)散等。
2. 24小時(shí)天氣預(yù)報(bào)
3. 7天天氣預(yù)報(bào)
細(xì)節(jié)：
增加類(lèi)似于App的啟動(dòng)頁(yè)
具體功能實(shí)現(xiàn)：
1.接口部分：使用京東萬(wàn)象提供的免費(fèi)天氣接口（京東萬(wàn)象官網(wǎng)地址）
2.頁(yè)面部分：
（1）布局構(gòu)思：主頁(yè)面使用小程序推薦flex列布局，使用4個(gè)模板（當(dāng)前天氣溫度信息模板、24小時(shí)模板、7天天氣模板、生活指數(shù)模板），2個(gè)scrollview（24小時(shí)、7天天氣預(yù)報(bào)） （2）詳細(xì)模板使用：
.wxss
<template name="nowTemplate">
<view class='template-bgview'>
<view class='temperature-bg'>
<text class='temperature-text'>{{nowweather.tmp}}</text>
<text class='temperature-degree'>°</text>
</view>
<view class='weather-bg'>
<text>{{nowweather.cond.txt}}</text>
<view class='weather-line'>|</view>
<view class='aqi-bg'>
<text class='aqi-text'>{{aqi.aqi + " " + aqi.qlty}}</text>
<!-- <text>{{aqi.aqi}}</text> -->
</view>
</view>
<view class='winter-bg'>
<text class='hum-text'>{{"濕度 "+nowweather.hum+"%" + " "}}</text>
<text class='wind-text'>{{" " + nowweather.wind.dir+" "+nowweather.wind.sc+"級(jí)"}}</text>
</view>
</view>
</template>
.wxss
.template-bgview {
width: 100%;
/* height: 175px; */
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
}
.temperature-bg {
/* align-items: center; */
display: flex;
flex-direction: row;
justify-content: center;
}
.temperature-text {
font-size: 160rpx;
font-weight: lighter;
}
.temperature-degree {
font-size: 80rpx;
font-weight: lighter;
}
.weather-bg {
display: flex;
flex-direction: row;
justify-content: center;
}
.weather-line {
margin-left: 5px;
color: gray;
}
.aqi-bg {
margin-left: 5px;
background-color: yellow;
border-radius: 3px;
}
.aqi-text {
margin-left: 5px;
margin-right: 5px;
}
.winter-bg {
margin-top: 10px;
display: flex;
flex-direction: row;
justify-content: center;
}
.hum-text {
margin-right: 10px;
}
.wind-text {
margin-left: 10px;
}
復(fù)制代碼
模板使用： 1.模板頁(yè)面導(dǎo)入 .wxml
<import src="../template/now-template.wxml" />
復(fù)制代碼
.wxss
@import "../template/now-template.wxss";
復(fù)制代碼
|
2.外層嵌套view使用
<view class='now-view'>
<template is="nowTemplate" data="{{nowweather:weather.now, aqi:weather.aqi}}" />
</view>
復(fù)制代碼
以7天天氣模板為例（列表樣式）： 使用方法相同，具體wxml和wxss代碼如下
wxml
<template name="sevenDays">
<view class='template-sevendays'>
<view class='week' wx:if="{{index==0}}">{{item.week.week+" (今天)"}}</view>
<view class='week' wx:else>{{item.week.week+" ("+item.week.month+"/"+item.week.day+")"}}</view>
<view class='condition' wx:if="{{isnight}}">{{item.cond.txt_n}}</view>
<view wx:else class='condition'>{{item.cond.txt_d}}</view>
<view class='hight-temperature'>{{item.tmp.max+"°"}}</view>
<view class='low-temperature'>{{item.tmp.min+"°"}}</view>
</view>
</template>
wxss
.template-sevendays {
width: 100%;
height: 30px;
display: flex;
flex-direction: row;
}
.week {
margin-left: 10px;
flex: 4;
}
.condition {
text-align: center;
flex: 4;
/* width: 40%; */
}
}
.hight-temperature { text-align: center; flex: 1; } .low-temperature { text-align: center; flex: 1; 復(fù)制代碼 |
3.數(shù)據(jù)交互部分：
原理：使用騰訊地圖api獲取當(dāng)前位置經(jīng)緯度，通過(guò)經(jīng)緯度調(diào)用騰訊的逆地理編碼函數(shù)獲取當(dāng)前位置信息，然后再通過(guò)當(dāng)前位置獲取當(dāng)前的天氣信息。解析天氣信息數(shù)據(jù)，完成頁(yè)面和數(shù)據(jù)的交互綁定。 （1）數(shù)據(jù)解析
// 解析天氣信息函數(shù) 構(gòu)建數(shù)據(jù)賦值
analysisData: function(weather) {
var that = this;
var str = JSON.stringify(weather);
var hourly_forecast = [];
hourly_forecast.push({
date: "現(xiàn)在",
cond: weather.now.cond,
tmp: weather.now.tmp
});
// 24小時(shí) 數(shù)組
for (var i = 0; i < weather.hourly_forecast.length; i++) {
var hourDic = weather.hourly_forecast[i];
hourDic.date = hourDic.date.substr(11, 5);
hourly_forecast.push(hourDic);
}
// 7天天氣 數(shù)組
var daily_forecast = [];
// 使用forEach遍歷
weather.daily_forecast.forEach(function (dailyDic) {
dailyDic.week = util.dateLater(dailyDic.date, 0);
daily_forecast.push(dailyDic);
});
// 生活指數(shù)數(shù)組 按照指定順序排列
var suggestion = [];
var comf = weather.suggestion.comf;
comf.title = "舒適度";
comf.id = 0;
suggestion.push(comf);
var drsg = weather.suggestion.drsg;
drsg.title = "穿衣";
drsg.id = 1;
suggestion.push(drsg);
var flu = weather.suggestion.flu;
flu.title = "感冒";
flu.id = 2;
suggestion.push(flu);
var sport = weather.suggestion.sport;
sport.title = "運(yùn)動(dòng)";
sport.id = 3;
suggestion.push(sport);
var trav = weather.suggestion.trav;
trav.title = "旅游";
trav.id = 4;
suggestion.push(trav);
var uv = weather.suggestion.uv;
uv.title = "紫外線強(qiáng)度";
uv.id = 5;
suggestion.push(uv);
var cw = weather.suggestion.cw;
cw.title = "洗車(chē)";
cw.id = 6;
suggestion.push(cw);
var air = weather.suggestion.air;
air.title = "污染擴(kuò)散";
air.id = 7;
suggestion.push(air);
this.setData({
weather: {
hourly_forecast: hourly_forecast,
daily_forecast: daily_forecast,
aqi: weather.aqi.city,
now: weather.now,
astro: daily_forecast[0].astro,
suggestion: suggestion
},
updateTimeHidden: false,
updateTime: weather.basic.update.loc
});
// 2秒后隱藏更新時(shí)間
var timer = setTimeout(function() {
that.setData({
updateTimeHidden: true
});
}, 2000);
},
復(fù)制代碼
|
（2）數(shù)據(jù)綁定，以7天天氣為例
<view class='sevendays-bg'>
<view class='sevendays-title'>7天天氣預(yù)報(bào)</view>
<scroll-view>
<block wx:key="daily_forecast" wx:for="{{weather.daily_forecast}}" wx:for-item="item" wx:for-index="index">
<view class='sevendays-templatebg'>
<template is="sevenDays" data="{{item: item, isnight: isNight, index: index}}" />
</view>
</block>
</scroll-view>
</view>
|
|
