使用和风天气接口api（全过程）——获取天气

已于 2024-01-15 11:00:37 修改
阅读量6k 收藏 33
点赞数 19
文章标签： uni-app
于 2024-01-15 10:35:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_49080170/article/details/135595357
版权

1、显示效果

2、注册和风天气的账号

和风天气的官网

和风天气插件 | 和风天气插件产品，免费、跨终端。适配你的网站、APP、公众号 (qweather.com)

3、获取和风天气的key

这个地方注意一下，看你是做案例还是，公司使用，如果是做案例，可以和小编一样选择免费订

阅。设置key的地方你可以选择Web API，如果你选择了 Android SDK / iOS SDK，那么生成的密

钥只能使用官方的 SDK 进行数据访问，如果是 Web API的话，可以自己编程获取并解析数据。

4、使用和风天气图标

npm i qweather-icons

5、移动图标


6、uniapp中使用

7、完整代码

<template>
	<view class="">
		<view class="header-modular" v-if="now">
			<image class="bg-wave" src="../../static/bg_wave.gif"></image>
			<view class="row">
				<view class="row location-wrap" @click="selectLocation">
					<view class="title">{{ City }} {{ County }}</view>
				</view>
			</view>
			<view class="row">
				<view class="tmp">{{ now.temp }}°</view>
				<image class="icon-weather" :src="`/static/icons/${now.icon}.svg`"></image>
			</view>
			<view class="tips-wrap">
				<view class="tips">{{ now.windDir }} {{ now.windScale }}级</view>
				<view class="tips">湿度 {{ now.humidity }}%</view>
				<view class="tips">气压 {{ now.pressure }}Pa</view>
			</view>
		</view>
		<!-- 24小时预报 -->
		<view class="card-modular" v-if="hourly">
			<view class="title">24小时预报</view>
			<view class="card-wrap">
				<block v-for="(item, index) in hourly" :key="index">
					<view class="item hourly">
						<view class="text-gray">{{ item.time }}</view>
						<image class="icon" :src="`/static/icons/${item.icon}.svg`"></image>
						<view class="text-primary mb-32">{{ item.temp }}°</view>
						<view>{{ item.windDir }}</view>
						<view class="text-gray">{{ item.windScale }}级</view>
					</view>
				</block>
			</view>
		</view>
		<!-- 7天预报 -->
		<view class="card-modular" v-if="daily">
			<view class="title">7天预报</view>
			<view class="card-wrap">
				<block v-for="(item, index) in daily" :key="index">
					<view class="item daily">
						<view>{{ item.dateToString }}</view>
						<view class="text-gray">{{ item.date }}</view>
						<view class="text-primary">{{ item.tempMin }}°~{{ item.tempMax }}°</view>
						<image class="icon" :src="`/static/icons/${item.iconDay}.svg`"></image>
						<view>{{ item.windDirDay }}</view>
						<view class="text-gray">{{ item.windScaleDay }}级</view>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
const APIKEY = ''; // 填入你申请的KEY

