axios获取实时天气（免费）

尝试前端去获取天气。（主要是后台还没写接口）

获取天气的API有很多,我最后采用的 和风天气， 末尾有介绍使用方法。除此之外还有：

万年历天气获取： http://wthrcdn.etouch.cn/weather_mini?city=北京
我获取的是乱码，最后没搞好。

国家气象局（稳定、全面） ：
实时天气1：http://www.weather.com.cn/data/sk/101190408.html
实时天气2：http://www.weather.com.cn/data/cityinfo/101190408.html
实时天气3（带时间戳）：http://mobile.weather.com.cn/d
最后我得到的也是中文乱码难搞

Public-apis: 一个github项目

英文底子好的建议尝试一下。

心知天气：心知天气 与和风一样需要注册，也有支持免费试用的

天气API: 天气api

免费提供的数据如下：

---

---

说一下我使用和风天气的步骤，下面是主页

大概步骤：注册账号-----创建应用和key(选择免费以及webAPI) ,控制台如下

这里的key就是你需要用到的key.获取天气时需要用到城市 id,和风有提供API

大致（vue）代码如下

methods: {
    getWeather(){ // 调用和风天气免费版
      const city = '武汉';
      const key = '上图中的key';
      axios(`https://geoapi.qweather.com/v2/city/lookup?location=${city}&key=${key}`) // 先获取地址
      .then(res => {
        console.log(res, res.data.location[0].id);
        if(res.status ==200 && res.data.code == 200){
          const location = res.data.location[0].id;
          axios(`https://devapi.qweather.com/v7/weather/now?location=${location}&key=${key}`)
          .then(res => {
            this.wUrl = res.data.fxLink;
          })
        }
      })
    },
 }

两个接口耗时 < 500ms 可以接受
返回参数

还温馨的提供了一个嵌入视图网页，上面参数的 fxLink

<template>
	<div>
		<!-- 如果你需要一个天气缩略版 -->
		<iframe :src="wUrl" width="400" height="900"></iframe>
	</div>
</template>

大概这样子

以上。