摘要：天气接口：利用聚合数据调用天气接口，需先申请一个聚合天气预报APPKEY，再通过官方的文档说明，在天气接口文件内部引入一个weather.php文件，内部有根据城市名、IP、GPS位置来确定当地天气预报方法。天气预报完整文件代码：<?php include("weather.php");//引入文件 $appkey="bff4a7110f51a1c57a69cd
天气接口：利用聚合数据调用天气接口，需先申请一个聚合天气预报APPKEY，再通过官方的文档说明，在天气接口文件内部引入一个weather.php文件，内部有根据城市名、IP、GPS位置来确定当地天气预报方法。
天气预报完整文件代码：
<?php
include("weather.php");//引入文件
$appkey="bff4a7110f51a1c57a69cd5e2d4e88e7";
$weather=new weather($appkey);//实例化天气对象
$city=isset($_GET['city']) ? $_GET['city']:'';//获取城市名，以城市名来确定天气情况
if($cityWeatherResult['error_code'] == 0){ //获取天气数据
$data = $cityWeatherResult['result'];
}else{
echo $cityWeatherResult['error_code'].":".$cityWeatherResult['reason'];
}
?>html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/weather-icons.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<svg id="back">
<radialGradient id="SVGID_1_" cx="0" cy="0" r="320.8304" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:#FFDE17;stop-opacity:0.7" />
<stop offset="1" style="stop-color:#FFF200;stop-opacity:0" />
</radialGradient>
<path id="sunburst" style="fill:url(#SVGID_1_);" d="M0,319.7c-18.6,0-37.3-1.6-55.5-4.8L-7.8,41.4c5.1,0.9,10.6,0.9,15.7,0L56,314.8C37.6,318,18.8,319.7,0,319.7z
M-160.8,276.6c-32.5-18.8-61.3-42.9-85.5-71.6L-34,26.2c3.4,4.1,7.4,7.4,12,10.1L-160.8,276.6z M161.3,276.4L22.1,36.2
c4.5-2.6,8.6-6,12-10.1l212.6,178.5C222.5,233.4,193.8,257.6,161.3,276.4z M-302.5,108.3C-315.4,73-321.9,36-322-1.8l277.6-0.5
c0,5.3,0.9,10.4,2.7,15.2L-302.5,108.3z M302.6,107.8L41.8,12.8c1.7-4.7,2.6-9.7,2.6-14.9c0-0.3,0-0.6,0-1H322l0-1.3l0,1.9
C322,35.4,315.5,72.5,302.6,107.8z M-41.8-17.5l-261-94.5c12.8-35.4,31.6-68,55.8-96.9L-34.1-30.8C-37.5-26.8-40.1-22.3-41.8-17.5z
M41.7-17.7c-1.8-4.8-4.4-9.3-7.8-13.3l212-179.2c24.3,28.8,43.3,61.3,56.3,96.6L41.7-17.7z M-22.2-40.8l-139.6-240
c32.7-19,68.1-32,105.2-38.6L-8-46.1C-13-45.2-17.8-43.4-22.2-40.8z M22-40.9c-4.4-2.6-9.2-4.3-14.2-5.1l47.1-273.6
c37.2,6.4,72.7,19.2,105.4,38L22-40.9z" />
</svg>
<nav>
<ul>
<li>
<a id="button-snow" class="active">
<i class="wi wi-snow">
</i>
</a>
</li>
<li>
<a id="button-wind">
<i class="wi wi-strong-wind">
</i>
</a>
</li>
<li>
<a id="button-rain">
<i class="wi wi-rain">
</i>
</a>
</li>
<li>
<a id="button-thunder">
<i class="wi wi-lightning">
</i>
</a>
</li>
<li>
<a id="button-sun">
<i class="wi wi-day-sunny">
</i>
</a>
</li>
</ul>
</nav>
<div id="card" class="weather">
<svg id="inner">
<defs>
<path id="leaf" d="M41.9,56.3l0.1-2.5c0,0,4.6-1.2,5.6-2.2c1-1,3.6-13,12-15.6c9.7-3.1,19.9-2,26.1-2.1c2.7,0-10,23.9-20.5,25 c-7.5,0.8-17.2-5.1-17.2-5.1L41.9,56.3z"
/>
</defs>
<circle id="sun" style="fill: #F7ED47" cx="0" cy="0" r="50" />
<g id="layer3">
</g>
<g id="cloud3" class="cloud">
</g>
<g id="layer2">
</g>
<g id="cloud2" class="cloud">
</g>
<g id="layer1">
</g>
<g id="cloud1" class="cloud">
</g>
</svg>
<div class="details">
<div class="temp">
<?php echo $data['sk']['temp'];?>
<span>
℃
</span><br>
<div class="city"><?php echo $city?></div>
<span style="position:absolute;margin-left:140px;margin-top:-60px;">
天气
</span>
<span id="weather" style="position:absolute;margin-left:190px;margin-top:-60px;">
<?php echo $data['today']['weather'];?>
</span>
<span style="position:absolute;margin-left:140px;margin-top:-30px;">
风向
</span>
<span style="position:absolute;margin-left:190px;margin-top:-30px;">
<?php echo $data['sk']['wind_direction'].$data['sk']['wind_strength'];?>
</span>
</div>
<div class="right">
<div id="date">
<?php
echo date("m-d");$weekarray=array("日","一","二","三","四","五","六");echo " 星期".$weekarray[date("w")];
?>
</div>
<div id="summary">
</div>
</div>
</div>
</div>
<svg id="outer">
</svg>
</div>
<script src='js/jquery-2.2.4.min.js'>
</script>
<script src='js/TweenMax.min.js'>
</script>
<script src='js/snap.svg-min.js'>
</script>
<script src="js/index.js"></script>
</body>
<script type="text/javascript">
var n_weather="<?php echo $data['today']['weather']; ?>";
var sun=n_weather.indexOf("晴")+1;
var snow=n_weather.indexOf("雪")+1;
var thunder=n_weather.indexOf("雷")+1;
var rain=n_weather.indexOf("雨")+1;
window.onload=function (){
if(sun){
$("#button-sun").trigger("click");//jquery模拟点击事件
}
if(snow){
$("#button-snow").trigger("click");
}
if(thunder){
$("#button-thunder").trigger("click");
}
if(rain){
if ((sun==0)&&(snow==0)&&(thunder==0)) {
$("#button-rain").trigger("click");
}
}
else{
$("#button-wind").trigger("click");
}
}
</script>
</html>效果图：
批改老师：韦小宝批改时间：2019-01-21 16:17:08
老师总结：不错不错 写的很棒 接口的调用还是蛮简单的掌握了之后调用任何接口都是轻而易举的事
