地区天气（和风天气）

通过和风天气接口获取天气

和风天气开发服务 ~ 强大、丰富的天气数据服务

这个是花钱的，但是有免费次数

先登录申请key，还需申请腾讯的key（因为我是通过ip获取城市码）

 注册在index中

  <link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
  <link rel="stylesheet" type="text/css" href="./static/css/iconfont.css">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/qweather-icons@1.3.0/font/qweather-icons.css">

 使用腾讯公共接口根据IP获取所在城市（可以是区县），我是http所以需要跨域

    var data = {
        key: "", //腾讯key
      };
      var url = "https://apis.map.qq.com/ws/location/v1/ip"; //腾讯地理位置信息接口
      data.output = "jsonp"; // 解决跨域问题
      var that = this;
      this.$jsonp(url, data)
        .then((res) => {
          console.log("IP所在市", res.result.ad_info);
          if (res.result.ad_info.district != "") {
            this.cityName = res.result.ad_info.district;
          } else {
            this.cityName = res.result.ad_info.city;
          }
          fetch(
            "https://devapi.qweather.com/v7/weather/now?location=" +
            res.result.location.lng +
            "," +
            res.result.location.lat +
            "&key="//和风天气key,
            {
              type: "get",
              dataType: "json",
            }
          )
            .then((response) => {
              if (response.ok) return response.json();
            })
            .then((data) => {
              console.log(data, "和风天气----->>>");
              that.weatherName = data.now.text;
              that.weathericon = "qi-" + data.now.icon + "-fill";
            });
        })
        .catch((error) => { });

获取到数据以后 

    <i :class="weathericon" class="weathericon" style=""></i>

                <div style="font-size: 12px">

                  {{ cityName }}&nbsp;&nbsp;&nbsp;&nbsp;{{ weatherName }}

                </div>

  .weathericon {
    background-image: -webkit-linear-gradient(top left,
        #63a3ff,
        #b6dcff,
        #72beff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 1.3rem;
    width: 85px;
  }