web app

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>
上一篇 下一篇

猜你喜欢

热点阅读