使用typescript做一个天气预报页面的单页面应用天气json接口

转载

数码精灵abc 2023-10-13 09:40:15

文章标签 天气 json ci 数据三级联动 文章分类 TypeScript 前端开发

想写个天气的应用，在网上找了一圈都没找到有关 JSONP 的接口，只有中国天气网的 JSON 接口，这就简单，直接用 SAE 做代理，将数据处理为 JSONP 的形式返回就行了，顺便分析了中国天气网的省市区三级联动的数据，这样就直接可以做天气应用了。

说说我的接口的用法吧，直接 get 请求，地址为 "http://demo.alphatr.com/weather/info.php"，参数有三个。

get 参数，获取操作可以取值 "province"，"city"，"town"，"weather"，"weathern"；分别是获取省 (直辖市) 的列表，根据省 ID 获取市的列表，根据省市的 ID 获取区县列表，根据省市区 ID 获取天气预报，根据省市区 ID 获取实时天气。 citycode 参数就是操作中需要的 ID，获取省列表就可以不需要了 callback 参数就是 JSONP 的 callback 啦。

具体用法看看我的 Demo 吧，demo 地址：天气接口 JSONP 示例，

var baseUrl = "http://demo.alphatr.com/weather/info.php";
 
// 将获取的省市区列表 JSON 格式转换为 HTML 字符串
var appendData = function( data , el ) {
	var list = [];
	$.each(data, function( key, val ){
		// console.log(key);
		list.push('<option value="' + key + '">' + val + '</option>');
	})
	$(el).html(list.join(''));
}
/* 三级联动 */
// 获取省列表
$.getJSON( baseUrl + "?get=province&callback=?" , function (data) {
	appendData( data , "#province" );
	var provCode = $("#province").val(); // 省 ID
	// 根据省 ID 获取市列表
	$.getJSON( baseUrl + "?get=city&citycode=" + provCode + "&callback=?" , function (data) {
		appendData( data , "#city" );
		var cityCode = $("#city").val(); // 市 ID
		// 获取区 列表
		$.getJSON( baseUrl + "?get=town&citycode=" + provCode + cityCode + "&callback=?" , function (data) {
			appendData( data , "#town" );
		})
	})
})
 
/* 相应值的改变 */
$("#province").bind( "change" , function(){
	var provCode = $("#province").val();
	$.getJSON( baseUrl + "?get=city&citycode=" + provCode + "&callback=?" , function (data) {
		appendData( data , "#city" );
		var cityCode = $("#city").val();
		$.getJSON( baseUrl + "?get=town&citycode=" + provCode + cityCode + "&callback=?" , function (data) {
			appendData( data , "#town" );
		})
	})
})
 
$("#city").bind( "change" , function(){
	var provCode = $("#province").val();
	var cityCode = $("#city").val();
	$.getJSON( baseUrl + "?get=town&citycode=" + provCode + cityCode + "&callback=?" , function (data) {
		appendData( data , "#town" );
	})
})
 
// 响应获取按钮
$("#btn").bind( "click" , function() {
	var code = $("#province").val();
	if( $("#city").val() == "00" ) {
		code += $("#town").val();
		code += $("#city").val();
	} else {
		code += $("#city").val();
		code += $("#town").val();
	}
	console.log(code);
	// 获取天气数据
	$.getJSON( baseUrl + "?get=weather&citycode=" + code + "&callback=?" , function (data) {
		console.log(data);
		var info = [];
		$.each( data.weatherinfo , function( key , val ) {
			info.push(key + ":" + val );
		})
		console.log(info);
		$("pre").html( info.join(",\n"));
	})
})

需要注意的是在直辖市的获取中，每次市的返回值都是 00，而地区的 ID 不是直辖市+市+区，而是直辖市+区+00，例如上海崇明的 code 是 10102 11 00，而不是 10102 00 11。

完整的代码可以直接看 Demo 的源码，Demo just is demo，肯定功能不全，其他的比如根据 IP 判断地区然后显示，将选择后的地区代码存储进 cookie 中等等都是可以加的~

下面给出天气数据的解释

先是天气预报的数据

city:西安, // 地区名称
city_en:xian, // 英文 (汉语拼音) 名称
date_y:2012年8月30日,// 当前日期
date:, // 网上解释是阴历年
week:星期四, // 星期
fchh:18, // 更新点时间 (18点)
cityid:101110101, // 地区 ID
 
