《冷暖自知》天氣小程序
發(fā)布時間：2018-05-05 15:14 所屬欄目：小程序開發(fā)教程
《冷暖自知》天氣小程序學(xué)無止境，以玩兒玩兒的心態(tài)去學(xué)習(xí)！ 花半天時間完成簡單的小程序應(yīng)用。適合小程序初學(xué)者。 步驟：
廢話不多說，直接上代碼~~~ 代碼index.wxml部分
<!--index.wxml-->
<view class="container">
<view class="weather yesterday">
<view>
<view class='date'>今天</view>
<view class='location'>{{basic.location}}/{{basic.parent_city}}</view>
<view class='tmp'>{{today.tmp_min}}℃~{{today.tmp_max}}℃</view>
<view class='cond_txt'>{{today.cond_txt_d}}</view>
</view>
<view>
<view class='weather_icon'>
<image src='{{todyIcon}}'></image>
</view>
<view class='lastUpdateDate'>最后更新：{{update}}</view>
</view>
</view>
<view class="weather today">
<view>
<text>明天</text>
<view class='location'>{{basic.location}}/{{basic.parent_city}}</view>
<view class='tmp'>{{tomorrow.tmp_min}}℃~{{tomorrow.tmp_max}}℃</view>
<view class='cond_txt'>{{tomorrow.cond_txt_d}}</view>
</view>
<view>
<view class='weather_icon'>
<image src='{{tomorrowIcon}}'></image>
</view>
<view class='lastUpdateDate'>最后更新：{{update}}</view>
</view>
</view>
<view class="weather tomorrow">
<view>
<text>后天</text>
<view class='location'>{{basic.location}}/{{basic.parent_city}}</view>
<view class='tmp'>{{afterTomor.tmp_min}}℃~{{afterTomor.tmp_max}}℃</view>
<view class='cond_txt'>{{afterTomor.cond_txt_d}}</view>
</view>
<view>
<view class='weather_icon'>
<image src='{{afterTomorIcon}}'></image>
</view>
<view class='lastUpdateDate'>最后更新：{{update}}</view>
</view>
</view>
</view>
index.wxss部分
/**index.wxss**/
.container {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 10px 15px;
box-sizing: border-box;
}
.weather{
height: 110px;
width: 100%;
margin-bottom: 10px;
border-radius: 5px;
color: #FFF;
padding: 5PX 15px;
display: flex;
font-size: 14px;
box-sizing: border-box;
}
.weather>view{
flex: 1;
}
.weather>view>view{
margin: 5px 0;
}
.yesterday{
background-color: #30BCAF;
}
.today{
background-color: #78A4be;
}
.tomorrow{
background-color: #FCB654;
}
.location,.cond_txt{
font-size: 14px;
}
.date,.tmp{
font-weight: bold;
}
.weather_icon{
text-align: center;
height: 65px;
}
.weather_icon image{
width: 75px;
height: 100%;
}
.lastUpdateDate{
font-size: 10px;
text-align: center;
}
index.js部分
//index.js
//獲取應(yīng)用實例
const app = getApp()
Page({
data: {
update: '',
basic:{},
today:{},
tomorrow:{},
afterTomor:{},
todyIcon:'../../imgs/weather/999.png',
tomorrowIcon:'../../imgs/weather/999.png',
afterTomorIcon:'../../imgs/weather/999.png'
},
onShow: function () {
this.getLocation();
},
//事件處理函數(shù)
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
getLocation:function(){
var that = this;
wx.getLocation({
type: 'wgs84',
success: function (res) {
var latitude = res.latitude
var longitude = res.longitude
that.getWeatherInfo(latitude, longitude);
}
})
},
getWeatherInfo: function (latitude, longitude){
var _this = this;
var key = '';//你自己的key
//需要在微信公眾號的設(shè)置-開發(fā)設(shè)置中配置服務(wù)器域名
var url = 'https://free-api.heweather.com/s6/weather?key='+key+'&location=' + longitude + ',' + latitude;
wx.request({
url: url,
data: {},
method: 'GET',
success: function (res) {
var daily_forecast_today = res.data.HeWeather6[0].daily_forecast[0];//今天預(yù)報
var daily_forecast_tomorrow = res.data
|
