实用且免费的天气预报API，及天气动态图标推荐

天气预报API推荐

之前做的一个项目，需要一个信息全面的天气预报功能，对比了不少API，最终选择了下面这个‘天气API’。现在这个功能已运行大半年了，从稳定性，数据全面性等方面来说(最重要的当然是免费啦(#^.^#))，都是很不错的！强推！

当然，如果需要更全面的数据，可以购买专业版，个人觉得免费版已经够用！
API详细介绍及开发指南由此进入

首先需要注册一个appid,获取appsecret，网站左侧提供了以下四个免费接口

下图所有数据都由其中三个免费接口拼凑而成

接口代码如下

//基本数据：能见度 风力等级 空气质量指数等等
    getWeatherData() {
      axios({
        method: "get",
        url:
          "https://yiketianqi.com/api?unescape=1&version=v6&appid=******&appsecret=******"
      }).then(
        response => {
          this.weatherData = response.data; 
        },
        function(response) {
          console.log("错误信息：" + response);
        }
      );
    },
     // 七日天气
    getMoreWeatherData() {
      axios({
        method: "get",
        url:
          "https://yiketianqi.com/api?unescape=1&version=v1&appid=******&appsecret=******"
      }).then(
        response => {
          console.log(response); //查看接口返回的数据
          this.moreData = response.data.data;
        },
        function(response) {
          console.log("错误信息：" + response);
        }
      );
    },
    //pm2.5 pm10 so2 no2 o3 等数据
    getAQI() {
      axios({
        method: "get",
        url:
          "https://yiketianqi.com/api?unescape=1&version=v10&appid=******&appsecret=******"
      }).then(
        response => {
          this.aqiData = response.data; 
        },
        function(response) {
          console.log("错误信息：" + response);
        }
      );
    }

天气动态图标推荐

如果你想用一个合适的天气动态图标，推荐使用vue-skycons

1.安装依赖

npm install --save vue-skycons

2.引用

import VueSkycons from 'vue-skycons'
Vue.use(VueSkycons)

3.使用

     <skycon condition="clear-day" width="90" height="90" color="#f3f3f3" ></skycon>
    <skycon condition="partly-cloudy-day" width="90" height="90" color="#f3f3f3"></skycon>
    <skycon condition="cloudy" width="90" height="90" color="#f3f3f3" ></skycon>
    <skycon condition="rain" width="90" height="90" color="#f3f3f3" ></skycon>
    <skycon condition="snow" width="90" height="90" color="#f3f3f3"></skycon>
    <skycon condition="wind" width="90" height="90" color="#f3f3f3"></skycon>
    <skycon condition="fog" width="90" height="90" color="#f3f3f3"></skycon>

4.更多请访问