// 六天的温度
temp1:21℃~28℃, // 在更新点之前是今日最高温到午夜的最低温，在更新点之后是今日午夜的最低温到明日的最高温
temp2:18℃~22℃, // 以此类推
temp3:17℃~26℃,
temp4:16℃~28℃,
temp5:16℃~29℃,
temp6:17℃~30℃,
// 华氏温度
tempF1:69.8℉~82.4℉, 
tempF2:64.4℉~71.6℉,
tempF3:62.6℉~78.8℉,
tempF4:60.8℉~82.4℉,
tempF5:60.8℉~84.2℉,
tempF6:62.6℉~86℉,
// 天气描述，同样根据更新点确定 weather1 是今天还是明天的
weather1:阴转中雨,
weather2:中雨转大雨,
weather3:小到中雨转多云,
weather4:多云转晴,
weather5:晴,
weather6:晴转多云,
// 12 幅图片对应六天的天气，更新点前就是今日白天，今日夜间，明日白天，明日夜间，更新点之后就是今日夜间开始的
img1:2, //阴天
img2:8, // 中雨，和一图片对应天气的阴转中雨
img3:8, // 依次类推
img4:9,
img5:21,
img6:1,
img7:1,
img8:0,
img9:0, // 晴
img10:99, // 第五天是晴，没有 "转" 了，所以这幅图片是无效占位，和前一幅显示相同
img11:0,
img12:1,
img_single:8,
// 分别对应图片的描述
img_title1:阴,
img_title2:中雨,
img_title3:中雨,
img_title4:大雨,
img_title5:小到中雨,
img_title6:多云,
img_title7:多云,
img_title8:晴,
img_title9:晴,
img_title10:晴,
img_title11:晴,
img_title12:多云,
img_title_single:中雨,
// 六天的风力和风向
wind1:西风小于3级转3-4级,
wind2:西风3-4级,
wind3:旋转风小于3级,
wind4:旋转风小于3级,
wind5:旋转风小于3级,
wind6:旋转风小于3级,
// 今明的风向
fx1:西风,
fx2:西风,
// 六天的风力(和风向分开了)
fl1:小于3级转3-4级,
fl2:3-4级,
fl3:小于3级,
fl4:小于3级,
fl5:小于3级,
fl6:小于3级,
// 生活指数，也和更新点有关系
index:热, // 一天舒适度
index_d:天气较热，建议着短裙、短裤、短套装、T恤等夏季服装。年老体弱者宜着长袖衬衫和单裤。, // 一天舒适度的描述
index48:舒适, //两天的舒适度(48小时)
index48_d:建议着薄型套装或牛仔衫裤等春秋过渡装。年老体弱者宜着套装、夹克衫等。, // 描述
index_uv:弱, // 一天的紫外线指数
index48_uv:最弱, // 两天紫外线指数
index_xc:不宜, // 洗车指数
index_tr:一般, // 旅游指数
index_co:较舒适, //舒适度指数
st1:24, // 这些不知道干啥的~
st2:20,
st3:17,
st4:14,
st5:26,
st6:15,
index_cl:不宜, // 晨练指数
index_ls:不宜, // 晾晒指数
index_ag:极易发 // 息斯敏过敏气象指数(我也不知道干啥的~)

实时天气的数据

city:西安, // 地区名
cityid:101110101, // 地区 ID
temp1:21℃, // 今天夜间温度
temp2:28℃, // 明天白天温度
weather:阴转中雨, // 天气描述
img1:n2.gif, // 今天夜间天气图片 n 表示 night
img2:d8.gif, // 明天白天天气图片 d 表示 day
ptime:18:00 // 更新时间

同样的，天气和更新点是由关系的，前半天天气就是今天白天和夜间，这个实时温度更新的比较频繁~

图片的接口

刚才上面对应有图片的 ID ，现在就说说中国天气网的图片吧，图片接口分为两类，一类是提供给外边插件的图片，有 70×65，50×46，20×20，21×15 四种尺寸，分别用前缀 a，b，c，d 表示，其中最小的 d 类型是有背景色的，例如 "http://m.weather.com.cn/img/d0.gif" 这个图片地址

表示 d 21×15 的尺寸，0 表示是晴天(由前面的代码得)；第二类的图片是他网站上面自己用的图片，有 28×20 一种尺寸，但分白天和晚上 d 表示白天(day)，n 表示夜晚(night)，然后后面接天气的 ID，例如 "https://s2.51cto.com/images/blog/202310/10095401_6524aeb9c38c559919.gif" 这个图片地址使用typescript做一个天气预报页面的单页面应用天气json接口_数据