此次开发是基于和风天气以及高德IP定位的api
（无注释警告⚠
Demo=>个人主页左上角

序

由于心知天气现在逐渐变得不好用

对个人开发者不再友好

而个人又不喜欢别的天气插件提供商提供的服务

便开启了这个开发过程（应该不咕哈哈哈哈🐦

前期准备

必须先注册好和风天气以及高德账号并获取自己的KEY

获取经纬度

因为和风天气的接口的查询必须包含Location或者经纬度

为了方便起见，我们这里选择使用高德的IP定位查询接口来获取经纬度

https://restapi.amap.com/v5/ip?parameters

官方技术手册

获取天气信息

我们打开浏览器，输入以下地址

https://devapi.qweather.com/v7/weather/now?key=你的key&location=110.38,21.19

上面的110.38和21.19便是上面获取到的经纬度

便可以得到当前IP所在地的天气状况了

导入和风天气图标

关于天气图标

和风天气官方已经列出了很多种使用的办法

这里就不再复述

和风天气图标使用文档

和风天气GitHub图标库

这边推荐使用<i>标签的办法进行使用

<i class="qi-301"></i>

代码时间

前端

HTML

点击展开 

<!--KK天气-->
<div class="kk-weather" id="kk_weather">
    <div class="kk-weather-box">
        <div class="kk-weather-icon">
            <i class="fa fa-spinner fa-spin" id="kk_icon"></i>
        </div>
        <div class="kk-weather-data">
            <div class="kk-weather-city">
                <a id="kk_city">---</a>
            </div>
            <div class="kk-weather-wd">
                <i class="fa fa-thermometer" style="padding-right:5px;"></i><a id="kk_temp">--</a>
            </div>
        </div>
    </div>
</div>
<!--天气结束-->

CSS

点击展开 

.kk-weather {
    padding-top: 15px;
    padding-left: 10px;
    position: fixed;
    /*display: none;*/
}

.kk-weather-box {
    width: fit-content;
    height: 50px;
    border-radius: 8px;
    box-shadow: 5px 5px 10px #b1b4b6, -5px -5px 10px #ffffff;
    background-image: linear-gradient(to top, #dfe9f38a 0%, #ffffff91 100%);
}

.kk-weather-icon {
    float: left;
    width: 46px;
    height: 40px;
    padding: 5px 5px 5px 5px;
    text-shadow: 1px 1px 0 #fff;
    /*filter: drop-shadow(0 0 5px #93acba);*/
    overflow: visible;
    text-align: center;
    -webkit-backface-visibility: visible;
    -webkit-transform: translate3d(0, 0, 0);
}

#kk_icon:hover{
    color:#ff7f50;
}

#kk_icon {
    font-size: 30px;
    line-height: 40px;
    width: 40px;
    height: 40px;
}

.kk-weather-data {
    float: right;
    border-radius: 8px;
    padding: 5px 8px 0 0;
    /*box-shadow: 5px 5px 10px #b1b4b6, -5px -5px 10px #ffffff;*/
}

.kk-weather-city {
    height: 20px;
    line-height: 20px;
    text-align: center;
    text-shadow: 1px 1px 0 #fff;
}

.kk-weather-city a {
    font-style: normal;
    font-family: sans-serif;
}

.kk-weather-wd {
    height: 20px;
    line-height: 20px;
    text-align: center;
    text-shadow: 1px 1px 0 #fff;
    font-style: normal;
    padding-top: 2px;
    padding-bottom: 3px;
}

.kk-weather-wd a {
    font-style: normal;
}

JS

点击展开 

class KK {
    init(){
        const url = "你的api";
        const request = new XMLHttpRequest();
        request.open("get", url,true);
        request.send();
        request.onload = function () {
            if (request.status === 200) {
                const json = JSON.parse(request.responseText);

                if(json.state === 503){
                    console.log("\n\n天气获取失败！");
                }else if(json.state === 418){
                    console.log("\n\n天气获取成功！");
                    document.getElementById("kk_icon").className= 'qi-'+json.icon;
                    document.getElementById('kk_temp').innerHTML = json.temp;
                    document.getElementById('kk_city').innerHTML = json.city;
                    document.getElementById('kk_weather').style.display = 'block';
                }else{
                    console.log("\n\n天气出了未知错误！");
                }
            }else{
                console.log("\n\n咦~好像天气接口出了问题");
            }
        }
    }
}

const kk=new KK()
kk.init()

后端接口（PHP）

点击展开 

<?php

$gd_key='你的高德api';
$hf_key='你的和风天气api';

if(isset($_REQUEST['ip'])){
    $ip=$_REQUEST['ip'];
}else{
    $ip= $_SERVER["REMOTE_ADDR"];
    //$ip='125.90.50.152';
}

$Url = 'https://restapi.amap.com/v5/ip?key='.$gd_key.'&ip='.$ip.'&type='.'4';
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $Url);
curl_setopt($curl, CURLOPT_HEADER, 0);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($curl, CURLOPT_HTTP_VERSION, CURL_HTTP_VERSION_1_1);
$city_data = curl_exec($curl);


curl_close($curl);
$city_data = json_decode($city_data, true);

if($city_data['infocode'] !='10000'){
    $data = array('state'=>503);
    exit(json_encode($data));
}

//print_r($city_data);

$city = $city_data['city'];

$Url = 'https://devapi.qweather.com/v7/weather/now?location='.$city_data['location'].'&key='.$hf_key.'&gzip=n';
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $Url);
curl_setopt($curl, CURLOPT_HEADER, 0);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($curl, CURLOPT_HTTP_VERSION, CURL_HTTP_VERSION_1_1);
$weather_data = curl_exec($curl);
$weather_data = json_decode($weather_data,true);



if($weather_data['code']!='200'){
    $data = array('state'=>503);
    exit(json_encode($data));
}

$icon = $weather_data['now']['icon'];
$temp = $weather_data['now']['temp'];

header('Content-Type:application/json; charset=utf-8');
header('Access-Control-Allow-Origin: *');
$data = array('state'=>418,'city'=>$city,'icon'=>$icon,'temp'=>$temp);


exit(json_encode($data));

最后修改：2022 年 05 月 19 日
© 允许规范转载
要不？请我吃一下沙县连锁大酒店？