天气 api

用的 api 是 qweather 和风天气 qweather api 手册

我是蒟蒻

~~UI 设计拉胯~~使用世界上最好的 js 框架 vanilla js

已经实现的功能：

获取实时气温湿度风向风力风速大气压能见度
获取当前日期时间周几
天气小图标
3 天天气预告
flex 布局，适应设备

待实现功能：

气温变化图表
穿衣建议
darkmode
iconfont 图标

通过这次小组件开发学会的东西：

flex 的使用
fetch then promise （还是不会用抄的）
天气 api 的使用
json 格式化处理

api 请求格式

https://devapi.qweather.com/v7/weather/now?[请求参数]

必须参数 --location

必须参数 --key

返回数据例

json

// 北京实况天气 
// 商业版 https://api.qweather.com/v7/weather/now?location=101010100&key=你的KEY
// 开发版 https://devapi.qweather.com/v7/weather/now?location=101010100&key=你的KEY
{
  "code": "200",
  "updateTime": "2020-06-30T22:00+08:00",
  "fxLink": "http://hfx.link/2ax1",
  "now": {
    "obsTime": "2020-06-30T21:40+08:00",
    "temp": "24",
    "feelsLike": "26",
    "icon": "101",
    "text": "多云",
    "wind360": "123",
    "windDir": "东南风",
    "windScale": "1",
    "windSpeed": "3",
    "humidity": "72",
    "precip": "0.0",
    "pressure": "1003",
    "vis": "16",
    "cloud": "10",
    "dew": "21"
  },
  "refer": {
    "sources": [
      "Weather China"
    ],
    "license": [
      "commercial license"
    ]
  }
}

js 例

function fetchwea() {
  fetch('https://devapi.qweather.com/v7/weather/now?key=90304353392d4ea4ba00608cb2e7f9ae&location=101210101')
  .then(res => res.json())
  .then(json => {
    document.getElementById('temp').innerHTML=json.now.temp+"℃";
  })
}

使用图标 icon

图标 api 手册

document.getElementById('i').className='qi-'+json.now.icon;

这里 json.now.icon 会返回图标代码导入图标 css 改变 HTML 里 <i> 标签的 class 为 qi-(图标代码) 就可以显示好看的图标啦～

天气 api ​

我是蒟蒻 ​

api 请求格式 ​

返回数据例 ​

js 例 ​

使用图标 icon ​