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