SkyWeather · 云际天气#

功能特性#

• 多方式定位：支持城市搜索、GPS 定位、IP 自动定位（IPv4 / IPv6 兼容）。
• 实时天气：当前温度、体感温度、天气现象、风速、湿度、气压、紫外线等。
• 空气质量 AQI：PM2.5、PM10、NO₂、SO₂、O₃ 等污染物数据（需配置和风天气 Key）。
• 24 小时预报：逐小时温度、天气、降水概率、风速。
• 7 天预报：每日最高 / 最低温度、天气、降水概率、日出日落。
• 动态天气背景：基于 Canvas 的雨雪、雷暴、雪花、雾气等沉浸式粒子动画。
• 自适应主题：根据天气状态自动切换晴天、多云、雨天、雪天、雷暴、雾霾等主题。
• 搜索历史：本地存储最近搜索城市，最多 8 条，支持一键清空。
• 随机背景图：可切换 Bing / 随机风景背景。
• PWA 友好：支持 apple-mobile-web-app、theme-color、viewport-fit 等移动端适配。

技术栈#

• 纯前端：HTML5 + CSS3（自定义属性 / 玻璃拟态）+ 原生 JavaScript（ES6+）
• 动画：Canvas 2D 粒子系统 + CSS 动画
• 天气数据源：
  • Open-Meteo：全球天气，免 API Key，作为默认兜底。
  • 高德地图 Web 服务：中国地区地理编码 / 天气 / IP 定位。
  • 和风天气：AQI 空气质量与城市天气。
  • IPnews：IPv6 网络 IP 定位。
  • GeoDB Cities：城市搜索与 IP 定位兜底。
• 图片源：随机背景图通过 https://pic.api.sylv.top/image 获取。

目录结构#

1
.
2
├── index.html          # 主页面（包含样式与业务逻辑）
3
├── build.js            # 构建脚本：根据环境变量生成 config.js
4
├── edgeone.json        # EdgeOne Pages 部署配置
5
├── package.json        # 项目脚本定义
6
├── .env.example        # 环境变量模板
7
├── .gitignore          # Git 忽略规则
8
└── README.md           # 本文件

快速开始#

1
git clone https://github.com/your-username/tianqi.git
2
cd tianqi

1
cp .env.example .env

1
npm run build
2
# 或
3
node build.js

1
npm run check
2
# 或
3
node build.js check

1
npx serve .

部署#

1
node build.js

环境变量说明#

构建时配置来源优先级（高 → 低）：

1. 系统环境变量（process.env）
2. .env 文件

这样设计可以同时兼容本地开发与 EdgeOne Pages / Vercel 等 CI/CD 平台。

浏览器支持#

• Chrome / Edge / Firefox / Safari 最新版
• 支持移动端浏览器与 PWA 添加到主屏
• 尊重 prefers-reduced-motion 媒体查询，减少动态效果

许可证#

本项目仅用于学习与交流，请遵守各数据提供方的使用条款。

致谢#

• 天气数据：Open-Meteo、和风天气
• 地图与定位：高德地图、IPnews、GeoDB
• 字体：Inter by Google Fonts