TP5結合聚合數據天氣預報API查詢天氣

時間 2019-12-04

原文原文鏈接

分享一個php版本的查詢天氣接口。免費查詢天氣的接口有不少，好比百度的apistore的天氣api接口，我原本想採用這個接口的，惋惜今天百度apistore死活打不開了。那就用聚合數據的天氣api接口吧，也是免費的，不過聚合數據的接口申請相對繁瑣。
一、註冊一個聚合數據的帳號
二、實名認證你的帳號
三、申請你須要的api接口
四、申請驗證你的api接口
申請地址：https://www.juhe.cn/docs/api/...
雖然是繁瑣了不少，不過返回的信息確是很是的豐富。
好了，如今來分享一下，tp5中怎麼整合進去。javascript

config.php中，配置你的appkey：php

//配置文件
return [
    
    'appkey' => ''  //此處填入你的key
];

common.php中放入請求的方法:css

<?php

/**
 * 請求接口返回內容
 * @param  string $url [請求的URL地址]
 * @param  string $params [請求的參數]
 * @param  int $ipost [是否採用POST形式]
 * @return  string
 */
function juhecurl($url, $params=false, $ispost=0){
    
    $httpInfo = [];
    $ch = curl_init();

    curl_setopt( $ch, CURLOPT_HTTP_VERSION , CURL_HTTP_VERSION_1_1 );
    curl_setopt( $ch, CURLOPT_USERAGENT , 'JuheData' );
    curl_setopt( $ch, CURLOPT_CONNECTTIMEOUT , 60 );
    curl_setopt( $ch, CURLOPT_TIMEOUT , 60);
    curl_setopt( $ch, CURLOPT_RETURNTRANSFER , true );
    curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
    if( $ispost )
    {
        curl_setopt( $ch , CURLOPT_POST , true );
        curl_setopt( $ch , CURLOPT_POSTFIELDS , $params );
        curl_setopt( $ch , CURLOPT_URL , $url );
    }
    else
    {
        if($params){
            curl_setopt( $ch , CURLOPT_URL , $url.'?'.$params );
        }else{
            curl_setopt( $ch , CURLOPT_URL , $url);
        }
    }
    $response = curl_exec( $ch );
    if ($response === FALSE) {
        //echo "cURL Error: " . curl_error($ch);
        return false;
    }
    $httpCode = curl_getinfo( $ch , CURLINFO_HTTP_CODE );
    $httpInfo = array_merge( $httpInfo , curl_getinfo( $ch ) );
    curl_close( $ch );
    
    return $response;
}

控制器中,index.php的代碼:html

<?php
// +----------------------------------------------------------------------
// | 利用聚合數據查詢天氣
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2022 http://baiyf.cn All rights reserved.
// +----------------------------------------------------------------------
// | Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )
// +----------------------------------------------------------------------
// | Author: NickBai <1902822973@qq.com>
// +----------------------------------------------------------------------
namespace app\weather\controller;

use think\Controller;

class Index extends Controller
{
    public function index()
    {
        return $this->fetch();
    }
    
    /**
     * 根據城市獲取天氣狀況
     */
    public function getWeatherByCity()
    {
        $cityName = input('param.cityname');
        $url = "http://op.juhe.cn/onebox/weather/query";
        $appkey = config('appkey');
        
        $params = [
                "cityname" => $cityName,//要查詢的城市，如：溫州、上海、北京
                "key" => $appkey,//應用APPKEY(應用詳細頁查詢)
                "dtype" => "",//返回數據的格式,xml或json，默認json
        ];
        $paramstring = http_build_query($params);
        
        $content = juhecurl($url, $paramstring);
        $result = json_decode($content, true);
        
        if( empty( $result ) ){
            return json( ['code' => -1, 'data' => '', 'msg' => '請求失敗'] );
        }
        
        if( '0' != $result['error_code'] ){
            return json( ['code' => -2, 'data' => '', 'msg' => $result['error_code']." : ".$result['reason']] );
        }
        
        return json( ['code' => 1, 'data' => $result, 'msg' => 'success'] );
    }
}

view層中,index.html的代碼以下:java

<!doctype html>
<html>
  
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>天氣查詢</title>
    <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>
    <script src="/static/layer/layer.js" type="text/javascript"></script>
    <link href="/static/css/style.css" rel="stylesheet" type="text/css">
  <body>
    <!--nav是導航 結束-->
    <div class="search center">
      <input class="text-pc" id="searchbox" name="" type="text" placeholder="請輸入城市名稱"/>
      <a class="button-pc" id="searchBtn" href="javascript:void(0);">
        <span class="icon-search"></span>
        <span class="search2 am-hide-sm-only">查詢</span></a>
    </div>
    
    <div class="check-Result center" style="display:block">
        
    </div>
    
    <script type="text/javascript">
        $(function(){

            $("#searchBtn").click(function(){
                var city = $("#searchbox").val();
                if( '' == city ){
                    layer.alert('城市名稱不能爲空', { 'icon' : 2 });
                    return ;
                }
                var index = layer.load(0, {shade: false}); //0表明加載的風格，支持0-2

                $.getJSON( "{:url('weather/index/getWeatherByCity')}", { 'cityname' : city }, function(res){

                    layer.close( index );
                    if( 1 == res.code ){
                        
                    }else{

                        layer.alert( res.msg , { 'icon' : 2 });
                    }
                });
            })
        });
    </script>
    
  </body>
</html>

經過瀏覽器訪問頁面以下:

輸入你要查詢的城市,好比：南京,點擊查詢

json數據成功返回,這是你就能夠根據你的須要渲染頁面了。參數的講解參照這裏
https://www.juhe.cn/docs/api/...jquery