Vue调用和风天气API（详细步骤，含源码）

最新推荐文章于 2025-04-22 14:18:43 发布

苼歌己沫

最新推荐文章于 2025-04-22 14:18:43 发布

阅读量9k

点赞数 15

分类专栏： Vue 文章标签： vue api js

本文链接：https://blog.csdn.net/weixin_43716566/article/details/111505201

版权

Vue 专栏收录该内容

1 篇文章

订阅专栏

Vue调用和风天气API获取实时天气

和风天气
源代码（不愿意看过程的，可以直接看源代码）

和风天气

和风天气官网： https://www.qweather.com/
和风天气提供全球天气预报、气象可视化、商业化气象服务和天气API数据,包括30天预报、灾害预警、空气质量AQI、历史天气、生活指数、分钟降水、交通天气等
主要是：免费
在这里插入图片描述

第一步：注册账号，自己注册登录就行。注册网址： https://id.qweather.com/#/register
在这里插入图片描述

第二步：进入控制台
在这里插入图片描述
第三步：创建应用

第四步：获取key

第五步：进去开发者文档

城市信息搜索必须参数有两个：location和key
location：你要搜索的城市名（最小范围到县）
key：前面保存的key

在这里插入图片描述
实况天气请求必须参数也是两个：location和key
location：根据前面城市查询获取到的城市ID
key：前面保存的key

准备完成后，开始代码编写

源代码（不愿意看过程的，可以直接看源代码）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<form>
				<input type="text" v-model="city">
				<button @click.prevent="searchWeather">提交</button>
			</form>
			<div id="weather">
				<h1>新API</h1>
				<h2>{{tmpNew}}</h2>
				<h3>{{briefNew}}</h3>
			</div>
			<div id="weather">
				<h1>老API</h1>
				<h2>{{tmpOld}}</h2>
				<h3>{{briefOld}}</h3>
			</div>
		</div>
	</body>
	<script>
		var app = new Vue({
			el:"#app",
			data:{
				city:"广州",
				tmpNew:"",
				briefNew:"",
				tmpOld:"",
				briefOld:"",
				
			},
			methods:{
				searchWeather:async function(){//注意：这里有 async 用来完成异步操作
					//由于调用api是异步操作
					//在请求的时候需要用async+await让它同步，否则数据不好取出
					//如果没有await返回的是一个Promise 对象，我学术短浅，暂时没学到，不会取

					let key = ""//引号中放入前面保存的key

					//方法一：老的API
					//老的api
					//这里的引号是tab键上面的引号，主要作用是方便数据拼接
					let httpUrlOld=`https://free-api.heweather.net/s6/weather/now?location=${this.city}&key=${key}`
					let resOld = await fetch(httpUrlOld)//请求数据
					let resultOld = await resOld.json()//将请求的数据转换为json数据类型
					let nowOld = resultOld.HeWeather6[0].now//获取到json数据中的实况天气
					console.log(nowOld)
					this.tmpOld = nowOld.tmp;//获取到当前温度
					this.briefOld = nowOld.cond_txt;//获取到当前天气

					//方法二：新的API
					//获取城市的ID
					let httpUrl = `https://geoapi.qweather.com/v2/city/lookup?location=${this.city}&key=${key}`
					let res = await fetch(httpUrl)
					let result = await res.json()
					let id = result.location[0].id
					//根据城市id获取具体的天气
					let httpUrl1 = `https://devapi.qweather.com/v7/weather/now?location=${id}&key=${key}`
					let res1 = await fetch(httpUrl1)
					let result1 = await res1.json()
					let now = result1.now
					this.tmpNew =now.temp
					this.briefNew = now.text
				}
			}
		})
	</script>
</html>