关于免费的天气预报接口其实有很多,本文主要是以知心天气为例
知心天气:https://www.seniverse.com/
一.注册知心天气账号,完成后进入“产品--天气数据API”,找到我的信息,记住我的API密钥和我的用户ID(后面有用的)
二.创建一个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方式调用必须绑定域名,并使用签名验证方式。
在知心天气中点击我的账号,找到我的服务,修改绑定域名
四.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中进行处理即可。