免费天气预报接口

置顶尾善爱看海

已于 2023-09-12 14:26:24 修改

阅读量7.8k

点赞数 1

文章标签：免费天气 js html

于 2018-05-09 17:09:05 首次发布

本文链接：https://blog.csdn.net/weichangIT/article/details/80255206

版权

关于免费的天气预报接口其实有很多，本文主要是以知心天气为例

知心天气：https://www.seniverse.com/

一.注册知心天气账号，完成后进入“产品--天气数据API”，找到我的信息，记住我的API密钥和我的用户ID（后面有用的）

20180509161852462

二.创建一个js文件命名为weather.js

var UID = "xxxxxx"; // 用户ID
var KEY = "xxxxxxx"; // 用户key
var API = "http://api.seniverse.com/v3/weather/now.json"; // 获取天气实况
var LOCATION = "wuhan"; // 除拼音外，还可以使用 v3 id、汉语等形式
// 获取当前时间戳
var ts = Math.floor((new Date()).getTime() / 1000);
// 构造验证参数字符串
var str = "ts=" + ts + "&uid=" + UID;
// 使用 HMAC-SHA1 方式，以 API 密钥（key）对上一步生成的参数字符串（raw）进行加密
// 并将加密结果用 base64 编码，并做一个 urlencode，得到签名 sig
var sig = CryptoJS.HmacSHA1(str, KEY).toString(CryptoJS.enc.Base64);
sig = encodeURIComponent(sig);
str = str + "&sig=" + sig;
// 构造最终请求的 url
var url = API + "?location=" + LOCATION + "&" + str + "&callback=getWeather";
// 向 HTML 中动态插入 script 标签，通过 JSONP 的方式进行调用
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = url;
$('body').append(newScript);

说明：

1.UID是上面提到的我的用户ID；2.KEY是我的API密钥；3.LOCATION是地区可以更改为你需要的地区（本文中我写的是武汉）；4.sig变量内有一个CryptoJS，需要下载，下载地址是：CryptoJs下载5.变量url中的callback=getweather是jspon回调函数，在后面调用接口的时候有用；6.此js最终是生成一个经过签名后script标签,需要添加到页面中。

三.绑定域名

心知天气API增加了JSONP的支持，可以在网页中直接调用API接口，而不通过服务器中转。JSONP方式调用必须绑定域名，并使用签名验证方式。

在知心天气中点击我的账号，找到我的服务，修改绑定域名

20180509170315141

四.html代码示例（此代码只做示例）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天气预报</title>
    <script src="js/jquery-2.0.3.js"></script>
    <script src="js/hmac-sha1.js"></script>
</head>
<body>
<div >
    <script>
        /*天气预报接口*/
        function getWeather(data) {
            var weatherData = data.results[0];
            var weather = weatherData.now.text;
            temperature = weatherData.now.temperature;
        }
    </script>
</div>
<script src="js/weather.js"> </script>
</body>
</html>

说明：这里需要导入jquery.js ，hmac_sha1.js，weather.js 三个文件

hmac_sha1.js就是上面CryptoJS，weather.js就是步骤2中的js文件，页面加载会返回

getWeather({
	"results": [{
		"location": {
			"id": "WT3Q0FW9ZJ3Q",
			"name": "武汉",
			"country": "CN",
			"path": "武汉,武汉,湖北,中国",
			"timezone": "Asia/Shanghai",
			"timezone_offset": "+08:00"
		},
		"now": {
			"text": "多云",
			"code": "4",
			"temperature": "27"
		},
		"last_update": "2018-05-09T16:35:00+08:00"
	}]
});

返回的结果会调用html中的getWeather()方法，需要处理天气接口数据在getWeather中进行处理即可。