export default {
	data() {
		return {
			location: '',
			now: '',
			hourly: '',
			daily: '',
			City: '',
			County: ''
		};
	},
	onLoad() {
		this.getLocation();
	},
	methods: {
		//选择定位
		selectLocation() {
			var that = this;
			uni.chooseLocation({
				success(res) {
					that.location = res.longitude + ',' + res.latitude;
					that.getWeather();
					that.getCityByLoaction();
				},
				fail() {
					uni.getLocation({
						type: 'gcj02',
						fail() {
							uni.showModal({
								title: '获取地图位置失败',
								content:
									'为了给您提供准确的天气预报服务,请在设置中授权【位置信息】',
								success(mRes) {
									if (mRes.confirm) {
										uni.openSetting({
											success: function (data) {
												if (
													data.authSetting['scope.userLocation'] === true
												) {
													that.selectLocation();
												} else {
													uni.showToast({
														title: '授权失败',
														icon: 'none',
														duration: 1000
													});
												}
											},
											fail(err) {
												console.log(err);
												uni.showToast({
													title: '唤起设置页失败，请手动打开',
													icon: 'none',
													duration: 1000
												});
											}
										});
									}
								}
							});
						}
					});
				}
			});
		},
		/**
		 * 获取定位
		 */
		getLocation() {
			var that = this;
			uni.getLocation({
				type: 'gcj02',
				success(res) {
					that.location = res.longitude + ',' + res.latitude;
					that.getWeather();
					that.getCityByLoaction();
				},
				fail(err) {
					uni.showModal({
						title: '获取定位信息失败',
						content: '为了给您提供准确的天气预报服务,请在设置中授权【位置信息】',
						success(mRes) {
							if (mRes.confirm) {
								uni.openSetting({
									success: function (data) {
										if (data.authSetting['scope.userLocation'] === true) {
											uni.showToast({
												title: '授权成功',
												icon: 'success',
												duration: 1000
											});
											that.getLocation();
										} else {
											uni.showToast({
												title: '授权失败',
												icon: 'none',
												duration: 1000
											});
											that.location = '地理位置';
											that.getWeather();
											that.getCityByLoaction();
										}
									},
									fail(err) {
										console.log(err);
										uni.showToast({
											title: '唤起设置页失败，请手动打开',
											icon: 'none',
											duration: 1000
										});
										that.location = '地理位置';
										that.getWeather();
										that.getCityByLoaction();
									}
								});
							} else if (mRes.cancel) {
								that.location = '地理位置';
								that.getWeather();
								that.getCityByLoaction();
							}
						}
					});
				}
			});
		},
		/**
		 * 根据坐标获取城市信息
		 */
		getCityByLoaction() {
			var that = this;
			uni.request({
				url:
					'https://geoapi.qweather.com/v2/city/lookup?key=' +
					APIKEY +
					'&location=' +
					that.location,
				success(result) {
					var res = result.data;
					if (res.code == '200') {
						var data = res.location[0];
						that.City = data.adm2;
						that.County = data.name;
					} else {
						uni.showToast({
							title: '获取城市信息失败',
							icon: 'none'
						});
					}
				}
			});
		},
		/**
		 * 获取天气
		 */
		getWeather() {
			var that = this;
			uni.showLoading({
				title: '加载中'
			});
			uni.request({
				url:
					'https://devapi.qweather.com/v7/weather/now?key=' +
					APIKEY +
					'&location=' +
					that.location,
				success(result) {
					var res = result.data;
					that.now = res.now;
				}
			});
			uni.request({
				url:
					'https://devapi.qweather.com/v7/weather/24h?key=' +
					APIKEY +
					'&location=' +
					that.location,
				success(result) {
					var res = result.data;
					res.hourly.forEach(function (item) {
						item.time = that.formatTime(new Date(item.fxTime)).hourly;
					});
					that.hourly = res.hourly;
				}
			});
			uni.request({
				url:
					'https://devapi.qweather.com/v7/weather/7d?key=' +
					APIKEY +
					'&location=' +
					that.location,
				success(result) {
					var res = result.data;
					res.daily.forEach(function (item) {
						item.date = that.formatTime(new Date(item.fxDate)).daily;
						item.dateToString = that.formatTime(new Date(item.fxDate)).dailyToString;
					});
					that.daily = res.daily;
					uni.hideLoading();
				}
			});
		},
		// 格式时间
		formatTime(date) {
			const year = date.getFullYear();
			const month = date.getMonth() + 1;
			const day = date.getDate();
			const hour = date.getHours();
			const minute = date.getMinutes();
			const second = date.getSeconds();
			const weekArray = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
			const isToday = date.setHours(0, 0, 0, 0) == new Date().setHours(0, 0, 0, 0);
			return {
				hourly: [hour, minute].map(this.formatNumber).join(':'),
				daily: [month, day].map(this.formatNumber).join('-'),
				dailyToString: isToday ? '今天' : weekArray[date.getDay()]
			};
		},
		// 补零
		formatNumber(n) {
			n = n.toString();
			return n[1] ? n : '0' + n;
		}
	}
};
</script>

<style lang="scss">
.row {
	display: flex;
	align-items: center;
}

.mb-32 {
	margin-bottom: 32rpx;
}

