Vue 对接天气API接口,获取国外城市的实况+空气质量数据

Cc琎

994人浏览 · 2025-09-04 14:53:03

Cc琎 · 2025-09-04 14:53:03 发布

此文档介绍如何通过Vue.js获取全球城市的实时天气和空气质量数据。
地区例如：曼谷(泰国)，巴黎(法国)，伦敦(英国)，迪拜(阿联酋)，新加坡，吉隆坡(马来西亚)，纽约(美国)，伊斯坦布尔(土耳其)，东京(日本)，安塔利亚(土耳其)

接口基本信息

请求方式: GET

http://m7200.tianqiapis.com

请求参数:

参数名	必选	类型	说明	备注（示例）
appid	是	string	用户appid	注册开发账号
appsecret	是	string	用户appsecret
version	是	string	接口版本标识	today 全球实况天气 (返回内容更少,速度更快) day 全球实况+48小时+15日天气
query	是	string	城市名称	如: 北京、东京、New York支持坐标查询如：query=36.68,116.99
ip	否	string	IP地址	查询IP所在城市天气
language	否	string	语言	默认中文，更多语言联系客服英文: en 日文: jp 德语: de 法语: fr 韩语: kr 俄语: ru 葡萄牙: pt 西班牙: es 萨特阿拉伯: sa 意大利: it 泰语: th 越南: vi-VN 菲律宾: tl-PH 印度尼西亚: id-ID 希腊: el-GR 波兰: pl-PL 土耳其: tr 罗马尼亚: ro 巴基斯坦: ur-PK 伊朗: fa-IR
unit	否	string	温度单位	摄氏度m，华氏度f

响应数据说明

参数名	类型	说明	备注
updateTime	String	UTC时间
updateTimeFormat	String	更新时间
timeZone	String	所在时区
city	String	城市名称
country	String	国家名称
longitude	String	经度
latitude	String	纬度
day	String	今日天气情况	含每小时详细预报等
┗ icon	String	天气现象代码	查看Icon汇总表
┗ feelsLike	String	体感温度	单位为c摄氏度或f华氏度
┗ temperature	String	温度	单位为c摄氏度或f华氏度
┗ temperatureMaxSince7am	String	最高温度	单位为c摄氏度或f华氏度
┗ phrase	String	天气情况	例如：小阵雨
┗ altimeter	String	气压	m百帕 f英寸
┗ barometerTrend	String	气压趋势	例如：升温
┗ humidity	String	相对湿度	0~100，单位为百分比
┗ dewPoint	String	露点温度
┗ visibility	String	能见度	单位为km公里或mi英里
┗ windSpeed	String	风速	单位为km/h公里每小时或mph英里每小时
┗ windDirCompass	String	风向标	例如：东南偏东
┗ windDirDegrees	String	风向角度	范围0~360，0为正北，90为正东，180为正南，270为正西
┗ uvIndex	String	紫外线等级
┗ uvDescription	String	紫外线等级描述	0~2: 低 3~5: 中等 6~7: 强 8~9: 很强 >10: 极强
┗ sunrise	String	日出时间	06:28
┗ sunset	String	日落时间	19:14
┗ moonrise	String	月出时间	22:14
┗ moonset	String	月落时间	11:40
┗ moonIcon	String	月相icon
┗ moonPhrase	String	月相	如：Waning Gibbous
┗ narrative	String	天气情况描述	如：Partly cloudy. Highs 25 to 27C and lows 17 to 19C.
┗ aqi	String	空气质量指数
┗ ┗ AIR	String	空气质量指数	amount: 今日空气质量, index: 等级描述, pp: 主要污染物
┗ ┗ CO	String	一氧化碳	amount: 浓度µg/m3, index: 数值, category: 等级描述
┗ ┗ NO2	String	二氧化氮	amount: 浓度µg/m3, index: 数值, category: 等级描述
┗ ┗ O3	String	臭氧	amount: 浓度µg/m3, index: 数值, category: 等级描述
┗ ┗ PM10	String	10微米以下细颗粒物	amount: 浓度µg/m3, index: 数值, category: 等级描述
┗ ┗ PM2.5	String	2.5微米以下细颗粒物	amount: 浓度µg/m3, index: 数值, category: 等级描述
┗ ┗ SO2	String	二氧化硫	amount: 浓度µg/m3, index: 数值, category: 等级描述

