天气预报API简单实现

本人小白，觉得好玩，就注册了一个博客。一时也不知道写些什么，就把昨天做的一个简单的网页天气预报写一下吧，希望对各位看官有所帮助。

运行环境：php+mysql+WIN/Linux，框架什么的都无所谓了吧。

个人理解：

很简单的，通过API获取到天气的Json数据，然后后台传给前端展示，css渲染。

首先，获取API的数据：

我这里找的是一个免费的天气预报API，方便实用，用的人也多： http://apistore.baidu.com/apiworks/servicedetail/112.html

我把相关的方法给写在一个php文件里，方便使用：weather.php

 function weather_excu_curl($url){
     $ch = curl_init();
     $header = array(
         'apikey:你自己的apikey',
     );
     // 添加apikey到header
     curl_setopt($ch, CURLOPT_HTTPHEADER, $header);
     curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
     // 执行HTTP请求
     curl_setopt($ch, CURLOPT_URL, $url);
     $res = curl_exec($ch);
     return $res;
 }

 //根据城市名称-- type == 0 获取城市代码,!=0 获取天气整体信息
 function get_cityCode($cityname,$type){
     //获取城市代码
     $url_city = 'http://apis.baidu.com/apistore/weatherservice/cityname?cityname='.$cityname;
     $res = weather_excu_curl($url_city);
     $res = json_decode($res);
     $errnum = $res->errNum;
     if($type == 0) {
         //当地基本天气信息
         if ($errnum != -1) {
             return $res->retData->citycode;
         } else {
             return null;
         }
     }else{
         return $res;
     }
 }
 //带历史7天和未来4天--天气查询
 function get_recent_weather($citycode){
     if($citycode) {
         $url = 'http://apis.baidu.com/apistore/weatherservice/recentweathers?cityid=' . $citycode;
         return weather_excu_curl($url);
     }else{
         return null;
     }
 }

然后，把得到的数据放到前端就可以了，我这里使用ajax进行异步加载的方式：
js文件

 function getWeather(){
 //dealid 传递给后台处理的参数
     var dealid = $("#dealid").val();
     $.ajax({
         url:"你的后台处理地址",
         dataType: "json",
         async:false,
         data:{"dealid":dealid},
         type:"POST",
         success:function(msg){
             var container = $("#weather_info");
             if(msg['status']!=0) {
                 var data = msg['data']['retData'];
                 console.log(data);
                 $("#weather_nav .weather_city").html(data['city']);
                 if(data.today){
                     var history = data.history;
                     var forecast = data.forecast;
                     //data  today weather
                     var todayContent = data.today.index;
                     var todayHtml = "";
                     var todayLength = todayContent.length;
                     for (var i=0;i<todayLength;i++){
                         todayHtml += "<div class='"+todayContent[i]['code']+"'>" +
                             "<p>"+todayContent[i]['name']+" "+todayContent[i]['index']+"</p>" +
                             "<p>"+todayContent[i]['details']+"</p>" +
                             "</div>";
                     }
                     container.append("<div class='weather_today'>" +
                         "<ul>" +
                         "<li>温度 :"+data.today.curTemp+" / "+data.today.type+"</li>" +
                         "<li>时间 :"+data.today.date+" / "+data.today.week+"</li>" +
                         "<li>风力 :"+data.today.fengli+"</li>" +
                         "<li>风向 :"+data.today.fengxiang+"</li>" +
                         "<li>最高温 :"+data.today.hightemp+"</li>" +
                         "<li>最低温 :"+data.today.lowtemp+"</li>" +
                         "<li>PM值 :"+data.today.aqi+"</li>" +
                         "<li>"+todayHtml+"</li>" +
                         "</ul>" +
                         "</div>");
                     //history weather
                     var historyLength = history.length;
                     var historyHtml = "";
                     for(var i=0; i < historyLength;i++){
                         historyHtml +="<li><p>天气 :"+history[i]['type']+"</p>" +
                             "<p>时间 :"+history[i]['date']+" / "+history[i]['week']+"</p>" +
                             "<p>风力 :"+history[i]['fengli']+"</p>"+
                             "<p>风向 :"+history[i]['fengxiang']+"</p>"+
                             "<p>最高温 :"+history[i]['hightemp']+"</p>"+
                             "<p>最低温 :"+history[i]['lowtemp']+"</p>"+
                             "<p>PM值 :"+history[i]['aqi']+"</p></li>";
                     }
                     container.append("<div class='weather_history'><ul>"+historyHtml+"</ul></div>");
                     //forecast weather
                     var forecastLength = forecast.length;
                     var forecastHtml = "";
                     for(var i=0; i < forecastLength;i++){
                         forecastHtml +="<li><p>天气 :"+forecast[i]['type']+"</p>" +
                             "<p>时间 :"+forecast[i]['date']+" / "+forecast[i]['week']+"</p>" +
                             "<p>风力 :"+forecast[i]['fengli']+"</p>"+
                             "<p>风向 :"+forecast[i]['fengxiang']+"</p>"+
                             "<p>最高温 :"+forecast[i]['hightemp']+"</p>"+
                             "<p>最低温 :"+forecast[i]['lowtemp']+"</p></li>";
                     }
                     container.append("<div class='weather_forecast'><ul>"+forecastHtml+"</ul></div>");
                 }
             }else {
                 container.append(msg.content);
                 $("#weather_nav").css("display","none");
             }
         },
         error:function(){
             console.log("出错");
         }
     });
 }

后台处理代码(要include 之前写的 weather.php)：

 require '/weather.php';
 class weatherModule extends BaseModule
 {
     public function weather(){
         $dealid = $_POST['dealid'];
         $deal = mysql查询到相关的数据;
         //city
         $cityCode = get_cityCode($deal['city'],0);
         if($cityCode) {
             $res = get_recent_weather($cityCode);
             echo json_encode(array("status"=>1,"data"=>json_decode($res)));
         }else{
             //province
             $citycode0 = get_cityCode($deal['province']);
             if($citycode0){
                 $res0 = get_recent_weather($citycode0,0);
                 echo json_encode(array("status"=>2,"data"=>json_decode($res0)));
             }else{
                 echo json_encode(array("status"=>0,"content"=>"没有查到该地区天气数据"));
             }
         }
     }
 }

最后页面展示html部分代码：

 <input id="dealid" type="text" placeholder="输入赛事id 查询最近城市天气" style="width: 400px;">
 <input type="submit" onclick="getWeather()">
     <div id="weather_info">
                 <!--这里是Js异步加载的天气数据-->
     </div>
 </body>

代码写完了，我发现这个天气预报的样子和自己想象的简直云泥之别：

剩下的，就交给美工和前端吧。