SkyWeather · 云际天气#

功能特性#

• 多方式定位：支持城市搜索、GPS 定位、IP 自动定位（IPv4 / IPv6 兼容）。
• 实时天气：当前温度、体感温度、天气现象、风速、湿度、气压、紫外线等。
• 空气质量 AQI：PM2.5、PM10、NO₂、O₃ 等污染物数据；未配置和风天气 Key 时由 Open-Meteo 兜底（线上即此状态）。
• 24 小时预报：逐小时温度、天气、降水概率、风速。
• 7 天预报：每日最高 / 最低温度、天气、降水概率、日出日落。
• 生活建议：穿衣、紫外线、运动、洗车、感冒、过敏 6 项。
• 日出日落：日照时长弧线展示。
• 动态天气背景：以 WebGL（Three.js）为主渲染，Canvas 2D 降级，覆盖雨雪、雷暴、雾气等沉浸式效果，并尊重 prefers-reduced-motion。
• 自适应主题：根据天气状态自动切换晴、多云、雨、雪、雷暴、雾霾等 7 套主题。
• 搜索历史：本地存储最近搜索城市，最多 8 条，支持一键清空；另有 9 城快捷入口。
• 随机背景图：可切换 Bing / 随机风景背景（随机风景经 https://pic.api.sylv.top/image 获取）。
• PWA：仅 meta 级适配（theme-color、apple-mobile-web-app、viewport-fit），无 manifest，不宜当作完整 PWA 使用。

技术栈#

• 纯前端：HTML5 + CSS3（自定义属性 / 玻璃拟态）+ 原生 JavaScript（ES6+）
• 动画：WebGL（Three.js ^0.160.1，唯一运行时依赖，本地 vendor）主渲染 + 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
├── weather-renderer.js # WebGL 天气渲染器（ES module）
4
├── server.js           # 自建服务端代理（同源 /api/*）
5
├── build.js            # 构建脚本：根据环境变量生成 config.js（布尔标志，不含 Key）
6
├── copy-vendor.js      # 本地 vendor 拷贝（postinstall）
7
├── edge-functions/api/[[path]].js # EdgeOne 边缘函数代理
8
├── edgeone.json        # EdgeOne Pages 部署配置
9
├── package.json        # 项目脚本定义（含 three）
10
├── .env.example        # 环境变量模板
11
├── .gitignore          # Git 忽略规则
12
└── README.md           # 项目说明（目录树与 Android 章节已落后，以此处为准）

快速开始#

1
git clone https://github.com/zzrliu8421/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 .

部署#

项目支持 4 种方式：自建服务器、静态 + 独立代理、纯静态、EdgeOne 边缘函数（推荐）。

部署#

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