漂亮的天气卡片

在codepen发现一个很好看的天气卡片,正好自己正在整理阿里服务上的项目,然后开始了一番折腾

codepen地址

移植

copy

第一步:这个简单,首先把codepen中的js、css、html全部copy到自己的项目。

整理api

这里用到的时候腾讯天气api

获取当前地理信息

  • 请求地址:

    https://apis.map.qq.com/ws/location/v1/ip?key=3BFBZ-ZKD3X-LW54A-ZT76D-E7AHO-4RBD5

  • 请求方式:

    GET

  • 请求参数

    | 参数名 | 是否必须 | 内容 | 说明 |
    | — | — | — | — |
    | key | 是 | 3BFBZ-ZKD3X-LW54A-ZT76D-E7AHO-4RBD5 | |

  • 返回参数

    {
    "status": 0,
    "message": "query ok",
    "result": {
    "ip": "120.244.107.248",
    "location": {
    "lat": 39.90469,
    "lng": 116.40717
    },
    "ad_info": {
    "nation": "中国",
    "province": "北京市",
    "city": "北京市",
    "district": "",
    "adcode": 110000
    }
    }
    }

获取天气信息

  • 请求地址:

    https://wis.qq.com/weather/common?source=pc&weather_type=air|observe|forecast_1h|forecast_24h|index|alarm|limit|tips|rise&province=北京市&city=北京市

  • 请求方式:

    GET

  • 请求参数

    | 参数名 | 是否必须 | 内容 | 说明 |
    | — | — | — | — |
    | source | 是 | PC | |
    | weather_type | 是 | | |
    | province | 是 | 北京 | |
    | city | 是 | 北京 | |
    | county | 是 | 朝阳区 | |

  • 返回参数

    {
    "data": {
    "air": {
    "aqi": 69,
    "aqi_level": 2,
    "aqi_name": "良",
    "co": "0.7",
    "no2": "28",
    "o3": "58",
    "pm10": "53",
    "pm2.5": "50",
    "so2": "2",
    "update_time": "20190518160000"
    },
    "alarm": {},
    "forecast_1h": {
    "0": {
    "degree": "25",
    "update_time": "20190518160000",
    "weather": "小雨",
    "weather_code": "07",
    "weather_short": "小雨",
    "wind_direction": "东南风",
    "wind_power": "4"
    }
    },
    "forecast_24h": {
    "0": {
    "day_weather": "多云",
    "day_weather_code": "01",
    "day_weather_short": "多云",
    "day_wind_direction": "南风",
    "day_wind_direction_code": "4",
    "day_wind_power": "4",
    "day_wind_power_code": "1",
    "max_degree": "30",
    "min_degree": "20",
    "night_weather": "阴",
    "night_weather_code": "02",
    "night_weather_short": "阴",
    "night_wind_direction": "东南风",
    "night_wind_direction_code": "3",
    "night_wind_power": "3",
    "night_wind_power_code": "0",
    "time": "2019-05-17"
    }
    },
    "index": {
    "airconditioner": {
    "detail": "您将感到很舒适,一般不需要开启空调。",
    "info": "较少开启",
    "name": "空调开启"
    }
    },
    "limit": {
    "tail_number": "不限行",
    "time": "20190518"
    },
    "observe": {
    "degree": "23",
    "humidity": "70",
    "precipitation": "0.0",
    "pressure": "1003",
    "update_time": "201905181640",
    "weather": "阴",
    "weather_code": "02",
    "weather_short": "阴",
    "wind_direction": "3",
    "wind_power": "2"
    },
    "rise": {
    "0": {
    "sunrise": "04:56",
    "sunset": "19:24",
    "time": "20190518"
    }
    },
    "tips": {
    "observe": {
    "0": "天暗下来,你就是阳光~",
    "1": "现在的温度比较舒适~"
    }
    }
    },
    "message": "OK",
    "status": 200
    }

由于腾讯api对跨域请求有限制,这里找了一个api代理 bird

http://bird.ioliu.cn/v2/?url=https://apis.map.qq.com/ws/location/v1/ip?key=3BFBZ-ZKD3X-LW54A-ZT76D-E7AHO-4RBD5

  • 请求地址:

    http://bird.ioliu.cn/v2/rd.i

  • 请求方式:

    GET

  • 请求参数

    | 参数名 | 是否必须 | 内容 | 说明 |
    | — | — | — | — |
    | url | 是| | 需代理的地址|