天气查询
功能简介
利用前端事件，调用阿里云天气查询接口，实现输入城市后，快捷查询出该城市的天气、气温等信息。
实现步骤
1 准备天气查询接口
1.1 购买接口
首先我们需要找到一个天气信息查询接口，这里以阿里云官方的接口为例，介绍利用前端事件接入天气查询接口实现天气查询功能。
天气查询接口：全国天气预报查询接口
可以看到，此接口新用户可以0元购买100次，购买后可以在云市场看到购买的订单。
1.2 接口分析
接下来，点击接口，往下翻到 API 接口的详情介绍，对 [快递物流节点跟踪] 的接口进行分析。
【调用地址】：https://ali-weather.showapi.com/area-to-weather 或 http://ali-weather.showapi.com/area-to-weather
【请求方式】：GET
【返回类型】：JSON
【请求的Headers】：Authorization: APPCODE +英文空格+ 你自己的 APPCODE（服从阿里云云市场的标准鉴权方式）
Authorization:APPCODE AppCode值【请求参数】
| 名称 | 类型 | 是否必须 | 描述 |
|---|---|---|---|
| area | STRING | 可选 | 地区名称。名称、id和code必须输入一个。如果都输入，以areaCode为准。 |
| areaCode | STRING | 可选 | 地区code。名称、id和code必须输入一个。如果都输入，以areaCode为准。 |
| areaid | STRING | 可选 | 地区id |
| need3HourForcast | STRING | 可选 | 是否需要每小时数据的累积数组。由于本系统是半小时刷一次实时状态，因此实时数组最大长度为48。每天0点长度初始化为0. 1为需要 0为不 |
| needAlarm | STRING | 可选 | 是否需要天气预警。1为需要，0为不需要。 |
| needHourData | STRING | 可选 | 是否需要每小时数据的累积数组。由于本系统是半小时刷一次实时状态，因此实时数组最大长度为48。每天0点长度初始化为0. |
| needIndex | STRING | 可选 | 是否需要返回指数数据，比如穿衣指数、紫外线指数等。1为返回，0为不返回。 |
| needMoreDay | STRING | 可选 | 是否需要返回7天数据中的后4天。1为返回，0为不返回。 |
【正常返回示例】：
{
"showapi_res_code": 0,
"showapi_res_error": "",
"showapi_res_body": {
"cityInfo": {//查询的地区基本资料
"c6": "yunnan",//城市所在省英文名
"c5": "丽江",//城市所在市中文名
"c4": "lijiang",//城市所在市英文名
"c3": "丽江",//城市中文名
"c9": "中国",//城市所在国家中文名
"c8": "china",//城市所在国家英文名
"c7": "云南",//城市所在省中文名
"c17": "+8",
"c16": "AZ9888",//雷达站号
"c1": "101291401",//区域id
"c2": "lijiang",//城市英文名
"c11": "0888",//城市区号
"longitude": 100.222,//经度
"c10": "2",//城市级别
"latitude": 26.903,//纬度
"c12": "674100",//邮编
"c15": "2394"//海拔
},
"now": {//现在实时的天气情况
"aqi": "71", //空气质量指数，越小越好
"aqiDetail": { //aqi明细数据
"aqi": "71",
"area": "北京",
"area_code": "beijing",
"co": "0.817", //一氧化碳1小时平均
"no2": "52", //二氧化氮1小时平均
"o3": "33", //臭氧1小时平均
"o3_8h": "9", //臭氧8小时平均
"pm10": "56", //颗粒物（粒径小于等于10μm）1小时平均
"pm2_5": "51", //颗粒物（粒径小于等于2.5μm）1小时平均
"primary_pollutant": "颗粒物(PM2.5)",
"quality": "良", //空气质量指数类别，有“优质、良好、轻度污染、中度污染、重度污染、严重污染”6类
"so2": "3" //二氧化硫1小时平均
},
"sd": "70%", //空气湿度
"temperature": "15", //当前气温
"temperature_time": "18:30", //采集时间
"weather": "晴", //天气文字标识
"weather_pic": "http://appimg.showapi.com/images/weather/icon/day/00.png", //天气图片地址
"wind_direction": "北风", //风向名称
"wind_power": "1级" //风力
},
"f1": {//今天的天气预报 ,f2是明天，f3是后天，直到f7
"air_press": "1008 hPa", //大气压
"day": "20151023", //日期
"day_air_temperature": "18", //白天天气温度(摄氏度)
"day_weather": "晴", //白天天气标识
"day_weather_pic": "http://app1.showapi.com/weather/icon/day/00.png", //白天天气图标
"day_wind_direction": "无持续风向", //白天风向
"day_wind_power": "微风<10m/h", //白天风力
"jiangshui": "3%", //降水概率
"night_air_temperature": "9", //晚上气温(摄氏度)
"night_weather": "晴",//晚上天气标识
"night_weather_pic": "http://app1.showapi.com/weather/icon/night/00.png", //晚上天气图标
"night_wind_direction": "无持续风向", //晚上风向
"night_wind_power": "微风<10m/h", //晚上风力
"sun_begin_end": "06:35|17:23", //日出|日落时间
"weekday": 5, //星期几
"ziwaixian": "中等", //紫外线强度
"index": {
"yh": {//约会指数
"title": "较不适宜",
"desc": "建议尽量不要去室外约会。"
},
"ls": {//晾晒指数
"title": "不宜",
"desc": "降水可能会淋湿衣物，请选择在室内晾晒。"
},
"clothes": {//穿衣指数
"title": "较舒适",
"desc": "建议穿薄外套或牛仔裤等服装。"
},
"dy": {//钓鱼指数
"title": "不宜",
"desc": "天气不好，不适宜垂钓。"
},
"beauty": {//化妆指数
"title": "保湿",
"desc": "请选用中性保湿型霜类化妆品。"
},
"xq": {//心情指数
"title": "较差",
"desc": "雨水可能会使心绪无端地挂上轻愁。"
},
"travel": {//旅游
"title": "适宜",
"desc": "较弱降水和微风将伴您共赴旅程。"
},
"hc": {//划船指数
"title": "不适宜",
"desc": "天气不好，建议选择别的娱乐方式。"
},
"zs": {//中暑指数
"title": "无",
"desc": "气温不高，中暑几率极低。"
},
"cold": {//感冒
"title": "较易发",
"desc": "降温幅度较大，预防感冒。"
},
"gj": {//逛街指数
"title": "较适宜",
"desc": "有降水，逛街需要带雨具。"
},
"uv": {//紫外线
"title": "最弱",
"desc": "辐射弱，涂擦SPF8-12防晒护肤品。"
},
"cl": {//晨练指数
"title": "较不宜",
"desc": "室外锻炼请携带雨具。"
},
"glass": {//太阳镜
"title": "不需要",
"desc": "白天能见度差不需要佩戴太阳镜"
},
"wash_car": {//洗车
"title": "不宜",
"desc": "有雨，雨水和泥水会弄脏爱车。"
},
"aqi": {//空气质量指数，越小越好
"title": "中",
"desc": "无需特别防护"
},
"ac": {//空调控制
"title": "较少开启",
"desc": "体感舒适，不需要开启空调。"
},
"mf": {//美发指数
"title": "一般",
"desc": "建议选用防晒滋润型护发品或带遮阳帽。"
},
"ag": {//过敏指数
"title": "极不易发",
"desc": "无需担心过敏，可放心外出，享受生活。"
},
"pj": {//啤酒指数
"title": "较适宜",
"desc": "适量的饮用啤酒，注意不要过量。"
},
"nl": {//夜生活指数
"title": "较不适宜",
"desc": "建议夜生活最好在室内进行。"
},
"pk": {//放风筝指数
"title": "不宜",
"desc": "天气不好，不适宜放风筝。"
}
},
"alarmList": [
{
"city": "大连", //预警城市
"issueContent": "大风蓝色预警:预计23日23时到24日08时:大连、锦州、营口、盘锦、葫芦岛地区陆地偏北风6级,阵风7级;渤海、渤海海峡、黄海北部偏北风7级,阵风8级。大连、丹东、锦州、营口、盘锦、葫芦岛附近海域和航线将受影响,请注意防范。省气象灾害预警中心10月23日16时35分发布",
"issueTime": "2015-10-23 16:40:00",
"province": "辽宁省",
"signalLevel": "蓝色",
"signalType": "大风"
}
],
"3hourForcast": [
{
"hour": "20时-23时 ",
"temperature": "12℃/10℃",
"weather": "晴",
"weather_pic": "http://app1.showapi.com/weather/icon/night/00.png",
"wind_direction": "无持续风向",
"wind_power": "微风"
},
{
"hour": "23时-02时 ",
"temperature": "10℃/9℃",
"weather": "晴",
"weather_pic": "http://app1.showapi.com/weather/icon/night/00.png",
"wind_direction": "无持续风向",
"wind_power": "微风"
},
{
"hour": "02时-05时 ",
"temperature": "10℃/9℃",
"weather": "晴",
"weather_pic": "http://app1.showapi.com/weather/icon/night/00.png",
"wind_direction": "无持续风向",
"wind_power": "微风"
},
{
"hour": "05时-08时 ",
"temperature": "13℃/10℃",
"weather": "晴",
"weather_pic": "http://app1.showapi.com/weather/icon/day/00.png",
"wind_direction": "无持续风向",
"wind_power": "微风"
}
]
},
"hourDataList": [ //当天每半小时数据的累积数组。当天0点清空重新累积。
{
"aqi": "53",
"aqiDetail": {
"num": "12",
"co": "0.3",
"area": "北京",
"so2": "3",
"o3": "52",
"no2": "16",
"aqi": "32",
"quality": "优质",
"pm10": "15",
"pm2_5": "6",
"o3_8h": "62",
"primary_pollutant": ""
},
"sd": "85%",
"temperature": "9",
"temperature_time": "00:00",
"weather": "多云",
"weather_pic": "http://appimg.showapi.com/images/weather/icon/night/01.png",
"wind_direction": "北风",
"wind_power": "1级"
},
{
"aqi": "53",
"aqiDetail": {},
"sd": "81%",
"temperature": "10",
"temperature_time": "00:30",
"weather": "多云",
"weather_pic": "http://appimg.showapi.com/images/weather/icon/night/01.png",
"wind_direction": "北风",
"wind_power": "1级"
}
],
"ret_code": 0,
"time": "20151023180000"
}
}【错误码定义】：
| 错误码 | 错误信息 | 描述 |
|---|---|---|
| HttpCode=200 | 返回正文 ret_code=0 | 调用成功，扣费，扣调用次数 |
| HttpCode=555 | 返回正文 ret_code=-1 | 不扣费，不扣调用次数 |
2 表单设计
新建天气查询表单，设计字段：
| 字段名称 | 字段类型 |
|---|---|
| 城市天气 | 子表单 |
| 城市 | 子字段-单行文本 |
| 天气 | 子字段-单行文本 |
| 温度 | 子字段-单行文本 |
3 前端事件配置
3.1 设置入口
表单设计页选择子字段 [城市] ，在 [字段属性]>>[功能扩展设置]，选择[前端事件]，新建前端事件。
可选择焦点触发或按钮触发，按钮名称可自定义。
3.2 设置事件名称&说明
添加好前端事件后，首先设置前端事件的基础信息，即事件名称和事件说明，用于区分前端事件：
3.3 设置请求类型&URL
根据阿里云接口的介绍，可得到接口的请求类型和URL，我们可以按以下内容填入：
-
请求类型：GET
-
URL：
https://ali-weather.showapi.com/area-to-weather?area=城市天气.城市城市天气.城市为表单字段
3.4 Header/Body设置
Hearder：
Authorization=APPCODE+英文空格+自己的 APPCODE复制此物流查询接口是 GET 请求，无Body设置。
3.5 返回值格式&返回值设置
-
返回值格式选择 JSON
-
返回值设置页面，添加 「城市天气.天气」 (当前行) 、「城市天气.温度」 (当前行) ：
「城市天气.天气」 (当前行) ：
$['showapi_res_body']['now']['weather']「城市天气.温度」 (当前行) ：
$['showapi_res_body']['now']['temperature']
3.6 返回值错误判定
根据接口返回的错误码，我们可以设置返回值错误判定，当返回判定错误时弹出提示。
设置：当ret_code等于 -1 时，返回查询失败
获取ret_code的值：
$.showapi_res_body.ret_code
效果
