本人小白，觉得好玩，就注册了一个博客。一时也不知道写些什么，就把昨天做的一个简单的网页天气预报写一下吧，希望对各位看官有所帮助。
运行环境：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>
代码写完了，我发现这个天气预报的样子和自己想象的简直云泥之别：
剩下的，就交给美工和前端吧。