WeatherMini 是一个功能丰富、设计精美的微信小程序天气应用。提供实时天气信息、24小时预报、城市搜索、天气动画等功能，采用现代化的玻璃态设计风格，为用户带来优雅的天气查询体验。
- 🌡️ 实时天气 - 准确的当前天气信息和体感温度
- 📊 24小时预报 - 详细的逐小时天气趋势图表
- 🗺️ 智能定位 - 自动获取当前位置天气
- 🏙️ 城市搜索 - 支持全球城市搜索（省→市→县三级选择）
- 🎨 天气动画 - 下雨、下雪、阳光等生动天气动画
- 🔊 天气音效 - 沉浸式天气声音体验
- ⚙️ 个性化设置 - 温度单位切换、主题设置等
- 📱 响应式设计 - 适配各种屏幕尺寸
- 🚀 高性能 - 智能缓存、快速加载
 |
 |
 |
 |
| 主页面 | 24小时预报 | 城市选择 | 设置页面 |
- 微信开发者工具 v1.06.2504010+
- Node.js 14.0+ (可选，用于开发工具)
- 有效的 WeatherAPI 密钥
- 克隆项目
git clone https://github.com/your-username/weather-miniprogram.git
cd weather-miniprogram- 配置API密钥
// utils/config.js
const CONFIG = {
WEATHER_API: {
KEY: 'your_weatherapi_key_here', // 替换为你的API密钥
// ... 其他配置
}
}-
导入微信开发者工具
- 打开微信开发者工具
- 选择"导入项目"
- 选择项目目录
- 填写AppID（测试可使用测试AppID）
-
获取WeatherAPI密钥
- 访问 WeatherAPI
- 注册账号并获取免费API密钥
- 将密钥配置到
utils/config.js
weather-miniprogram/
├── app.js # 全局应用配置
├── app.json # 全局配置文件
├── app.wxss # 全局样式文件
├── utils/ # 工具类目录
│ ├── config.js # 配置管理
│ ├── weatherAPI.js # 天气API封装
│ ├── storage.js # 存储管理
│ └── errorHandler.js # 错误处理
├── pages/ # 页面目录
│ ├── index/ # 主页面
│ ├── hourly/ # 24小时预报
│ ├── citySelector/ # 城市选择
│ ├── settings/ # 设置页面
│ └── about/ # 关于页面
├── data/ # 数据文件
│ ├── china-cities-hierarchy.js # 中国城市数据
│ └── international-cities-hierarchy.js # 国际城市数据
├── assets/ # 资源文件
│ └── sounds/ # 音效文件
└── docs/ # 文档目录
项目采用模块化架构设计，主要包含以下核心模块：
// 统一的API调用
const weatherAPI = require('../../utils/weatherAPI.js')
// 获取当前天气
const weather = await weatherAPI.getCurrentWeather('北京')
// 获取预报数据
const forecast = await weatherAPI.getForecast('北京', 1, 24)const { SafeStorage } = require('../../utils/storage.js')
// 安全存储操作
SafeStorage.set('key', value)
const data = SafeStorage.get('key', defaultValue)const { ErrorHandler } = require('../../utils/errorHandler.js')
try {
// 业务逻辑
} catch (error) {
ErrorHandler.handle(error, '业务上下文', true)
}- 添加新页面
# 在pages目录下创建新页面目录
mkdir pages/your-page
cd pages/your-page
# 创建页面文件
touch your-page.wxml # 页面结构
touch your-page.wxss # 页面样式
touch your-page.js # 页面逻辑
touch your-page.json # 页面配置- 注册页面路由
// app.json
{
"pages": [
"pages/index/index",
"pages/your-page/your-page"
]
}- 使用工具类
// your-page.js
const weatherAPI = require('../../utils/weatherAPI.js')
const { SafeStorage } = require('../../utils/storage.js')
Page({
async onLoad() {
try {
const data = await weatherAPI.getCurrentWeather('城市名')
// 处理数据...
} catch (error) {
ErrorHandler.handle(error, '页面加载')
}
}
})项目使用统一的设计系统：
/* 主要颜色 */
--primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
--glass-bg: rgba(255, 255, 255, 0.15);
--glass-border: rgba(255, 255, 255, 0.2);
/* 常用效果 */
.glass-effect {
background: var(--glass-bg);
backdrop-filter: blur(20px);
border: 1px solid var(--glass-border);
border-radius: 30rpx;
}const CONFIG = {
// API配置
WEATHER_API: {
BASE_URL: 'https://api.weatherapi.com/v1',
KEY: 'your_api_key_here', // ⚠️ 替换为你的API密钥
TIMEOUT: 10000, // 请求超时时间
RETRY_COUNT: 3 // 重试次数
},
// 缓存配置
CACHE: {
WEATHER_TTL: 5 * 60 * 1000, // 天气缓存5分钟
HOURLY_TTL: 30 * 60 * 1000, // 预报缓存30分钟
CITY_TTL: 24 * 60 * 60 * 1000, // 城市缓存24小时
MAX_SIZE: 50 // 最大缓存条目
},
// 功能开关
FEATURES: {
WEATHER_SOUND: true, // 天气音效
WEATHER_ANIMATION: true, // 天气动画
AUTO_LOCATION: true, // 自动定位
BACKGROUND_REFRESH: true // 后台刷新
}
}用户可以通过设置页面自定义以下选项：
- 🌡️ 温度单位 - 摄氏度/华氏度
- 🔊 音效开关 - 开启/关闭天气音效
- 🎬 动画效果 - 开启/关闭天气动画
- 📍 自动定位 - 开启/关闭自动获取位置
- 🎨 主题模式 - 自动/浅色/深色
项目使用 WeatherAPI.com 提供的天气数据服务。
主要接口：
GET /current.json- 获取当前天气GET /forecast.json- 获取天气预报GET /search.json- 搜索城市GET /history.json- 获取历史天气
请求示例：
// 获取北京当前天气
GET https://api.weatherapi.com/v1/current.json?key=YOUR_KEY&q=北京&lang=zh
// 获取24小时预报
GET https://api.weatherapi.com/v1/forecast.json?key=YOUR_KEY&q=北京&lang=zh&hours=24响应格式：
{
"location": {
"name": "北京",
"region": "北京",
"country": "中国"
},
"current": {
"temp_c": 25,
"condition": {
"text": "晴"
},
"humidity": 65,
"wind_kph": 10
}
}| 用途 | 颜色值 | 说明 |
|---|---|---|
| 主背景 | linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%) |
渐变背景 |
| 玻璃效果 | rgba(255, 255, 255, 0.15) |
半透明白色 |
| 边框 | rgba(255, 255, 255, 0.2) |
淡白色边框 |
| 文字主色 | #ffffff |
纯白色 |
| 文字副色 | rgba(255, 255, 255, 0.7) |
半透明白色 |
| 类型 | 大小 | 粗细 | 用途 |
|---|---|---|---|
| 超大标题 | 180rpx | 200 | 主温度显示 |
| 大标题 | 42rpx | 700 | 页面标题 |
| 中标题 | 32rpx | 600 | 模块标题 |
| 正文 | 28rpx | 500 | 正文内容 |
| 小字 | 24rpx | 400 | 辅助信息 |
- 页面边距: 30rpx
- 卡片间距: 40rpx
- 元素间距: 20rpx
- 文字间距: 10rpx
- 按钮内边距: 25rpx 50rpx
- 大卡片: 40rpx
- 中卡片: 30rpx
- 小卡片: 25rpx
- 按钮: 30rpx
- 圆形按钮: 50%
-
基础功能
- 应用启动正常
- 主页面加载完整
- 定位功能正常
- 手动城市选择
-
天气数据
- 当前天气显示正确
- 24小时预报数据准确
- 温度单位切换正常
- 数据缓存机制
-
用户交互
- 页面跳转流畅
- 按钮点击响应
- 滚动操作正常
- 错误提示友好
-
性能测试
- 冷启动时间 < 3秒
- 页面切换流畅
- 内存使用合理
- 网络请求优化
-
✅ iOS
- iPhone 6s+ 及以上
- iOS 10.0+
- 微信 7.0+
-
✅ Android
- Android 5.0+
- 微信 7.0+
- 支持主流厂商ROM
- ✨ 初始版本发布
- 🌡️ 实时天气功能
- 📊 24小时预报
- 🏙️ 城市搜索选择
- 🎨 天气动画效果
- ⚙️ 个性化设置
- 🧪 Beta版本测试
- 🐛 修复已知问题
- 🎨 UI细节优化
- 🛠️ 核心功能开发
- 📱 基础页面实现
本项目基于 MIT License 开源协议。
MIT License
Copyright (c) 2024 WeatherMini
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
我们欢迎所有形式的贡献！
- Fork 项目
- 创建特性分支 (
git checkout -b feature/AmazingFeature) - 提交更改 (
git commit -m 'Add some AmazingFeature') - 推送到分支 (
git push origin feature/AmazingFeature) - 开启 Pull Request
- 🐛 Bug修复 - 提交Issue描述问题
- ✨ 新功能 - 讨论功能需求后开发
- 📝 文档完善 - 改进文档和注释
- 🎨 UI优化 - 提升用户体验
- ⚡ 性能优化 - 提高应用性能
- 使用ES6+语法
- 遵循项目现有代码风格
- 添加必要的注释
- 确保功能测试通过
- Issues - GitHub Issues
- Discussions - GitHub Discussions
- 邮箱 - feedback@youycg.site
感谢以下开源项目和服务：
- WeatherAPI.com - 天气数据服务
- 微信小程序 - 开发平台
- 所有贡献者和使用者的支持
如果这个项目对你有帮助，请给个 ⭐ Star 支持一下！
Made with ❤️ by WeatherMini Team