/* 页面样式 */
.header-modular {
	height: 400rpx;
	background-color: #64c8fa;
	background: linear-gradient(to bottom, #56ccf2, #2f80ed);
	position: relative;
	padding: 30rpx;
}

.header-modular .bg-wave {
	width: 100vw;
	position: absolute;
	bottom: -2px;
	left: 0;
	right: 0;
	height: 120rpx;
	mix-blend-mode: screen;
}

.header-modular .location-wrap {
	color: #ffffff;
	font-weight: bold;
	font-size: 36rpx;
}

.header-modular .location-wrap .icon {
	width: 40rpx;
	height: 40rpx;
	margin-right: 8rpx;
}

.header-modular .tmp {
	font-size: 200rpx;
	/* font-weight: bold; */
	color: #ffffff;
	margin-right: auto;
}

.header-modular .icon-weather {
	width: 200rpx;
	height: 200rpx;
}

.header-modular .tips-wrap {
	display: flex;
	justify-content: space-between;
}

.header-modular .tips {
	font-size: 28rpx;
	opacity: 0.8;
	color: #ffffff;
	flex: 1;
}

.header-modular .tips:nth-child(3) {
	text-align: right;
}

.header-modular .tips:nth-child(2) {
	text-align: center;
}

.card-modular {
	padding: 0 30rpx;
	margin-top: 30rpx;
}

.card-modular > .title {
	font-size: 40rpx;
	font-weight: bold;
	position: relative;
	margin-left: 14rpx;
	margin-bottom: 16rpx;
}

.card-modular > .title::before {
	content: '';
	position: absolute;
	left: -14rpx;
	top: 10rpx;
	bottom: 10rpx;
	width: 8rpx;
	border-radius: 10rpx;
	background-color: #2f80ed;
}

.card-modular .card-wrap {
	width: 690rpx;
	border-radius: 18rpx;
	background-color: #ffffff;
	box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.2);
	overflow-x: auto;
	white-space: nowrap;
}

.card-modular .card-wrap .item {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	font-size: 28rpx;
	padding: 18rpx 0;
}
.card-modular .card-wrap .item.hourly {
	width: 138rpx;
}
.card-modular .card-wrap .item.daily {
	width: 172.5rpx;
}
.card-modular .card-wrap .item .icon {
	width: 60rpx;
	height: 60rpx;
	margin: 64rpx 0;
}

.card-modular .card-wrap .item .text-gray {
	color: gray;
}

.card-modular .card-wrap .item .text-primary {
	color: #2f80ed;
}
</style>

