hjiachuang / vue3-mini-weather

基于Vue3.x开发的迷你实时天气预报组件

基于Vue3.x开发，Vite打包的迷你实时天气预报组件

项目展示

vue3-mini-weather展示页

从vue-mini-weather迁移过来的基于vue3.x框架开发，Vite打包的一款迷你天气预报展示的小组件，目前只支持**大陆的天气预报，原因在更新公告中有，有问题请提issue

目录结构

-npm                    // 这个文件夹是上传到npm仓库的，也就是npm i vue3-mini-weather下载的内容就是这个文件夹里的内容
  -npm
  -src
    -lib
  ...
-public
  favicon.ico
-src                    // 项目源文件，跟npm里的就是少了个App.vue和main.ts而已
  -lib
  App.vue
  main.ts
...

📦 安装

2023.03.10

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

npm i vue3-mini-weather --save

// 1. 全局引入

//main.js 项目入口文件
import { createApp } from 'vue'
import App from './App.vue'
import weather from 'vue3-mini-weather'

createApp(App).use(weather).mount('#app')


//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>
</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>
</template>

<script setup>
import { vMiniWeather, vMiniWeatherIcon } from 'vue3-mini-weather'
</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.1.2

  更新时间：2023.03.10

  1. icon参数有时候带d和n，导致图标组件报错，找不到对应图标，所以不显示，加了个判断，自动加减d和n。

• 版本0.1.1

  更新时间：2022.11.15

  1. 从js迁移到ts，添加了.d.ts文件。
  2. 修改图标比例，之前版本的图标不协调，有些大有些小，重新改了。
  3. v-mini-weather默认还导出了一个参数icon，直接传给v-mini-weather-icon就可以了，详见上面的使用方法
  4. v-mini-weather-icon组件添加一个props参数: type，见上面的参数说明。

• 版本0.1.0

  更新时间：2022.10.17

  1. 从vue-mini-weather迁移过来的，具体内容看vue-mini-weather，这里不再重复赘述。

📝 说明

• 项目使用到了开源的天气动态icon，来源于basmilius

• 获取天气的前提是需要获取您当前的位置信息，默认使用HTML5的定位功能，如果定位失败的话，则采用IP地址定位的方式获取位置信息，再获取天气信息。

📝 依赖

• axios

• lottie-web

📝 License

MIT

Copyright © 2022-present hjiachuang.