Vue集成示例

1. 创建API服务文件

// src/services/weatherApi.js
import axios from 'axios';

const WEATHER_API_BASE_URL = 'http://m7200.tianqiapis.com/';

export const weatherService = {
  // 获取城市天气信息
  getWeatherByCity(cityName, appId, appSecret) {
    return axios.get(WEATHER_API_BASE_URL, {
      params: {
        version: 'today',
        unit: 'm',
        language: 'zh',
        query: cityName,
        appid: appId,
        appsecret: appSecret
      }
    });
  },
  
  // 解析天气数据
  parseWeatherData(response) {
    if (response.data.errcode !== 0) {
      throw new Error(response.data.errmsg);
    }
    
    const data = response.data;
    const day = data.day;
    
    return {
      basicInfo: {
        city: data.city,
        country: data.country,
        updateTime: data.updateTimeFormat,
        timeZone: data.timeZone
      },
      weather: {
        temperature: day.temperature,
        feelsLike: day.feelsLike,
        humidity: day.humidity,
        windSpeed: day.windSpeed,
        windDirection: day.windDirCompass,
        condition: day.phrase,
        icon: day.icon,
        sunrise: day.sunrise,
        sunset: day.sunset,
        narrative: day.narrative
      },
      aqi: {
        overall: day.aqi.AIR,
        details: {
          co: day.aqi.CO,
          no2: day.aqi.NO2,
          o3: day.aqi.O3,
          pm10: day.aqi.PM10,
          pm25: day.aqi['PM2.5'],
          so2: day.aqi.SO2
        }
      }
    };
  }
};

2. 创建Vue组件使用天气数据

