vue中请求天气数据（中国天气网),以及展示天气动态图标skyInco

心已赠人 2021-08-29 23:07 1644阅读 0赞

**获取天气**

getWeather () {
          let city = "杭州"
          this.$axios
          .get("http://wthrcdn.etouch.cn/weather_mini?city="+city)
            .then((response) => {
            //这里打印数据，获取自己想要的
          })
            .catch((error)=> {
              console.log(error)
          });
        },

上面数据来源于中国天气网，需要有具体的城市，国内城市的cityName,见下链接

[https://yiyingcanfeng.github.io/data/2019-03-13-cn\_weather\_citylist.json][https_yiyingcanfeng.github.io_data_2019-03-13-cn_weather_citylist.json] 该链接出自[yiyincanfeng ][yiyincanfeng]博主

**1.安装依赖**

npm install --save vue-skycons

**2.引用**

import VueSkycons from 'vue-skycons'
    
    Vue.use(VueSkycons)
    
    Vue.use(VueSkycons, { color: 'bule' })//图标颜色

**3.使用**

//标签
    <skycon :condition="skyInco"/>
    
    //数据
     skyInco:'rain'

效果

![20200604172452795.png][]

网站 [https://www.npmjs.com/package/vue-skycon][https_www.npmjs.com_package_vue-skycon]

[https_yiyingcanfeng.github.io_data_2019-03-13-cn_weather_citylist.json]: https://yiyingcanfeng.github.io/data/2019-03-13-cn_weather_citylist.json
[yiyincanfeng]: https://blog.csdn.net/yiyincanfeng
[20200604172452795.png]: /images/20210813/5b870e9edf944824974b59879ba513dc.png
[https_www.npmjs.com_package_vue-skycon]: https://www.npmjs.com/package/vue-skycon

发表评论取消回复

表情：

评论列表（有 0 条评论，1644人围观）

还没有评论，来说两句吧...

相关阅读

相关中国天气网爬虫

import wx import wx.grid import sqlite3 import requests from bs4 imp

╰+哭是因爲堅強的太久メ/ 2023年06月13日 09:59/ 0 赞/ 4 阅读

相关 vue天气预报

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

你的名字/ 2022年12月07日 15:09/ 0 赞/ 255 阅读

相关中国天气网实时天气api自定义ui

![请输入图片描述][img20210223102612.png] 需求：展示当前地区的天气和温度 `api`采用中国天气网的Api接口，天气网只提供了自定义的插件，没

柔光的暖阳◎/ 2022年11月14日 12:00/ 0 赞/ 215 阅读

相关 java程序获取天气预报_java调用中国天气网api获得天气预报信息的方法

本文实例讲述了java调用中国天气网api获得天气预报信息的方法。分享给大家供大家参考。具体实现方法如下： //以冰城哈尔滨为例通过中国天气api调用天气信息 privat

快来打我*/ 2022年11月04日 00:56/ 0 赞/ 347 阅读

相关中国天气网城市代码表（MYSQL）

前面几篇讲的都是JSON格式的代码，本篇来列举MYSQL5中存放城市代码：第一张表：省份表（province） -- ----------------------

缺乏、安全感/ 2022年09月19日 05:26/ 0 赞/ 214 阅读

相关中国天气网城市代码表-JSON

数据来源：[www.weather.com.cn][] 特别鸣谢：[http://blog.163.com/yuanzhf\_2012/blog/static/2112011

小鱼儿/ 2022年09月19日 04:20/ 0 赞/ 206 阅读

相关中国天气网天气预报API接口城市代码(XML格式，信息全)

说到开发天气预报，就需要找一个开放接口了，接口有很多，中国天气网的数据比较准确，而且也有权威性。访问地址如：[http://m.weather.com.cn/dat

小咪咪/ 2022年07月13日 10:52/ 0 赞/ 255 阅读

相关关于中国天气网API接口

一、中央气象台API接口： 1. XML接口 http://flash.weather.com.cn/wmaps/xml/china.xml 这个是全国天气的根节点，列

偏执的太偏执、/ 2022年04月01日 06:27/ 0 赞/ 797 阅读

相关 C#获取中国天气网免费天气预报信息

中国天气网接口地址：”http://wthrcdn.etouch.cn/WeatherApi?citykey=” + weatherCityCode（为城市code）; ![

古城微笑少年丶/ 2021年12月24日 14:09/ 0 赞/ 558 阅读

相关 vue中请求天气数据（中国天气网),以及展示天气动态图标skyInco

获取天气 getWeather () { let city = "杭州" this.$axios .get

心已赠人/ 2021年08月29日 23:07/ 0 赞/ 1645 阅读