1. 通过百度地图定位

2. 通过某API获得天气信息

3. 将数据载入页面

部分代码如下：

<script type="text/javascript"> let zltWeather = { weatherapi: '', getCityInfo: function() { //用来获取当前所在城市的信息 var geo = new BMap.Geolocation(); //通过百度SDK获得GEO地理位置信息对象 geo.getCurrentPosition(function(position) { //定位成果后会进入到该返回方法 // mui.alert(position); 错误,position是对象,不能用alert console.log(position); mui.toast('当前城市：' + position.address.city, { duration: 3000 }); var city = position.address.city.slice(0, -1); //保留的范围,-1表示最后一位不要 zltWeather.getWeatherBy(city); }, function(e) { //定位失败,进入该方法 mui.toast("定位失败，请检查网络", { duration: 5000 }); }, { provider: 'baidu' }); //获得当前定位信息 }, getWeatherBy: function(city) { // mui.alert(city); //Ajax-异步请求技术 //同步:单线程,顺序执行,一行一行,或一个一个执行完成 //异步:多线程,没有顺序,同时发起,同时执行,最终谁快谁先返回 //Ajax的升级版：Pjax p:page ajax获得的是数据,pjax获得的是页面加数据 //XHLHttpRequest:原生Ajax对象 //今天教基于jQuery的封装Ajax对象 //当有Cookie数据的时候取Cookie数据,没有则Ajax请求// if ($.cookie("updatetime") && (new Date().getTime()-$.cookie("updatetime"))/1000<=3600) {// //cookie availabe// // $.cookie("updatetime");// var temperature = $.cookie("wtemp"); //温度// var humidity = $.cookie("whump"); //湿度// var weather = $.cookie("weather"); //天气状态// // $("#nowTemp").html(temperature);// $("#hump").html(humidity);// $("#nowWeather").html(weather);// $("#city").html(city);// $(".futureWeek").html(week);// // } else { $.ajax({ url:zltWeather.weatherapi+city, //'data/w.json', //请求地址 dataType: 'json', //{key:value} json数据类型,也称为json对象 success: function(d) { //请求成功后的返回方法 //一般情况下,URL请求都会有状态码,如果要保证数据可以被获取,应该先判断状态码 //状态码:200 正常/ 404 不存在/ 500 服务器错误/ 301 重定向/ 302 没有返回 console.log(d); if (d.retCode == "200") { //正常获得数据 //解析数据 var data = d.result[0]; let humidity = data.humidity.slice(3); //湿度 let temperature = data.temperature.slice(0,3); //温度 let wind = data.wind; //风向 let airCondition = data.airCondition; //空气质量 let weather = data.weather; //天气状态 let week = data.week; //星期 let future = data.future; let futureWeek1 = future[0].week; let futureWeek2 = future[1].week; let futureWeek3 = future[2].week; let futureWea1 = future[0].dayTime; let futureWea2 = future[1].dayTime; let futureWea3 = future[2].dayTime; let futureHigh1 = future[0].temperature.slice(0,2); let futureHigh2 = future[1].temperature.slice(0,2); let futureHigh3 = future[2].temperature.slice(0,2); let futureLow1 = future[0].temperature.slice(-4,-2); let futureLow2 = future[1].temperature.slice(-4,-2); let futureLow3 = future[2].temperature.slice(-4,-2); // mui.alert(humidity + '|' + temperature); //向页面写数据 // document.getElementById("temp").innerText=temperature; //使用Jquery内置的方法将数据写入网页,功效和上面相同 //在什么时候更新数据合适？ //通过本地化数据存储来匹配更新数据的频率 //Cookie会话跟踪技术,可以利用该技术存放一些有用的,或关键的信息 //我们可以利用该技术,完成,当Cookie没有数据时,先通过API请求数据,然后在存储到Cookie中 //如果Cookie中有数据,则优先使用Cookie中的数据,如果时间到了更新要求,则更新他 //更新的频率为 1H=3600s=3600*1000=3600000ms $.cookie("updatetime", new Date().getTime()); //存当前时间戳,它是一个毫秒级的时间值 $.cookie("wtemp", temperature); //温度 $.cookie("whump", humidity); //湿度 $.cookie("weather", weather); //天气状态 $("#nowTemp").html(temperature); $("#nowWeather").html(weather); $("#city").html(city); $("#futureWeek1").html(futureWeek1); $("#futureWea1").html(futureWea1); $("#futureHigh1").html(futureHigh1); $("#futureLow1").html(futureLow1); $("#futureWeek2").html(futureWeek2); $("#futureWea2").html(futureWea2); $("#futureHigh2").html(futureHigh2); $("#futureLow2").html(futureLow2); $("#futureWeek3").html(futureWeek3); $("#futureWea3").html(futureWea3); $("#futureHigh3").html(futureHigh3); $("#futureLow3").html(futureLow3); $("#humidity").html(humidity); $("#wind").html(wind); $("#airCondition").html(airCondition); } else { //查不到天气信息 mui.toast('Fail to pull weather data!') } }, error: function() { //请求失败的返回方法 //网络？ URL？ 数据格式？ mui.toast('Fail to pull weather data!'); } }); // } } } //调用定位方法 // $.cookie("updatetime",-1); zltWeather.getCityInfo(); </script> <style type="text/css"> #body{ background: url(img/rain.gif); background-position: center center; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; } #weaIcon{ width: 100%; height: 300px; /* background-color: #007AFF; */ display: flex; flex-direction: column; justify-content: center; align-items: center; } #weaIcon>div{ text-align: center; } #city{ width: 130px; height: 44px; color: white; font-size: 30px; line-height: 44px; /* background-color: #000000; */ } #nowWeather{ width: 130px; height: 22px; /* background-color: indianred; */ line-height: 22px; color: white; } #nowTemp{ width: 130px; height: 90px; /* background-color: #2AC845; */ color: white; line-height: 90px; font-size: 60px; } .hrline{ height: 1px; background-color: #DDDDDD; } .future{ display: flex; } .future>div{ height: 30px; color: white; line-height: 30px; } .futureWeek{ width: 38.8%; /* background-color: #2AC845; */ text-indent: 30px; } .futureWea{ width: 22.1%; /* background-color: #242424; */ text-align: center; } .futureHigh{ width: 20.7%; /* background-color: #6641E2; */ text-align: right; } .future .futureLow{ width: 18.4%; /* background-color: #DD524D; */ text-align: right; /* text-indent: 20px; */ padding-right: 30px; color: #DDDDDD; } #more{ display: flex; flex-wrap: wrap; padding: 0 20px; } #more .block{ width: 50%; height: 65px; /* box-shadow: 0 0 10px 1px black; */ } #more .block .title{ height: 35%; /* background-color: #007AFF; */ line-height: 22.75px; color: #DDDDDD; font-size: 10px; } #more .block .value{ height: 65%; /* background-color: #2AC845; */ color: white; line-height: 42.25px; font-size: 35px; text-shadow: 0px 0px 5px gray; } </style> </head> <body id="body"> <div id="weaIcon"> <div id="city"></div> <div id="nowWeather"></div> <div id="nowTemp"></div> </div> <div class="hrline"></div> <div class="future"> <div class="futureWeek" id="futureWeek1"></div> <div class="futureWea" id="futureWea1"></div> <div class="futureHigh" id="futureHigh1"></div> <div class="futureLow" id="futureLow1"></div> </div> <div class="hrline"></div> <div class="future"> <div class="futureWeek" id="futureWeek2"></div> <div class="futureWea" id="futureWea2"></div> <div class="futureHigh" id="futureHigh2"></div> <div class="futureLow" id="futureLow2"></div> </div> <div class="hrline"></div> <div class="future"> <div class="futureWeek" id="futureWeek3"></div> <div class="futureWea" id="futureWea3"></div> <div class="futureHigh" id="futureHigh3"></div> <div class="futureLow" id="futureLow3"></div> </div> <div class="hrline"></div> <div id="more"> <div class="block"> <div class="title">风向</div> <div class="value" id="wind"></div> </div> <div class="block"> <div class="title">湿度</div> <div class="value" id="humidity"></div> </div> <!-- <div class="hrline"></div> --> <div class="block"> <div class="title">空气质量</div> <div class="value" id="airCondition"></div> </div> <div class="block"> <div class="title">日出</div> <div class="value">无数据</div> </div> </div> <div class="hrline"></div> <!-- <div> <ul class="mui-table-view"> <li class="mui-table-view-cell" id="temp"></li> <li class="mui-table-view-cell" id="hump"></li> <li class="mui-table-view-cell" id="weather"></li> </ul> </div> --> </body></html> 

效果如下：