UFUse（1.6.2）

Appearance

On this page

loadWeatherInfo ​

loadWeatherInfo 是一个加载指定地区天气信息的工具方法

依赖项：lottie-web

使用 ​

vue
<script setup lang="ts">
import { ref } from 'vue'
import loadWeatherInfo from 'ufuse/src/utils/loadWeatherInfo'
import type { WeatherInfo } from 'ufuse/src/utils/loadWeatherInfo/types'

const loading = ref(true)
const error = ref(false)
const weatherInfo = ref<WeatherInfo | null>(null)

loadWeatherInfo({
  amapKey: 'b65e501546fdd93bbda4581b3fc5fd13',
}).then((info) => {
  loading.value = false
  weatherInfo.value = info
}).catch(() => {
  loading.value = false
  error.value = true
})
</script>

<template>
  <div class="demo">
    <div v-if="!loading && !error" class="flex items-center">
      <div class="w-6 h-6 mr-2">
        <component :is="weatherInfo!.iconComponent" />
      </div>
      <p>
        {{ weatherInfo!.region.city }}
      </p>
      <span>&nbsp;</span>
      <p>{{ weatherInfo!.description }}</p>
      <span>&nbsp;</span>
      <p>{{ weatherInfo!.tempMin }} ~ {{ weatherInfo!.tempMax }}</p>
    </div>
    <span v-else-if="loading">Loading...</span>
    <span v-else-if="error">Error!</span>
  </div>
</template>

预览 ​

API ​

ts
import type { VNode } from 'vue'

export interface LoadWeatherInfoOptions {
  /**
   * 高德地图的key
   */
  amapKey: string
  /**
   * 高德地图识别的 adcode
   * @default '页面打开时 IP 对应的城市'
   */
  adcode?: string
  /**
   * 在通过获取 IP 对应的城市失败时，使用的默认城市
   */
  feedbackAdcode?: string
}

export type WeatherMain = 'sunny' | 'cloudy' | 'thunderstorm' | 'snow' | 'rain'

export interface WeatherInfo {
  region: {
    adcode: string
    /**
     * 城市名，如：'武汉市'
     */
    city: string
    /**
     * 省份名，如：'湖北省'
     */
    province: string
  }
  main: WeatherMain
  /**
   * 最低温度，单位：摄氏度
   */
  tempMin: number
  /**
   * 最高温度，单位：摄氏度
   */
  tempMax: number
  /**
   * 天气描述，如：'晴'
   */
  description: string
  /**
   * 天气图标组件
   */
  iconComponent: VNode
}

贡献者 ​

cuijin
xieyuhang