Web APP 四
2017-12-25 本文已影响0人
我为峰2014
前言
我们已经完成了,home模块,
思考
下面完成 weather.html
我们需要制作的是一个天气显示页面,调用的是和风天气的api
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>天气</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="../css/mui.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="../css/mui.picker.css" />
<link rel="stylesheet" type="text/css" href="../css/mui.poppicker.css" />
<!--引入公用样式-->
<link rel="stylesheet" type="text/css" href="../css/public.css" />
<style>
html,
body {
background-color: #009be0 !important;
}
</style>
</head>
<body>
<div class="weather-box bs-bb">
<div class="wt-hb bs-bb dp-n" id="results">
<!--城市-->
<div class="citybox">
<span class="cityname c-ff smFontSize" id="city"></span>
</div>
<!--天气-->
<div class="wh-sk ta-c bs-bb">
<div class="wh-img bs-bb">
<img src="../images/weather/tq7.png" alt="" id="whimg" />
</div>
<div class="mui-row">
<div class="mui-col-xs-6 ta-r wh-msg wh-lmsg">
<span class="wh-bigFontSize c-ff" id="tmp"></span>
</div>
<div class="mui-col-xs-6 ta-l wh-msg wh-rmsg">
<div>
<span class="c-ff smFontSize">℃</span>
</div>
<div>
<span class="c-ff smFontSize" id="cond_txt"></span>
</div>
</div>
</div>
</div>
<!--详细信息-->
<div class="sixbox mui-row c-ff">
<div class="mui-col-xs-2 bs-bb">
<div class="ta-c">
<span class="smFontSize">体感</span>
</div>
<div class="ta-c">
<img class="xsimg" src="../images/tfwd.png" alt="" />
</div>
<div class="ta-c">
<span class="smFontSize" id="fl"></span>
</div>
</div>
<div class="mui-col-xs-2 bs-bb">
<div class="ta-c">
<span class="smFontSize">湿度</span>
</div>
<div class="ta-c">
<img class="xsimg" src="../images/sd.png" alt="" />
</div>
<div class="ta-c">
<span class="smFontSize" id="hum"></span>
</div>
</div>
<div class="mui-col-xs-2 bs-bb">
<div class="ta-c">
<span class="smFontSize">降水量</span>
</div>
<div class="ta-c">
<img class="xsimg" src="../images/jstj.png" alt="" />
</div>
<div class="ta-c">
<span class="smFontSize" id="pcpn"></span>
</div>
</div>
<div class="mui-col-xs-2 bs-bb">
<div class="ta-c">
<span class="smFontSize">风向</span>
</div>
<div class="ta-c">
<img class="xsimg" src="../images/fx.png" alt="" />
</div>
<div class="ta-c">
<span class="smFontSize" id="wind_dir"></span>
</div>
</div>
<div class="mui-col-xs-2 bs-bb">
<div class="ta-c">
<span class="smFontSize">风力</span>
</div>
<div class="ta-c">
<img class="xsimg" src="../images/fl.png" alt="" />
</div>
<div class="ta-c">
<span class="smFontSize" id="wind_sc"></span>
</div>
</div>
<div class="mui-col-xs-2 bs-bb">
<div class="ta-c">
<span class="smFontSize">风速</span>
</div>
<div class="ta-c">
<img class="xsimg" src="../images/fs.png" alt="" />
</div>
<div class="ta-c">
<span class="smFontSize" id="wind_spd"></span>
</div>
</div>
</div>
<!--分割线-->
<div class="fgx bs-bb">
<div></div>
</div>
<!--3-10天的天气-->
<div class="daymsg bs-bb">
<!--今天-->
<div class="bs-bb mui-row smFontSize daylist c-ff">
<div class="mui-col-xs-4">
<b>今天</b>
<span id="today"></span>
</div>
<div class="mui-col-xs-4 ta-c">
<span style="position: relative;">
<img class="listday" src="" alt="" id="todayimg"/>
</span>
<span id="todaytext"></span>
</div>
<div class="mui-col-xs-4 ta-r">
<span id="todaywd"></span>
</div>
</div>
<!--明天-->
<div class="bs-bb mui-row smFontSize daylist c-ff">
<div class="mui-col-xs-4">
<b>明天</b>
<span id="tomorrow"></span>
</div>
<div class="mui-col-xs-4 ta-c">
<span style="position: relative;">
<img class="listday" src="" alt="" id="tomorrowimg"/>
</span>
<span id="tomorrowtext"></span>
</div>
<div class="mui-col-xs-4 ta-r">
<span id="tomorrowwd"></span>
</div>
</div>
<!--后天-->
<!--<div class="bs-bb mui-row smFontSize daylist c-ff">
<div class="mui-col-xs-4">
<b>后天</b>
<span id="afterTomorrow"></span>
</div>
<div class="mui-col-xs-4 ta-c">
<span style="position: relative;">
<img class="listday" src="" alt="" id="afterTomorrowimg"/>
</span>
<span id="afterTomorrowtext"></span>
</div>
<div class="mui-col-xs-4 ta-r">
<span id="afterTomorrowwd"></span>
</div>
</div>-->
</div>
</div>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/mui.picker.js"></script>
<script src="../js/mui.poppicker.js"></script>
<script src="../js/city.data-3.js"></script>
<script type="text/javascript">
mui.init();
//和风天气认证key 9aab750e479648829ea03e5646a3bc36
//实况天气
/* 实况:https://free-api.heweather.com/s6/weather/now?
* 3-10天:https://free-api.heweather.com/s6/weather/forecast?
* 逐小时预报:https://free-api.heweather.com/s6/weather/hourly?
* 生活指数:https://free-api.heweather.com/s6/weather/lifestyle?
*
* 例子
* https://free-api.heweather.com/s6/weather/now?key=9aab750e479648829ea03e5646a3bc36&location=北京
**/
//全局变量
mui.plusReady(function() {
//获取当前地理位置信息
plus.geolocation.getCurrentPosition(function(res) {
//alert(JSON.stringify(data))
console.log(JSON.stringify(res));
plus.nativeUI.showWaiting("加载中...");
//请求数据
var url = 'https://free-api.heweather.com/s6/weather/now?key=9aab750e479648829ea03e5646a3bc36&location=' + res.coords.longitude + ',' + res.coords.latitude;
mui.ajax(url, {
dataType: 'json', //服务器返回json格式数据
type: 'post', //HTTP请求类型
timeout: 10000, //超时时间设置为10秒;
headers: {
'Content-Type': 'application/json'
},
success: function(data) {
if(data.HeWeather6[0].status == "ok") {
var dz = data.HeWeather6[0].basic.admin_area + " " + data.HeWeather6[0].basic.parent_city + " " + data.HeWeather6[0].basic.location;
var data = data.HeWeather6[0].now;
//赋值
document.getElementById('whimg').setAttribute('src', '../images/weather1/' + data.cond_code + '.svg')
document.getElementById('city').innerText = dz;
document.getElementById('cond_txt').innerText = data.cond_txt;
document.getElementById('wind_dir').innerText = data.wind_dir;
document.getElementById('wind_sc').innerText = data.wind_sc;
document.getElementById('wind_spd').innerText = data.wind_spd;
document.getElementById('hum').innerText = data.hum;
document.getElementById('tmp').innerText = data.tmp;
document.getElementById('fl').innerText = data.fl;
document.getElementById('pcpn').innerText = data.pcpn;
//请求3-10天的天气信息
//请求数据
var url = 'https://free-api.heweather.com/s6/weather/forecast?key=9aab750e479648829ea03e5646a3bc36&location=' + res.coords.longitude + ',' + res.coords.latitude;
mui.ajax(url, {
dataType: 'json', //服务器返回json格式数据
type: 'post', //HTTP请求类型
timeout: 10000, //超时时间设置为10秒;
headers: {
'Content-Type': 'application/json'
},
success: function(res1) {
plus.nativeUI.closeWaiting();
if(res1.HeWeather6[0].status == "ok") {
//今天
var todaylist = res1.HeWeather6[0].daily_forecast[0];
//赋值
document.getElementById('todayimg').setAttribute('src', '../images/weather1/' + todaylist.cond_code_d + '.svg')
document.getElementById('today').innerText = todaylist.date;
document.getElementById('todaytext').innerText = todaylist.cond_txt_d;
document.getElementById('todaywd').innerText = todaylist.tmp_min + "~" + todaylist.tmp_max;
//明天
var tomorrow = res1.HeWeather6[0].daily_forecast[1];
//赋值
document.getElementById('tomorrowimg').setAttribute('src', '../images/weather1/' + tomorrow.cond_code_d + '.svg')
document.getElementById('tomorrow').innerText = tomorrow.date;
document.getElementById('tomorrowtext').innerText = tomorrow.cond_txt_d;
document.getElementById('tomorrowwd').innerText = tomorrow.tmp_min + "~" + tomorrow.tmp_max;
//后天
//var afterTomorrow = res1.HeWeather6[0].daily_forecast[2];
//赋值
//document.getElementById('afterTomorrowimg').setAttribute('src', '../images/weather1/' + afterTomorrow.cond_code_d + '.svg')
//document.getElementById('afterTomorrow').innerText = afterTomorrow.date;
//document.getElementById('afterTomorrowtext').innerText = afterTomorrow.cond_txt_d;
//document.getElementById('afterTomorrowwd').innerText = afterTomorrow.tmp_min + "~" + afterTomorrow.tmp_max;
document.getElementById("results").className = "wt-hb bs-bb";
} else {
plus.nativeUI.toast("天气获取失败!");
}
},
error: function(xhr, type, errorThrown) {
plus.nativeUI.closeWaiting();
}
});
document.getElementById("results").className = "wt-hb bs-bb";
} else {
plus.nativeUI.toast("天气获取失败!");
}
},
error: function(xhr, type, errorThrown) {
plus.nativeUI.closeWaiting();
}
});
}, function(e) {});
/*
* 选择城市
*
* */
/**
* 获取对象属性的值
* 主要用于过滤三级联动中,可能出现的最低级的数据不存在的情况,实际开发中需要注意这一点;
* @param {Object} obj 对象
* @param {String} param 属性名
*/
var _getParam = function(obj, param) {
return obj[param] || '';
};
var cityPicker = new mui.PopPicker({
layer: 3
});
cityPicker.setData(cityData);
var showCityPickerButton = document.getElementById('city');
var cityResult = document.getElementById('city');
showCityPickerButton.addEventListener('tap', function(event) {
cityPicker.show(function(items) {
//address = _getParam(items[2], 'text');
plus.nativeUI.showWaiting("加载中...");
var urll = 'https://free-api.heweather.com/s6/weather/now?key=9aab750e479648829ea03e5646a3bc36&location=' + _getParam(items[2], 'text');
mui.ajax(urll, {
dataType: 'json', //服务器返回json格式数据
type: 'post', //HTTP请求类型
timeout: 10000, //超时时间设置为10秒;
headers: {
'Content-Type': 'application/json'
},
success: function(data) {
console.log(JSON.stringify(data));
if(data.HeWeather6[0].status == "ok") {
var data = data.HeWeather6[0].now;
//赋值
document.getElementById('whimg').setAttribute('src', '../images/weather1/' + data.cond_code + '.svg')
document.getElementById('city').innerText = _getParam(items[0], 'text') + " " + _getParam(items[1], 'text') + " " + _getParam(items[2], 'text');
document.getElementById('cond_txt').innerText = data.cond_txt;
document.getElementById('wind_dir').innerText = data.wind_dir;
document.getElementById('wind_sc').innerText = data.wind_sc;
document.getElementById('wind_spd').innerText = data.wind_spd;
document.getElementById('hum').innerText = data.hum;
document.getElementById('tmp').innerText = data.tmp;
document.getElementById('fl').innerText = data.fl;
document.getElementById('pcpn').innerText = data.pcpn;
//请求3-10天的天气信息
//请求数据
var url = 'https://free-api.heweather.com/s6/weather/forecast?key=9aab750e479648829ea03e5646a3bc36&location=' +_getParam(items[2], 'text');
mui.ajax(url, {
dataType: 'json', //服务器返回json格式数据
type: 'post', //HTTP请求类型
timeout: 10000, //超时时间设置为10秒;
headers: {
'Content-Type': 'application/json'
},
success: function(res1) {
plus.nativeUI.closeWaiting();
if(res1.HeWeather6[0].status == "ok") {
//今天
var todaylist = res1.HeWeather6[0].daily_forecast[0];
//赋值
document.getElementById('todayimg').setAttribute('src', '../images/weather1/' + todaylist.cond_code_d + '.svg')
document.getElementById('today').innerText = todaylist.date;
document.getElementById('todaytext').innerText = todaylist.cond_txt_d;
document.getElementById('todaywd').innerText = todaylist.tmp_min + "~" + todaylist.tmp_max;
//明天
var tomorrow = res1.HeWeather6[0].daily_forecast[1];
//赋值
document.getElementById('tomorrowimg').setAttribute('src', '../images/weather1/' + tomorrow.cond_code_d + '.svg')
document.getElementById('tomorrow').innerText = tomorrow.date;
document.getElementById('tomorrowtext').innerText = tomorrow.cond_txt_d;
document.getElementById('tomorrowwd').innerText = tomorrow.tmp_min + "~" + tomorrow.tmp_max;
//后天
var afterTomorrow = res1.HeWeather6[0].daily_forecast[2];
//赋值
document.getElementById('afterTomorrowimg').setAttribute('src', '../images/weather1/' + afterTomorrow.cond_code_d + '.svg')
document.getElementById('afterTomorrow').innerText = afterTomorrow.date;
document.getElementById('afterTomorrowtext').innerText = afterTomorrow.cond_txt_d;
document.getElementById('afterTomorrowwd').innerText = afterTomorrow.tmp_min + "~" + afterTomorrow.tmp_max;
document.getElementById("results").className = "wt-hb bs-bb";
} else {
plus.nativeUI.toast("天气获取失败!");
}
},
error: function(xhr, type, errorThrown) {
plus.nativeUI.closeWaiting();
}
});
document.getElementById("results").className = "wt-hb bs-bb";
} else {
plus.nativeUI.toast("天气获取失败!");
}
},
error: function(xhr, type, errorThrown) {
plus.nativeUI.closeWaiting();
}
});
});
}, false);
})
</script>
</body>
</html>