Vue-mini-weather NPM

GitHub package.json version GitHub GitHub open issues GitHub closed issues GitHub last commit GitHub top language

项目展示

基于vue2.x框架开发，webpack打包的一款迷你天气预报展示的小组件，目前只支持中国大陆的天气预报，原因在更新公告中有，有问题请提issue

📦 安装

2022.11.16

注意：因为刚上传到npm仓库没多久，可能其他镜像源还没有同步过去，所以要下载只能切换npm源。

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>
    <template #default="{weather, icon}">
      <!--插入图标-->
      <v-mini-weather-icon :icon="icon"></v-mini-weather-icon>
      <!--DIY内容-->
      <span>{{weather.cityname}}/{{weather.weather}}/{{weather.temp}}</span>
    </template>
  </v-mini-weather-icon>
</template>

// 2. 局部引入 
//app.vue 项目文件
<template>
  <v-mini-weather>
    <template #default="{weather, icon}">
      <!--插入图标-->
      <v-mini-weather-icon :icon="icon"></v-mini-weather-icon>
      <!--DIY内容-->
      <span>{{weather.cityname}}/{{weather.weather}}/{{weather.temp}}</span>
    </template>
  </v-mini-weather-icon>
</template>

<script>
import { vMiniWeather, vMiniWeatherIcon } from 'vue-mini-weather'
export default {
  components: {
    vMiniWeather,
    vMiniWeatherIcon
  }
}
</script>

📝 参数说明

// v-mini-weather参数

url: {     //天气小组件调用的天气查询API
  type: String,
  default: 'https://apia.aidioute.cn/weather/'
}

// v-mini-weather-icon参数

icon: {     // 天气图标编号
  type: String,
  default: 'd00' // 默认白天-晴
}
type: {     // 天气图标类型 -- fill / line
  type: String,
  default: 'fill'
}

📖 更新

版本0.3.7
更新时间：2022.11.16
1. 修改图标比例，之前版本的图标不协调，有些大有些小，重新改了。
2. v-mini-weather默认还导出了一个参数icon，直接传给v-mini-weather-icon就可以了，详见上面的使用方法
3. v-mini-weather-icon组件添加一个props参数: type，见上面的参数说明。
4. 注意：如果你是用webpack开发的，vue2脚手架新建的项目用的webpack5默认移除了nodejs核心模块的polyfill自动引入，在使用axios最新的1.1.3版本的时候，直接从vue-mini-weather引入的组件会报错，所以我默认依赖是^0.21.1版本打包的。你如果实在想用最新版本的axios，可以从vue-mini-weather/src/lib引入组件，就不报错了。
版本0.3.6
更新时间：2022.10.15
1. 不喜欢写说明，写得看不懂的话，那就看多几遍吧
2. 天气图标换了，使用了这个大佬basmilius制作的天气图标，点此前去膜拜
3. 嘛，款式可能大家并不是很喜欢，我也讨厌写样式，所以直接改成插槽的形式，自己DIY，不再预设款式，自己玩吧。
4. v-mini-weather-icon就只是一个展示天气图标的组件，不想要图标，那就不用这个组件就行，要用图标就要给它传个icon的参数，icon是有对应的参数值的，可以直接从插槽获得weather对象，把它里面的weather.weathercode传给它就行。
5. 添加了个notice事件，会接收一个类似如下的对象，是一个组件错误信息的传递，组件内部不再使用antd的message工具弹窗了，直接把消息传递给父组件，你自己接收自己打印也行，还是那句话，自己DIY吧。
```
{
  type: '', // warning/error 警告或者错误
  from: '', // window.navigator.geolocation/server/axios.error 错误来源，要么浏览器的定位功能，要么是服务器出错，要么就是网络请求出错
  msg: '' // 错误信息
}
```
6. 修改了部分PHP的代码，更人性化一点。我还是建议你们自己下载php源码然后挂到自己的服务器上，然后传你们自己的url到组件，我那个小水管云服务器...嗯你们懂的。

版本0.3.5
更新时间：2021.08.05
1. 发现写的乱七八糟的，重构了一下代码。对props中的size和type添加了校验，size只接收small和normal，type只接收oneline和multiline，传入其他字符串会在控制台报错。
2. 修复了PHP后端文件中，如果请求腾讯地图Api失败时不返回error_msg内容，导致前端的antd的message组件不显示内容，只显示个感叹号。
3. 修复了展示页面每个款式的标题显示错误的问题。
版本0.3.3、版本0.3.4
更新时间：2021.04.24
1. 这位老哥fpandzc提出的issues，解决开启VPN定位到国外直接报网络错误，现在修改为，如果定位不在中国大陆的，统一显示广东广州的天气（这个原因是腾讯地图无法通过IP定位精准定位到中国大陆以外的地方，且天气数据源无法获取中国以外的天气）。
2. 添加了一个新的props参数。为啥呢，因为：又修改了一次数据源，需要使用腾讯地图API解决位置信息的问题，php文件已修改，需自行注册腾讯地图API，然后在function.php文件中填上你的Key。npm仓库的api依旧默认是调用我运行在辣鸡服务器上的，同上个版本更新一个意思，需要的话最好自己下载php源文件部署到自己服务器上，然后给组件传个url值就行，谢谢。
3. 大气压强显示错误的bug。
版本0.3.2
更新时间：2021.04.07
1. 好无奈啊，之前用的中国天气网的数据是从它官方免费的插件中提取的API，近期它的插件居然变成收费的了。所以，接口失效了。所以更新了下，换成自己的API。但是有一点需要注意的，就是我的API接口文件是运行在辣鸡服务器上的，并发什么的没法保证，如果要求高的，我把API的源文件附在php文件夹中，自己下载然后部署到自己的服务器上，然后改源码就行了。
2. 添加了ant-design-vue中的message组件，所以打包文件大了很多。自行考虑。
3. 移除了上个版本添加的对IE的支持，需要的自行在github上下载然后在src/lib/index头部添加import 'babel-polyfill'。
版本0.3.0、版本0.3.1
更新时间：2021.02.28
感谢这位老哥OrangeHong提出的issues，在IE浏览器下报错，现在重新封装，包比之前的大了几十k，因为导入了babel-polyfill为了兼容IE，目前只支持IE10+，再往下的版本我就不兼容了哈，抱歉。如果项目不考虑IE浏览器的话可以选择0.2.9版本。
版本0.2.9
更新时间：2020.07.09
由于animated-icons的源码写的是固定颜色值 0,0,0,1 的，我以为就是正常的 0-255 的rgb+alpha，所以我就自己改成了变量r，g，b然后动态赋颜色值。昨天测试发现，诶，它居然不是 0-255，而是 0-255 / 255。哈哈哈哈所以我就在组件赋值那里直接加上 / 255。
版本0.2.8、版本0.2.7
更新时间：2020.07.08
添加了展示页，更新了readme.md文件。
版本0.2.6
更新时间：2020.07.08
1.由于和风天气更改了开发文档，API和内容变动了，因此更换天气预报数据，来源于中国天气网。
2.改了个小问题
版本0.2.4
更新时间：2020.07.07
天气预报数据，来源于和风天气。
版本0.2.3之前
测试，改bug等。