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

 

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

1、安装

npm i vue-mini-weather --save

2、引入

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

3、参数说明

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'
}

组件说明：

项目使用到了开源的天气动态icon，来源于animated-icons中的 weather 组。
获取天气的前提是需要获取您当前的位置信息，默认使用HTML5的定位功能，如果定位失败的话，则采用IP地址定位的方式获取位置信息，再获取天气信息。