天气预报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>

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

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

巴特西

天气预报API简单实现

最新文章

热门文章