天气预报API简单实现
本人小白,觉得好玩,就注册了一个博客。一时也不知道写些什么,就把昨天做的一个简单的网页天气预报写一下吧,希望对各位看官有所帮助。
运行环境:php+mysql+WIN/Linux,框架什么的都无所谓了吧。
个人理解:
很简单的,通过API获取到天气的Json数据,然后后台传给前端展示,css渲染。
首先,获取API的数据:
我这里找的是一个免费的天气预报API,方便实用,用的人也多: http://apistore.baidu.com/apiworks/servicedetail/112.html
我把相关的方法给写在一个php文件里,方便使用:weather.php
1 function weather_excu_curl($url){ 2 $ch = curl_init(); 3 $header = array( 4 'apikey:你自己的apikey', 5 ); 6 // 添加apikey到header 7 curl_setopt($ch, CURLOPT_HTTPHEADER, $header); 8 curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); 9 // 执行HTTP请求 10 curl_setopt($ch, CURLOPT_URL, $url); 11 $res = curl_exec($ch); 12 return $res; 13 } 14 15 //根据城市名称-- type == 0 获取城市代码,!=0 获取天气整体信息 16 function get_cityCode($cityname,$type){ 17 //获取城市代码 18 $url_city = 'http://apis.baidu.com/apistore/weatherservice/cityname?cityname='.$cityname; 19 $res = weather_excu_curl($url_city); 20 $res = json_decode($res); 21 $errnum = $res->errNum; 22 if($type == 0) { 23 //当地基本天气信息 24 if ($errnum != -1) { 25 return $res->retData->citycode; 26 } else { 27 return null; 28 } 29 }else{ 30 return $res; 31 } 32 } 33 //带历史7天和未来4天--天气查询 34 function get_recent_weather($citycode){ 35 if($citycode) { 36 $url = 'http://apis.baidu.com/apistore/weatherservice/recentweathers?cityid=' . $citycode; 37 return weather_excu_curl($url); 38 }else{ 39 return null; 40 } 41 }
然后,把得到的数据放到前端就可以了,我这里使用ajax进行异步加载的方式:
js文件
1 function getWeather(){ 2 //dealid 传递给后台处理的参数 3 var dealid = $("#dealid").val(); 4 $.ajax({ 5 url:"你的后台处理地址", 6 dataType: "json", 7 async:false, 8 data:{"dealid":dealid}, 9 type:"POST", 10 success:function(msg){ 11 var container = $("#weather_info"); 12 if(msg['status']!=0) { 13 var data = msg['data']['retData']; 14 console.log(data); 15 $("#weather_nav .weather_city").html(data['city']); 16 if(data.today){ 17 var history = data.history; 18 var forecast = data.forecast; 19 //data today weather 20 var todayContent = data.today.index; 21 var todayHtml = ""; 22 var todayLength = todayContent.length; 23 for (var i=0;i<todayLength;i++){ 24 todayHtml += "<div class='"+todayContent[i]['code']+"'>" + 25 "<p>"+todayContent[i]['name']+" "+todayContent[i]['index']+"</p>" + 26 "<p>"+todayContent[i]['details']+"</p>" + 27 "</div>"; 28 } 29 container.append("<div class='weather_today'>" + 30 "<ul>" + 31 "<li>温度 :"+data.today.curTemp+" / "+data.today.type+"</li>" + 32 "<li>时间 :"+data.today.date+" / "+data.today.week+"</li>" + 33 "<li>风力 :"+data.today.fengli+"</li>" + 34 "<li>风向 :"+data.today.fengxiang+"</li>" + 35 "<li>最高温 :"+data.today.hightemp+"</li>" + 36 "<li>最低温 :"+data.today.lowtemp+"</li>" + 37 "<li>PM值 :"+data.today.aqi+"</li>" + 38 "<li>"+todayHtml+"</li>" + 39 "</ul>" + 40 "</div>"); 41 //history weather 42 var historyLength = history.length; 43 var historyHtml = ""; 44 for(var i=0; i < historyLength;i++){ 45 historyHtml +="<li><p>天气 :"+history[i]['type']+"</p>" + 46 "<p>时间 :"+history[i]['date']+" / "+history[i]['week']+"</p>" + 47 "<p>风力 :"+history[i]['fengli']+"</p>"+ 48 "<p>风向 :"+history[i]['fengxiang']+"</p>"+ 49 "<p>最高温 :"+history[i]['hightemp']+"</p>"+ 50 "<p>最低温 :"+history[i]['lowtemp']+"</p>"+ 51 "<p>PM值 :"+history[i]['aqi']+"</p></li>"; 52 } 53 container.append("<div class='weather_history'><ul>"+historyHtml+"</ul></div>"); 54 //forecast weather 55 var forecastLength = forecast.length; 56 var forecastHtml = ""; 57 for(var i=0; i < forecastLength;i++){ 58 forecastHtml +="<li><p>天气 :"+forecast[i]['type']+"</p>" + 59 "<p>时间 :"+forecast[i]['date']+" / "+forecast[i]['week']+"</p>" + 60 "<p>风力 :"+forecast[i]['fengli']+"</p>"+ 61 "<p>风向 :"+forecast[i]['fengxiang']+"</p>"+ 62 "<p>最高温 :"+forecast[i]['hightemp']+"</p>"+ 63 "<p>最低温 :"+forecast[i]['lowtemp']+"</p></li>"; 64 } 65 container.append("<div class='weather_forecast'><ul>"+forecastHtml+"</ul></div>"); 66 } 67 }else { 68 container.append(msg.content); 69 $("#weather_nav").css("display","none"); 70 } 71 }, 72 error:function(){ 73 console.log("出错"); 74 } 75 }); 76 }
后台处理代码(要include 之前写的 weather.php):
1 require '/weather.php'; 2 class weatherModule extends BaseModule 3 { 4 public function weather(){ 5 $dealid = $_POST['dealid']; 6 $deal = mysql查询到相关的数据; 7 //city 8 $cityCode = get_cityCode($deal['city'],0); 9 if($cityCode) { 10 $res = get_recent_weather($cityCode); 11 echo json_encode(array("status"=>1,"data"=>json_decode($res))); 12 }else{ 13 //province 14 $citycode0 = get_cityCode($deal['province']); 15 if($citycode0){ 16 $res0 = get_recent_weather($citycode0,0); 17 echo json_encode(array("status"=>2,"data"=>json_decode($res0))); 18 }else{ 19 echo json_encode(array("status"=>0,"content"=>"没有查到该地区天气数据")); 20 } 21 } 22 } 23 }
最后页面展示html部分代码:
1 <input id="dealid" type="text" placeholder="输入赛事id 查询最近城市天气" style="width: 400px;"> 2 <input type="submit" onclick="getWeather()"> 3 <div id="weather_info"> 4 <!--这里是Js异步加载的天气数据--> 5 </div> 6 </body>
代码写完了,我发现这个天气预报的样子和自己想象的简直云泥之别:
剩下的,就交给美工和前端吧。