天气查询 APP

一个基于 React Native 和 Expo 的天气查询应用程序，使用和风天气 API，提供实时天气和 24 小时逐小时预报功能。

功能特性

• 🌤️ 实时天气查询 - 输入城市名称获取实时天气信息
• ⏰ 24 小时预报 - 逐小时天气预报，支持横向滚动查看
• 🎨 简洁美观的 UI - 现代化的界面设计，支持天气图标显示
• 📱 响应式设计 - 适配不同屏幕尺寸
• 💾 内存缓存 - 10 分钟缓存机制，减少 API 调用
• ⚠️ 错误处理 - 完善的网络错误和 API 错误提示
• 🔄 重试机制 - 支持失败后重新查询
• 🌡️ 详细天气信息 - 显示温度、湿度、风力、能见度等详细信息

技术架构

项目结构

src/
├── api/
│   └── index.js          # 和风天气API服务封装
└── components/
    ├── SearchBar.js      # 搜索栏组件
    ├── WeatherCard.js    # 天气卡片组件
    ├── HourlyForecast.js # 24小时预报组件
    └── ErrorMessage.js   # 错误提示组件

核心功能

1. API 服务层 (src/api/index.js)

   • 封装和风天气 API 调用
   • 实现内存缓存机制
   • 统一的错误处理
   • 支持实时天气和 24 小时预报

2. UI 组件

   • SearchBar: 城市搜索输入框
   • WeatherCard: 天气信息展示卡片（含详细信息）
   • HourlyForecast: 24 小时逐小时预报组件
   • ErrorMessage: 错误提示组件

3. 缓存机制

   • 使用 Map 实现内存缓存
   • 10 分钟缓存过期时间
   • 支持缓存清理
   • 分别缓存实时天气和小时预报数据

4. 逐小时预报功能

   • 显示未来 24 小时天气变化
   • 横向滚动查看所有时段
   • 高亮显示当前时间
   • 包含温度、天气、降水概率、风力等信息

安装和运行

1. 安装依赖

npm install

2. 配置 API 密钥

   • 在 src/api/index.js 中替换 YOUR_API_KEY 为您的和风天气 API 密钥
   • 获取 API 密钥：https://dev.qweather.com/

3. 启动应用

npm start

使用说明

1. 在搜索框中输入城市名称（支持中文和英文）
2. 点击"查询"按钮或按回车键
3. 查看天气信息，包括：
   • 城市名称和当前温度
   • 天气描述和图标
   • 详细天气信息（风向、风力、湿度、能见度）
   • 24 小时逐小时预报

API 配置

本应用使用和风天气 API，需要注册获取免费 API 密钥：

1. 访问 https://dev.qweather.com/
2. 注册账号并获取 API 密钥
3. 在 src/api/index.js 中替换 YOUR_API_KEY

和风天气 API 优势

• 免费使用：个人开发者免费，每天 1000 次调用
• 国内服务：访问速度快，稳定性好
• 数据丰富：提供实时天气、24 小时预报、7 天预报等
• 中文支持：完美支持中文城市名称

错误处理

应用包含完善的错误处理机制：

• 404 错误: 城市不存在提示
• 401 错误: API 密钥无效提示
• 429 错误: 请求过于频繁提示
• 网络错误: 网络连接失败提示
• 其他错误: 通用错误提示

缓存策略

• 使用内存缓存，避免重复 API 调用
• 缓存时间：5 分钟
• 支持手动清除缓存
• 缓存键：城市名称（小写）

开发说明

添加新功能

1. 在 src/components/ 中创建新组件
2. 在 App.js 中导入并使用
3. 更新样式和交互逻辑

修改 API

1. 编辑 src/api/index.js
2. 更新 API 端点和参数
3. 调整错误处理逻辑

许可证

MIT License