1. 项目概述与核心价值
去年夏天帮朋友搬家时遇到突发暴雨，让我意识到实时天气信息对日常生活决策的重要性。市面上虽然有不少天气应用，但要么功能臃肿，要么广告太多，于是决定自己开发一个轻量级的桌面天气工具。这个用Electron构建的应用不仅实现了分钟级天气更新，还创新性地加入了穿衣建议和紫外线预警功能，安装包仅12MB，CPU占用长期保持在1%以下。
2. 技术选型与架构设计
2.1 跨平台方案对比
最初在Qt和Electron之间犹豫不决。实测发现：
- Qt需要处理不同系统的UI适配，开发效率较低
- Electron虽然内存占用稍大，但维护成本更低 最终选择Electron 21 + Vite的组合，启动时间比webpack方案快40%
2.2 数据源对接方案
对比了多家天气API后选择心知天气，因其：
- 提供未来24小时逐分钟预报
- 免费版支持5000次/天调用
- 数据更新频率达5分钟/次 关键代码示例：
const fetchWeather = async (location) => { const apiKey = 'your_api_key'; const url = `https://api.seniverse.com/v3/weather/now.json?key=${apiKey}&location=${location}`; try { const response = await fetch(url); return await response.json(); } catch (error) { console.error('API请求失败:', error); return null; } };3. 核心功能实现细节
3.1 实时天气卡片组件
采用Canvas绘制动态天气图标：
- 晴天有缓慢移动的云朵动画
- 雨雪天气有粒子效果
- 温度计采用SVG实现汞柱升降
重要提示：粒子效果需使用requestAnimationFrame做节流，否则会导致GPU占用过高
3.2 本地化存储方案
使用electron-store保存用户配置：
const Store = require('electron-store'); const schema = { city: { type: 'string', default: '北京' }, unit: { type: 'string', default: 'C', enum: ['C', 'F'] } }; const store = new Store({schema});4. 性能优化实战
4.1 内存管理技巧
通过以下手段将内存占用控制在80MB以内：
- 天气图标使用雪碧图而非单独图片
- 禁用非必要Electron模块（如spellchecker）
- 设置webPreferences:
webPreferences: { nodeIntegration: true, contextIsolation: false, sandbox: false, webgl: false }4.2 网络请求优化
实现三级缓存策略：
- 内存缓存：5分钟有效期
- localStorage：1小时备份
- 指数退避重试机制
5. 打包与分发方案
5.1 多平台构建配置
使用electron-builder配置：
"build": { "appId": "com.example.weather", "win": { "target": "nsis", "icon": "build/icon.ico" }, "mac": { "target": "dmg", "category": "public.app-category.weather" } }5.2 自动更新实现
基于electron-updater的方案：
autoUpdater.checkForUpdatesAndNotify({ title: '天气应用更新', body: '版本 {version} 已准备好安装' });6. 特色功能开发
6.1 智能穿衣建议
结合温度、湿度和风力计算体感温度：
function calculateFeelsLike(temp, humidity, wind) { // 体感温度计算公式 return temp - (wind * 0.7) + (humidity * 0.05); }6.2 紫外线预警系统
根据WHO标准分级提示：
| UV指数 | 危险等级 | 建议措施 |
|---|---|---|
| 0-2 | 低 | 无需防护 |
| 3-5 | 中等 | 建议防晒 |
| 6-7 | 高 | 必须防护 |
7. 实际踩坑记录
- 时区问题：发现API返回的是UTC时间，需用moment-timezone转换
- DPI适配：在高分屏上图标模糊，需添加：
<meta name="viewport" content="width=device-width, initial-scale=1.0" />- 杀毒软件误报：代码签名证书可减少70%的误报率
8. 扩展功能思路
- 集成日历提醒：在暴雨天气前自动提醒带伞
- 增加空气质量地图
- 开发浏览器插件版
- 添加农作物种植建议（针对农村用户）
这个项目最让我意外的是用户对"穿衣建议"功能的好评率高达92%。很多上班族表示早上看一眼就知道该穿什么外套，这比单纯的温度数字实用得多。如果重做一次，我会更早加入天气预警推送功能，这在突发气象灾害时能真正帮到用户。
