js如果获取实时天气以及七日天气

最近由于前端考核要求做一个天气界面，所以学习了如何调取天气接口并获取数据。

注意：整个过程我们都是以个人开发者身份进行

首先，进入链接

https://www.tianqiapi.com/

点击右上角-- 用户中心

第一次使用需要注册账户  设置登录邮箱和密码

注册成功后，进入平台，点击左侧控制台界面，里面有个人的APPID和APPSecret，记录下后面会使用

该平台提供数据功能全面，这里我们只介绍实时（基础）天气和七日天气的获取，其他数据请查询https://www.tianqiapi.com/index/doc

1.获取实时（基础）天气

请求方式及url：

• 请求方式：GET

• 接口地址：https://tianqiapi.com/free/day

请求示例

   https://www.tianqiapi.com/free/day?appid=_____&appsecret=______

       这里appid和APPScrect是两个必要参数，就是我们刚才控制台内记录下的个人的APPID和APPSecret

其余参数：

参数名	必选	类型	说明	备注（示例）
appid	是	string	用户appid	注册开发账号
appsecret	是	string	用户appsecret
cityid	否	string	城市ID	请参考 城市ID列表
city	否	string	城市名称	不要带市和区, 支持市区县, 不支持乡镇级别; 如: 青岛、铁西
ip	否	string	IP地址	查询IP所在城市天气
callback	否	string	jsonp参数	如: jQuery.Callbacks
vue	否	string	跨域参数	如果您使用的是react、vue、angular请填写值: 1

 

提示：

       其中city，cityid，ip，三选一，注意city传递参数时不要增以字（区，市）结尾

接口响应json文件

{
"cityid":"101044000",
"city":"\u5357\u5cb8",
"update_time":"16:23",
"wea":"\u591a\u4e91",
"wea_img":"yun",
"tem":"26",
"tem_day":"28",
"tem_night":"20",
"win":"\u5317\u98ce",
"win_speed":"1\u7ea7",
"win_meter":"2km\/h",
"air":"44"
}

响应参数说明：

参数名	类型	说明	备注
cityid	String	城市ID
city	String	城市名称
update_time	String	更新时间
wea	String	天气情况
wea_img	String	天气对应图标	固定9种类型(您也可以根据wea字段自己处理): xue、lei、shachen、wu、bingbao、yun、yu、yin、qing
tem	String	实时温度
tem_day	String	白天温度(高温)
tem_night	String	白天温度(低温)
win	String	风向
win_speed	String	风力等级
win_meter	String	风速
air	String	空气质量

 

2.获取七日天气

请求方式及url：

• 请求方式：GET

• 接口地址：https://tianqiapi.com/free/week

请求示例

    https://www.tianqiapi.com/free/week?appid=_____&appsecret=______

 请求方式与基础天气相同

 

 响应参数

参数名	类型	说明	备注
cityid	String	城市ID
city	String	城市名称
update_time	String	更新时间
date	String	预报日期
wea	String	天气情况
wea_img	String	天气对应图标	固定9种类型(您也可以根据wea字段自己处理): xue、lei、shachen、wu、bingbao、yun、yu、yin、qing
tem_day	String	白天温度(高温)
tem_night	String	白天温度(低温)
win	String	风向
win_speed	String	风力等级