<template>
  <div class="weather-container">
    <div v-if="loading" class="loading">加载中...</div>
    <div v-else-if="error" class="error">{{ error }}</div>
    <div v-else class="weather-info">
      <h2>{{ weatherData.basicInfo.city }}天气</h2>
      <p>更新于: {{ weatherData.basicInfo.updateTime }}</p>
      
      <div class="current-weather">
        <div class="temperature">{{ weatherData.weather.temperature }}°C</div>
        <div class="condition">{{ weatherData.weather.condition }}</div>
        <div class="feels-like">体感温度: {{ weatherData.weather.feelsLike }}°C</div>
      </div>
      
      <div class="details">
        <div>湿度: {{ weatherData.weather.humidity }}%</div>
        <div>风速: {{ weatherData.weather.windSpeed }} m/s, {{ weatherData.weather.windDirection }}</div>
        <div>日出: {{ weatherData.weather.sunrise }} | 日落: {{ weatherData.weather.sunset }}</div>
      </div>
      
      <div class="aqi">
        <h3>空气质量</h3>
        <div>总体: {{ weatherData.aqi.overall.index }} ({{ weatherData.aqi.overall.amount }})</div>
        <div>主要污染物: {{ weatherData.aqi.overall.pp }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { weatherService } from '@/services/weatherApi';

export default {
  name: 'WeatherWidget',
  props: {
    city: {
      type: String,
      default: '洛杉矶'
    },
    appId: String,
    appSecret: String
  },
  data() {
    return {
      loading: false,
      error: null,
      weatherData: null
    };
  },
  mounted() {
    this.fetchWeatherData();
  },
  methods: {
    async fetchWeatherData() {
      this.loading = true;
      this.error = null;
      
      try {
        const response = await weatherService.getWeatherByCity(
          this.city, 
          this.appId, 
          this.appSecret
        );
        this.weatherData = weatherService.parseWeatherData(response);
      } catch (error) {
        this.error = error.message || '获取天气数据失败';
        console.error('Weather API error:', error);
      } finally {
        this.loading = false;
      }
    }
  },
  watch: {
    city() {
      this.fetchWeatherData();
    }
  }
};
</script>

<style scoped>
.weather-container {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.loading, .error {
  text-align: center;
  padding: 20px;
}

.current-weather {
  text-align: center;
  margin: 20px 0;
}

.temperature {
  font-size: 3rem;
  font-weight: bold;
}

.condition {
  font-size: 1.5rem;
  margin-bottom: 10px;
}

.details, .aqi {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}
</style>

在应用中使用组件

<template>
  <div id="app">
    <h1>全球天气查询</h1>
    <input v-model="selectedCity" placeholder="输入城市名称">
    <WeatherWidget 
      :city="selectedCity" 
      :app-id="appId" 
      :app-secret="appSecret" 
    />
  </div>
</template>

<script>
import WeatherWidget from './components/WeatherWidget.vue';

export default {
  name: 'App',
  components: {
    WeatherWidget
  },
  data() {
    return {
      selectedCity: '洛杉矶',
      appId: '您的appid', // 需要申请
      appSecret: '您的appsecret' // 需要申请
    };
  }
};
</script>

接口优势分析

数据全面性 - 包含基本天气信息、湿度、能见度、气压、降雨概率、日出日落、月初月落、空气质量指数(包含多种污染物详细指标(PM2.5, PM10, SO2, NO2, O3, CO))等

多语言支持 - 支持24多种语言查询和返回结果，方便国内外开发者使用

单位灵活性 - 支持公制单位，符合国内使用习惯

标准化数据结构 - 返回JSON格式数据，结构清晰易于解析

地理位置精确 - 提供经纬度坐标，可用于地图集成

包含时区信息 - 便于时间转换

更新及时 - 数据包含更新时间戳，确保信息新鲜度

全球覆盖 - 支持全球城市查询，适用于国际化应用

注意事项

需要申请appid和appsecret才能正常使用接口
注意API调用频率限制，避免过度请求
考虑添加错误处理和加载状态以提升用户体验
对于生产环境，建议通过后端代理调用API以避免CORS问题

亚马逊云科技技术品牌专区

更多推荐

open-code-review Codex 插件教程：对话式调用评审技能指南

本文是一份面向新手的 **open-code-review Codex 插件教程**，教你在 Codex 中通过对话式方式调用 open-code-review 的 AI 代码评审技能。open-code-review 是阿里巴巴开源的 AI 代码评审工具，采用"确定性流水线 + LLM Agent"混合架构，内置多语言评审规则（NPE、线程安全、XSS、SQL 注入等），可在 Codex 里用一

亚马逊云科技技术品牌专区

OBS Studio 完整指南：免费开源录屏与直播软件从零上手

想做一场像模像样的直播，或者把屏幕内容录成教程视频，但一想到商用软件的订阅费就有些犹豫？其实你不需要花一分钱。OBS Studio 是一款免费开源的直播与录屏软件，支持 Windows、macOS 和 Linux，采集、混音、编码、推流、录制，一条流水线全包了。## 先搞清楚 OBS Studio 是什么OBS Studio 是一个"场景化"的采集合成工具：你把摄像头、窗口、浏览器、图片、

亚马逊云科技技术品牌专区

如何用MediaCrawler爬取小红书抖音数据？7大平台爬虫从安装到实战完整指南

MediaCrawler 是一个支持小红书、抖音、快手、B站、微博、百度贴吧、知乎的开源自媒体数据采集工具。它能按关键词、按帖子、按创作者主页三种方式抓取笔记/视频内容、评论甚至二级评论，并把结果存成 JSON、CSV、Excel 或数据库。适合做市场调研、竞品监控、内容选题的运营人员，以及想要现成爬虫框架而不想从零写 JS 逆向的开发者。## 从一次"手动抄数据"说起想象这个场景：你负责