从零开始构建React天气应用：API集成与UI设计全指南 🌤️

项目概述

本文将详细介绍如何使用React构建一个功能完善的天气应用，该应用能够获取用户所在城市位置，展示实时天气和未来天气预报，并通过优雅的UI设计呈现给用户。我们将从零开始，一步步实现从API集成到UI美化的全过程。

技术栈选择

核心框架：React 18
API服务：高德地图开放平台 (定位+天气服务)
样式解决方案：CSS Flexbox + Grid
构建工具：Create React App
图标库：阿里图标库

项目结构设计

合理的项目结构是代码可维护性的基础，我们采用以下目录结构：

csharp 复制代码

weather-app/
├── public/
│   ├── img/           # 天气图标资源
│   └── index.html     # 入口HTML
└── src/
    ├── components/    # 业务组件
    │   ├── Weather.css
    │   └── Weather.jsx
    ├── lib/           # 工具函数
    │   ├── weatherImg.js  # 天气图标映射
    │   └── week.js        # 星期格式化
    ├── App.jsx        # 应用入口组件
    └── index.js       # 渲染入口

高德地图API集成实战

1. API申请与配置

首先需要在高德开放平台申请开发者账号并创建应用，获取API Key和安全密钥。

2. 定位功能实现

在Weather.jsx中，我们使用高德地图JSAPI实现城市定位：

jsx 复制代码

useEffect(() => {
  window._AMapSecurityConfig = {
    securityJsCode: "你的安全密钥",
  };
  AMapLoader.load({
    key: "你的API Key",
    version: "2.0",
    plugins: ["AMap.Scale"],
  })
    .then((AMap) => {
      getLocalCity(AMap);
    })
}, [])

const getLocalCity = (AMap) => {
  AMap.plugin('AMap.CitySearch', function () {
    var citySearch = new AMap.CitySearch()
    citySearch.getLocalCity(function (status, result) {
      if (status === 'complete' && result.info === 'OK') {
        setCity(result.city)
        getWeather(AMap, result.city)
        getFutureWeather(AMap, result.city)
      }
    })
  })
}

3. 天气数据获取

通过高德地图天气插件获取实时天气和预报数据：

jsx 复制代码

const getWeather = (AMap, myCity) => {
  AMap.plugin("AMap.Weather", function () {
    var weather = new AMap.Weather();
    weather.getLive(myCity, function (err, data) {
      setWeather(data)
    });
  });
}

const getFutureWeather = (AMap, myCity) => {
  AMap.plugin("AMap.Weather", function () {
    var weather = new AMap.Weather();
    weather.getForecast(myCity, function (err, data) {
      setFuture(data.forecasts)
    });
  });
}

React组件设计与状态管理

1. 状态定义

我们使用React的useState Hook管理应用状态：

jsx:/f:/深索/react/weather/src/components/Weather.jsx 复制代码

const [city, setCity] = useState('北京市')
const [weather, setWeather] = useState({})
const [future, setFuture] = useState([])

2. 组件结构

应用采用清晰的组件化结构，主要分为：

头部区域（城市选择）
今日天气区域
未来天气预报区域
天气趋势图表区域（预留）

天气数据处理与展示

1. 星期格式化

API返回的星期是数字形式（1-7），我们创建工具函数转换为中文：

jsx 复制代码

function formatWeek(num) {
  let weeks = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  return weeks[num - 1]
}

使用方式：

jsx:/f:/深索/react/weather/src/components/Weather.jsx 复制代码

<div className="week">{formatWeek(item.week)}</div>

2. 天气图标处理

根据天气类型匹配对应的图标资源：

jsx 复制代码

const qing = process.env.PUBLIC_URL + '/img/晴.png';
const leizhenyu = process.env.PUBLIC_URL + '/img/雷阵雨.png';
const duoyun = process.env.PUBLIC_URL + '/img/多云.png';

export function formatWeatherImg(str) {
  switch (str) {
    case '晴':
      return qing
    case '多云':
      return duoyun
    case '雷阵雨':
      return leizhenyu
  }
}

⚠️ 注意：在React中引用public文件夹资源时，推荐使用process.env.PUBLIC_URL确保路径正确。

3. 列表渲染优化

跳过未来天气预报的第一个数据（今日），从第二天开始展示：

jsx 复制代码

{future.length > 0 ? (
  future.slice(1).map((item, index) => (
    <li className="future-item" key={index}>
      <div className="week">{formatWeek(item.week)}</div>
      <div className="pic">
        <img src={formatWeatherImg(item.dayWeather)} alt={item.dayWeather} />
      </div>
      <div className="max-min">
        <div className="max">{item.dayTemp}℃ </div>
        <div className="min">/ {item.nightTemp}℃</div>
      </div>
    </li>
  ))
) : (
  <li className="future-item">加载天气预报中...</li>
)}

CSS Flexbox布局实践

本项目大量使用Flexbox实现响应式布局，例如未来天气预报区域：

css 复制代码

.future-list{
  display: flex;
  overflow-x: scroll;
}

.future-item{
  flex: 0 0 120px;
  padding: 17px;
  box-sizing: border-box;
  box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.05);
  border-radius: 16px;
  border: 1px solid #F3F4F6;
  margin-right: 16px;
}

.pic{
  margin: 8px 0 10px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

常见问题解决方案

1. 数据加载前的空状态处理

使用条件渲染避免数据未加载时的错误：

jsx 复制代码

{future.length > 0 ? (
  // 渲染列表
) : (
  <li className="future-item">加载天气预报中...</li>
)}

2. 图片资源路径问题

使用环境变量确保不同环境下资源路径正确：

js 复制代码

const qing = process.env.PUBLIC_URL + '/img/晴.png';

3. Flexbox布局空间分配

确保父容器有足够宽度，子元素设置合适尺寸：

css 复制代码

.future-list{
  display: flex;
  width: 100%;
}

项目优化与扩展建议

错误处理增强：添加API请求失败的错误提示
缓存机制：对天气数据进行本地缓存，减少API请求
主题切换：实现亮色/暗色主题切换功能
更多天气指标：添加空气质量、紫外线等更多天气信息
单元测试：为工具函数和组件添加单元测试

总结

通过本文的学习，我们掌握了如何使用React构建一个完整的天气应用，包括API集成、状态管理、数据处理和UI设计等方面。这个项目虽然简单，但涵盖了前端开发中的许多常见场景和最佳实践。

希望这篇教程对你有所帮助！如果你有任何问题或建议，欢迎在评论区留言讨论。

#React #前端开发 #API集成 #天气应用 #Flexbox布局