调用高德天气Api，并展示对应天气图标

1、申请高德key

点击高德官网申请

• 必须有key才能调用高德api

小提示：每日/每秒调用api次数有限，尽量不要循环调用。 每日大概5000，每秒3次

2、查看文档

高德官网天气api接口文档

• 请求示例：
  https://restapi.amap.com/v3/weather/weatherInfo?key=你的key&city=130629&extensions=all

3、 项目中使用

• 在项目 vite.config.ts 文件下配置反向代理

		server: {
			host: "0.0.0.0", // 服务器主机名，如果允许外部访问，可设置为"0.0.0.0"
			port: viteEnv.VITE_PORT,
			open: viteEnv.VITE_OPEN,
			cors: true,
			// https: false,
			// 代理跨域
			proxy: {
				"/api/weather": {
					target: "https://restapi.amap.com/v3/weather", // 高德api
					changeOrigin: true,
					rewrite: path => path.replace(/^\/api\/weather/, "")
				},
				"/api": {
					target, // 后端接口网址
					changeOrigin: true,
					rewrite: path => path.replace(/^\/api/, "")
				}
			}
		},

• 接口调用
  api 模块

import http from "@/api";

// * 天气信息
const key = "00***fe6";
const city = "130629"; // 高德城市编码
export const getWeather = () => {
	return http.get("/weather/weatherInfo", { key, city, extensions: "all" });
};

• 页面使用
  1.高德官网给的天气情况都是汉字，种类繁多，与产品沟通后只展示以下8种天气状况就OK，各位大佬在搬砖时要提前和PM沟通，可行则此方案亦可
2.免费api调用次数有每日上限问题，故采取缓存处理，每隔一小时请求一次api，望各位大佬知悉

import { useEffect } from "react";
import { connect } from "react-redux";
import moment from "moment";
import { useDispatch } from "@/redux";
import { setWeatherData } from "@/redux/modules/global/action";
import { getWeather } from "@/api/modules/dataScreen";
import feng from "@/assets/weatherIcons/风.png";
import duoyun from "@/assets/weatherIcons/多云.png";
import xue from "@/assets/weatherIcons/雪.png";
import wu from "@/assets/weatherIcons/雾.png";
import qing from "@/assets/weatherIcons/晴.png";
import yu from "@/assets/weatherIcons/雨.png";
import yin from "@/assets/weatherIcons/阴.png";

import "./index.less";
/**
 * @description 天气预报
 * */
const iconWeatherMap: any = {
	风: [
		"有风",
		"平静",
		"微风",
		"和风",
		"清风",
		"强风/劲风",
		"疾风",
		"大风",
		"烈风",
		"风暴",
		"狂爆风",
		"飓风",
		"热带风暴",
		"龙卷风"
	],
	多云: ["少云", "晴间多云", "多云"],
	雪: ["雪", "阵雪", "小雪", "中雪", "大雪", "暴雪", "小雪-中雪", "中雪-大雪", "大雪-暴雪", "冷"],
	雾: ["浮尘", "扬沙", "沙尘暴", "强沙尘暴", "雾", "浓雾", "强浓雾", "轻雾", "大雾", "特强浓雾"],
	晴: ["晴", "热"],
	雨夹雪: ["雨雪天气", "雨夹雪", "阵雨夹雪"],
	雨: [
		"阵雨",
		"雷阵雨",
		"雷阵雨并伴有冰雹",
		"小雨",
		"中雨",
		"大雨",
		"暴雨",
		"大暴雨",
		"特大暴雨",
		"强阵雨",
		"强雷阵雨",
		"极端降雨",
		"毛毛雨/细雨",
		"雨",
		"小雨-中雨",
		"中雨-大雨",
		"大雨-暴雨",
		"暴雨-大暴雨",
		"大暴雨-特大暴雨",
		"冻雨"
	],
	阴: ["阴", "霾", "中度霾", "重度霾", "严重霾", "未知"]
};
const iconUrl: any = {
	风: feng,
	多云: duoyun,
	雪: xue,
	雾: wu,
	晴: qing,
	雨: yu,
	阴: yin
};
const getIcon = (name: string) => {
	for (const key in iconWeatherMap) {
		if (Object.prototype.hasOwnProperty.call(iconWeatherMap, key)) {
			const arr = iconWeatherMap[key];
			if (arr.includes(name)) return key;
		}
	}
};
const Weather = (props: any) => {
	const { setWeatherData } = props;
	const { weatherData } = props.global;
	const { weatherTime, dayWeather, temp } = weatherData;

	const dispatch = useDispatch();

	const fetchData = async () => {
		const { status, forecasts }: { [key: string]: any } = await getWeather();
		if (status === "1") {
			const { dayweather, nighttemp, daytemp } = forecasts[0]["casts"][0];
			setWeatherData({
				dayWeather: dayweather,
				temp: `${nighttemp} - ${daytemp}`,
				weatherTime: moment().format("YYYY-MM-DD HH:mm:ss")
			});
		} else dispatch(setWeatherData({ ...weatherData, dayweather: "晴", temp: "" }));
	};
	useEffect(() => {
		const time: number = 1 * 60; // 1小时
		const now = moment();
		if (!weatherTime) fetchData();
		else if (now.diff(moment(weatherTime), "minutes") >= time) fetchData();
	}, []);

	return (
		<div className="weather">
			<img src={iconUrl[getIcon(dayWeather) || "晴"]} alt="" />
			<div className="weather-info">
				<div>{dayWeather || ""}</div>
				<div className="temp">{temp ? temp + "℃" : ""}</div>
			</div>
		</div>
	);
};
const mapStateToProps = (state: any) => state;
export default connect(mapStateToProps, { setWeatherData })(Weather);

页面最后展示结果

不要质疑我的样式（温度压在背景“线”上），严格按照UI图设计出来的

4、项目用到的图片

• 单个图片（喜欢可以F12查看拿走，像素不行再@我，无偿给大佬）