小怪兽_v
关注
知识图谱+Recorder︱中文知识图谱API与工具、科研机构与算法框架
素质云笔记
03-26 3万+
分为两个部分，笔者看到的知识图谱在商业领域的应用，外加看到的一些算法框架与研究机构。 一、知识图谱商业应用 01 唯品金融大数据 使用的是OrientDB，Orientdb提供了大量的接口， 其中最常用的就是Gremlin和sql。 Gremlin是Apache TinkerPop 框架下的图遍历语言。Gremlin是一种函数式数据流语言，可以使得用户使用简洁的方式表述复杂...
书生大模型第四期笔记:Prompt/RAG/XTuner微调/Agent/LMDeploy量化部署...
m0_53632564的博客
11-07 1261
远程连接的好处就是，如果你使用的是远程办公，你可以通过SSH远程连接开发机，这样就可以在本地进行开发。是一种网络技术，它可以将外网中的任意端口映射到内网中的相应端口，实现内网与外网之间的通信。这条命令会通过开发机 SSH 通道将开发机内的 {开发机_PORT} 转发到您本地机器的 (本地机器_PORT}，这个过程可能会要求你输入 SSH 链接的密码。组成，为建立安全的 SSH 通道，双方需要先建立 TCP 连接，然后协商使用的版本号和各类算法，并生成相同的。，我们使用本地连接访问，解决这个代理问题。
基于和风天气API的Android简易版天气App设计源码
10-04
本项目为基于和风天气API的Android简易版天气应用设计源码，包含80个文件，涵盖26个XML布局文件、17个Java源代码文件、10个WebP图片资源、7个二进制文件、5个锁文件、5个属性配置文件、3个Gradle构建脚本以及2个Git忽略配置文件。该应用采用Java语言开发，旨在为用户提供便捷的天气信息服务。
【微信小程序】使用和风天气接口api（全过程）——获取天气
weixin_60387745的博客
03-25 2万+
【微信小程序】使用和风天气接口api（全过程）——获取天气
【教程】如何进行api测试？以全国天气实况接口为例
elvasjf的博客
04-07 344
2、打开需要调用的接口的开发文档介绍，按照开发文档的说明，在接口测试工具里填写相关信息。1、任意找一个接口测试工具软件，新建项目。3、确认接口返回结果。
ESP32（Arduino)获取和风天气数据
y275903528的博客
06-13 2973
和风天气API采用HTTPS方式获取相关天气数据，并且返回数据采用GZIP压缩方式，因此先要建立HTTPS链接，获取数据后，使用UZIP库里的 int result=ArduinoUZlib::decompress(inbuff, size, outbuf,outsize);库，用于解压和风天气返回的数据流。由于和风天气采用Gzip压缩方式返回数据流，返回的数据需要解压。以及与HTTPS、JSON等相关库。为了方便理解代码功能，不同功能的代码，各采用1个.h和.cpp文件。注册，获取账号的key。
使用OpenWeatherMap API轻松获取天气数据
weixin_53154312的博客
09-23 3034
将使用HTML、CSS和JavaScript来构建用户界面，并利用OpenWeatherMap的API来获取实时天气数据。
天气预报免费API接口，实时天气和未来15天天气状况实时掌握
实时公交接口API
07-01 7377
开发文档参考来源：https://console-docs.apipost.cn/preview/8cafe72ecd5ddecc/7f1676f5f3ea5fa1?发现一个可以免费查询天气情况的api：温度、湿度、AQI、天气、风向等。
【Android】使用和风天气API获取天气数据吧！（天气预报系列之一）
2301_79344902的博客
09-08 4029
天气预报仅仅有数据肯定不够，至于UI等等后事如何，且听第二三四五六回分解。
和风天气接口
xiaodaidaiPromax_2024
06-13 1651
和风天气接口
和风天气常用api
qq_54818343的博客
02-28 1958
1.根据城市名获取和风天气id等信息。
免费获取天气预报的API接口（Json格式）
热门推荐
Roc的博客
10-13 3万+
当需要获取某个城市天气数据json时候，需要传入一个城市代码编码作为入参，地址： [http://t.weather.itboy.net/api/weather/city/](http://t.weather.itboy.net/api/weather/city/)xxxxx ，其中xxxxx即为城市代码。
微信小程序调用和风天气的api(云，温湿度，空气质量)
最新发布
weixin_72315338的博客
04-22 188
我是一个刚入门的小白，我想做一个项目用于查询天气和空气质量但是网上的文章要么太多内容看不懂，要么过时了所以研究了好一会，我折腾出来了。去将你的api host（域名）导入白名单，これ这个。用wx.request()去发送请求。接下来去小程序的js部分。依照官方给的样例如图。
adroid天气预报源码
12-25
这个天气预报App的核心功能是通过调用第三方API——和风天气的服务来获取并展示天气数据。如果遇到API key失效的问题，用户可以自行在和风天气的官方网站注册账号并申请新的key来替换。 1. **Android基础知识** - ...
鸿蒙开发课设报告——鸿蒙天气预报APP（仿小米天气）
qxf865618770的博客
11-13 1904
特别是在提供实时天气、空气质量、未来几天的天气预报等功能时，天气应用在用户的生活中发挥着重要作用。本项目旨在实现一个仿照小米天气App的“好天气App”，并在鸿蒙操作系统上开发，借此提升开发者对鸿蒙平台的理解与应用。本文详细介绍了在鸿蒙操作系统上开发的“天气App”，该应用旨在为用户提供实时天气信息，模拟小米天气App的界面和功能。“天气App”作为一款基于鸿蒙操作系统的天气应用，成功实现了实时天气查询和预报功能，用户可以方便地查看当地天气以及未来几天的天气情况。：天气数据的API有些不太全。
小程序的学习资料收集
weixin_30414245的博客
02-23 3326
收集学习资料 1：官方工具：https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2：简易教程：https://mp.weixin.qq.com/debug/wxadoc/dev/?t=1476434677599 3：设计指南：https://mp.weixin.qq.com/debug/wxadoc/desig...
和风天气通过经纬度获取天气信息
wj1qaz的博客
12-11 607
和风天气通过经纬度获取天气信息
用Python构建一个天气API集成
No trade is free, but my contents are.
03-06 451
→ 注册账号 → 创建应用获取。
如何获取和风天气Web API的KEY？（简要步骤）
weixin_62073160的博客
03-14 6088
1.跳转到。
和风天气api接口 c 代码
05-16
以下是使用和风天气API的C代码示例： ```c #include <stdio.h> #include <stdlib.h> #include <string.h> #include <curl/curl.h> #define MAX_CITY_NAME_LEN 100 #define MAX_WEATHER_LEN 2000 // 和风天气API的基本信息 #define API_KEY "your_api_key" //替换为你的API Key #define API_URL "https://free-api.heweather.net/s6/weather/now" // 回调函数，用于处理HTTP响应 size_t write_callback(char *ptr, size_t size, size_t nmemb, void *userdata) { strcat((char *) userdata, ptr); // 将HTTP响应内容添加到userdata中 return size * nmemb; } int main() { // 从用户输入中获取城市名 char city[MAX_CITY_NAME_LEN]; printf("请输入城市名："); scanf("%s", city); // 构造HTTP请求URL char url[MAX_WEATHER_LEN]; snprintf(url, MAX_WEATHER_LEN, "%s?key=%s&location=%s", API_URL, API_KEY, city); // 初始化CURL库和HTTP请求 CURL *curl = curl_easy_init(); if (!curl) { fprintf(stderr, "初始化CURL失败！\n"); return EXIT_FAILURE; } curl_easy_setopt(curl, CURLOPT_URL, url); // 设置HTTP请求URL curl_easy_setopt(curl, CURLOPT_WRITEFUNCTION, write_callback); // 设置回调函数 char weather[MAX_WEATHER_LEN] = ""; // 用于存储HTTP响应内容的字符串 curl_easy_setopt(curl, CURLOPT_WRITEDATA, weather); // 设置回调函数的userdata // 执行HTTP请求 CURLcode res = curl_easy_perform(curl); if (res != CURLE_OK) { fprintf(stderr, "HTTP请求失败：%s\n", curl_easy_strerror(res)); return EXIT_FAILURE; } // 解析HTTP响应中的天气信息 char *status_start = strstr(weather, "\"status\":\""); // 找到状态码的起始位置 if (!status_start) { fprintf(stderr, "无法解析HTTP响应：%s\n", weather); return EXIT_FAILURE; } char *status_end = strchr(status_start + 11, '\"'); // 找到状态码的终止位置 if (!status_end) { fprintf(stderr, "无法解析HTTP响应：%s\n", weather); return EXIT_FAILURE; } *status_end = '\0'; // 将状态码终止位置的字符改为'\0'，截断字符串 int status_code = atoi(status_start + 11); // 将状态码从字符串转换为整数 if (status_code != 200) { fprintf(stderr, "HTTP请求失败，状态码：%d\n", status_code); return EXIT_FAILURE; } char *cond_start = strstr(weather, "\"cond_txt\":\""); // 找到天气状况的起始位置 if (!cond_start) { fprintf(stderr, "无法解析HTTP响应：%s\n", weather); return EXIT_FAILURE; } char *cond_end = strchr(cond_start + 13, '\"'); // 找到天气状况的终止位置 if (!cond_end) { fprintf(stderr, "无法解析HTTP响应：%s\n", weather); return EXIT_FAILURE; } *cond_end = '\0'; // 将天气状况终止位置的字符改为'\0'，截断字符串 char *cond_txt = cond_start + 13; // 天气状况的字符串就是起始位置的后面13个字符 printf("%s的天气状况为：%s\n", city, cond_txt); // 清理CURL库 curl_easy_cleanup(curl); return EXIT_SUCCESS; } ``` 需要注意的是，上述代码使用了libcurl库来进行HTTP请求，并使用了C标准库中的字符串处理函数来解析HTTP响应内容。在使用前需要安装libcurl库，并在编译时链接该库。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值