vue项目中可使用天气预报小组件推荐vue-mini-weather

这部分内容引自基于Vue迷你实时天气预报组件开发

npm i vue-mini-weather --save

// 1. 全局引入  //main.js 项目入口文件 import Vue from 'vue' import weather from 'vue-mini-weather' Vue.use(weather)  //app.vue 项目文件 <template>   <v-mini-weather></v-mini-weather> </template>  // 2. 局部引入  //app.vue 项目文件 <template>   <v-mini-weather></v-mini-weather> </template>  <script> import { vMiniWeather } from 'vue-mini-weather' export default {   components: {     vMiniWeather   } } </script>

size: {         ///天气组件的尺寸可以有"small"和"normal"，默认是"small"。     type: String,     default: "small" }, type: {         //天气小组件的类型可以有"oneline"和"multiline"，默认是"oneline"。     type: String,     default: "oneline" }, color: {        ///天气组件的字体和icon只接受16进制的颜色rgb颜色值，但不需要传播"#"比如黑色："000000"，白色："ffffff"。     type: String,     default: "000000" }, iconSize: {     //天气组件在 multiline 类型下icon尺寸为数字数据，单位为px，默认是100。     type: Number,     default: 100 }, url: {     ///天气小组件调用的天气查询API   type: String,   default: 'https://apia.aidioute.cn/weather/index.php' }

国家气象局提供的天气预报接口(这部分来自 气象界面返回图标_国家气象局提供的天气预报接口及使用说明)

101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101300801玉林:101300901百色:101301001钦州:101301101河池:101301201北海:101301301崇左:101300201贺州:101300701贵阳:101260101安顺:101260301都匀:101260401兴义:101260906铜仁:101260601毕节:101260701六盘水:101260801遵义:101260201凯里:101260501昆明:101290101红河:101290301文山:101290601玉溪:101290701楚雄:101290801普洱:101290901昭通:101291001临沧:101291101怒江:101291201香格里拉:101291301丽江:101291401德宏:101291501景洪:101291601大理:101290201曲靖:101290401保山:101290501呼和浩特:101080101乌海:101080301集宁:101080401通辽:101080501阿拉善左旗:101081201鄂尔多斯:101080701临河:101080801锡林浩特:101080901呼伦贝尔:101081000乌兰浩特:101081101包头:101080201赤峰:101080601南昌:101240101上饶:101240301抚州:101240401宜春:101240501鹰潭:101241101赣州:101240701景德镇:101240801萍乡:101240901新余:101241001九江:101240201吉安:101240601武汉:101200101黄冈:101200501荆州:101200801宜昌:101200901恩施:101201001十堰:101201101神农架:101201201随州:101201301荆门:101201401天门:101201501仙桃:101201601潜江:101201701襄樊:101200201鄂州:101200301孝感:101200401黄石:101200601咸宁:101200701成都:101270101自贡:101270301绵阳:101270401南充:101270501达州:101270601遂宁:101270701广安:101270801巴中:101270901泸州:101271001宜宾:101271101内江:101271201资阳:101271301乐山:101271401眉山:101271501凉山:101271601雅安:101271701甘孜:101271801阿坝:101271901德阳:101272001广元:101272101攀枝花:101270201银川:101170101中卫:101170501固原:101170401石嘴山:101170201吴忠:101170301西宁:101150101黄南:101150301海北:101150801果洛:101150501玉树:101150601海西:101150701海东:101150201海南:101150401济南:101120101潍坊:101120601临沂:101120901菏泽:101121001滨州:101121101东营:101121201威海:101121301枣庄:101121401日照:101121501莱芜:101121601聊城:101121701青岛:101120201淄博:101120301德州:101120401烟台:101120501济宁:101120701泰安:101120801西安:101110101延安:101110300榆林:101110401铜川:101111001商洛:101110601安康:101110701汉中:101110801宝鸡:101110901咸阳:101110200渭南:101110501太原:101100101临汾:101100701运城:101100801朔州:101100901忻州:101101001长治:101100501大同:101100201阳泉:101100301晋中:101100401晋城:101100601吕梁:101101100乌鲁木齐:101130101石河子:101130301昌吉:101130401吐鲁番:101130501库尔勒:101130601阿拉尔:101130701阿克苏:101130801喀什:101130901伊宁:101131001塔城:101131101哈密:101131201和田:101131301阿勒泰:101131401阿图什:101131501博乐:101131601克拉玛依:101130201拉萨:101140101山南:101140301阿里:101140701昌都:101140501那曲:101140601日喀则:101140201林芝:101140401台北县:101340101高雄:101340201台中:101340401海口:101310101三亚:101310201东方:101310202临高:101310203澄迈:101310204儋州:101310205昌江:101310206白沙:101310207琼中:101310208定安:101310209屯昌:101310210琼海:101310211文昌:101310212保亭:101310214万宁:101310215陵水:101310216西沙:101310217南沙岛:101310220乐东:101310221五指山:101310222琼山:101310102长沙:101250101株洲:101250301衡阳:101250401郴州:101250501常德:101250601益阳:101250700娄底:101250801邵阳:101250901岳阳:101251001张家界:101251101怀化:101251201黔阳:101251301永州:101251401吉首:101251501湘潭:101250201南京:101190101镇江:101190301苏州:101190401南通:101190501扬州:101190601宿迁:101191301徐州:101190801淮安:101190901连云港:101191001常州:101191101泰州:101191201无锡:101190201盐城:101190701哈尔滨:101050101牡丹江:101050301佳木斯:101050401绥化:101050501黑河:101050601双鸭山:101051301伊春:101050801大庆:101050901七台河:101051002鸡西:101051101鹤岗:101051201齐齐哈尔:101050201大兴安岭:101050701长春:101060101延吉:101060301四平:101060401白山:101060901白城:101060601辽源:101060701松原:101060801吉林:101060201通化:101060501沈阳:101070101鞍山:101070301抚顺:101070401本溪:101070501丹东:101070601葫芦岛:101071401营口:101070801阜新:101070901辽阳:101071001铁岭:101071101朝阳:101071201盘锦:101071301大连:101070201锦州:101070701

1. XML接口 http://flash.weather.com.cn/wmaps/xml/china.xml 这个是全国天气的根节点，列出所有的省，其中的pyName字段是各个省XML的文件名，比如北京的是beijing，那就意味着北京的XML地址为 http://flash.weather.com.cn/wmaps/xml/beijing.xml 一个省的天气，其中列出该省各个市的数据，北京就列出各个区。 tmp1是最低温低，tmp2是最高温度，url非常重要，我们一会儿再说。state1和state2是神马转神马，每个数代表一个天气现象。天气现象非常多，我本想全部分析出来，后来直接放弃了这个想法。因为我看到了一个城市的天气现象的编码是26...我现在知道的有0.晴 1.多云 2.阴 6.雨夹雪 7.小雨 8.中雨 13.阵雪 14.小雪 其中后来发现知道这个没用，这个数字的主要作用是检索图片的！！！

2. 图片接口 http://m.weather.com.cn/img/c0.gif http://m.weather.com.cn/img/b0.gif http://www.weather.com.cn/m/i/weatherpic/29x20/d0.gif http://www.weather.com.cn/m2/i/icon_weather/29x20/n00.gif 这个图就是天气现象0(晴)的图片，其他天气现象的图片依此类推。c打头的图片是20*20像素的，b打头的是50*46像素的，d打头的是反白的图标，29*20像素，n打头的是夜间反白图标，29*20像素，注意这里的文件名是两位数字！ 也许还有更多的图标，等待大家发掘啦~

3. JSON接口 真没想到~居然有JSON接口~JSON在iPhone上分析起来要比XML简单很多 http://m.weather.com.cn/data/101010200.html 这个是北京的JSON数据，那个HTML的名字是根据上文XML中的url得到的。这个JSON中包含了实时数据、7天天气预报、气象指数等丰富的数据

获取省级代码：http://www.weather.com.cn/data/list3/city.xml?level=1 获取城市代码(比如安徽是22)：http://www.weather.com.cn/data/list3/city22.xml?level=2 获取区域代码(比如安庆是2206)：http://www.weather.com.cn/data/list3/city2206.xml?level=3 获取到安徽省安庆市望江县的代码是220607 然后去加上中国代码请求URL：http://m.weather.com.cn/data/101220607.html 就可以获取当地天气。

另外再给几个有用的探索得到的URL： 天气 FLASH实况：http://flash.weather.com.cn/sk2/101220607.xml 实况FLASH：http://flash.weather.com.cn/sk2/shikuang.swf?id=101220607

三级选择菜单(注明，这里有四个INPUT，其中有一个被隐藏了，可用FIREFOX改下源代码查看)：http://www.weather.com.cn/static/custom/search3.htm 实时天气(很有用哦)：http://www.weather.com.cn/data/sk/101220607.html

在浏览器访问接口时返回的数据存在乱码，解决办法，（下面内容引自：解决中国天气网天气预报API返回数据乱码问题）喏！⬇️

 String url = "http://www.weather.com.cn/data/cityinfo/101110101.html";
 String weatherInfo = WeatherUtil.getWeatherInfo(url);

public static String getWeatherInfo(String url) {
        CloseableHttpClient client;
        client = HttpClients.createDefault();
 
        HttpGet get = new HttpGet(url);
        HttpResponse response;
        try {
            response = client.execute(get);
            HttpEntity entity = response.getEntity();
            if (entity != null) {
                InputStream instreams = entity.getContent();
                String str = WeatherUtil.convertStreamToString(instreams);
                get.abort();
                return str;
            }
        } catch (IOException e) {
            e.printStackTrace();
        }
        return null;
    }
 
    private static String convertStreamToString(InputStream is) {
        StringBuilder sb1 = new StringBuilder();
        byte[] bytes = new byte[4096];
        int size;
 
        try {
            while ((size = is.read(bytes)) > 0) {
                String str = new String(bytes, 0, size, "UTF-8");
                sb1.append(str);
            }
        } catch (IOException e) {
            e.printStackTrace();
        } finally {
            try {
                is.close();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
        return sb1.toString();
    }