基于Tauri的桌面天气应用开发实践

1. 为什么需要桌面版天气应用？

现代人获取天气信息的方式主要有三种：手机天气App、网页搜索和智能音箱。但每种方式都存在明显痛点——手机需要解锁并打开应用，网页需要手动输入查询，智能音箱则依赖语音交互的准确性。桌面端天气应用填补了这些使用场景的空白，特别是对于需要持续关注天气变化的群体：

• 股票/期货交易员：天气对农产品、能源价格有直接影响
• 户外工作者：快递员、建筑工人需要实时掌握降水概率
• 旅行规划者：查看多城市天气对比更方便
• 极客用户：希望自定义数据显示方式和预警规则

我去年为摄影团队开发过专用天气插件，他们最在意的不是温度数字，而是黄金时刻的光线角度和云层厚度。这让我意识到通用天气应用无法满足专业需求，而桌面端应用正好能通过常驻状态栏、自定义面板等方式解决这个问题。

2. 技术选型与架构设计

2.1 跨平台框架对比

Electron和Tauri是当前主流的桌面应用开发方案。经过实测对比：

最终选择Tauri，因其Rust后端带来的性能优势对需要持续后台运行的天气应用尤为重要。实测在树莓派4B上，Electron应用内存占用导致系统卡顿，而Tauri版本流畅运行。

2.2 数据源对接方案

免费天气API中，Open-Meteo的表现最稳定：

javascript复制// 获取小时级预报示例
async function fetchWeather(lat, lon) {
  const response = await fetch(
    `https://api.open-meteo.com/v1/forecast?latitude=${lat}&longitude=${lon}&hourly=temperature_2m,precipitation_probability,weathercode`
  );
  const data = await response.json();
  return data.hourly;
}

需要注意的坑：

1. 免费版限频300次/天，商用需购买
2. weathercode需要对照WMO代码表转换
3. 经纬度建议用navigator.geolocation获取，但要处理用户拒绝授权的情况

2.3 状态栏图标实现

Tauri的system-tray模块可以创建多功能状态栏图标：

rust复制// src-tauri/src/main.rs
use tauri::{Manager, SystemTray, SystemTrayEvent};

fn main() {
  let tray = SystemTray::new();
  tauri::Builder::default()
    .system_tray(tray)
    .on_system_tray_event(|app, event| match event {
      SystemTrayEvent::LeftClick { .. } => {
        let window = app.get_window("main").unwrap();
        window.show().unwrap();
      }
      _ => {}
    })
    .run(tauri::generate_context!())
    .expect("error while running tauri application");
}

3. 核心功能实现细节

3.1 天气数据可视化

使用Canvas API绘制温度曲线图时，要注意：

javascript复制// 坐标转换函数示例
function mapValue(value, inMin, inMax, outMin, outMax) {
  return ((value - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin;
}

// 绘制温度曲线
ctx.beginPath();
hourlyData.forEach((hour, i) => {
  const x = mapValue(i, 0, 23, padding, canvas.width - padding);
  const y = mapValue(hour.temp, minTemp, maxTemp, canvas.height - padding, padding);
  i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
});
ctx.stroke();

关键技巧：添加鼠标悬停交互时，建议使用离屏Canvas缓存静态元素，只重绘动态部分提升性能

3.2 多城市管理

采用IndexedDB存储城市配置比localStorage更可靠：

javascript复制const dbPromise = idb.open('weatherDB', 1, upgradeDB => {
  if (!upgradeDB.objectStoreNames.contains('cities')) {
    upgradeDB.createObjectStore('cities', { keyPath: 'id' });
  }
});

async function addCity(city) {
  const db = await dbPromise;
  const tx = db.transaction('cities', 'readwrite');
  await tx.store.put({
    id: Date.now(),
    ...city
  });
  await tx.done;
}

3.3 预警通知系统

利用Tauri的notification API和Rust后端定时检查：

rust复制// 每30分钟检查一次预警条件
#[tauri::command]
async fn check_alerts(cities: Vec<City>) -> Vec<Alert> {
  let mut alerts = Vec::new();
  for city in cities {
    let weather = fetch_weather(city.lat, city.lon).await;
    if weather.precipitation_probability > city.alert_threshold {
      alerts.push(Alert {
        city_id: city.id,
        message: format!("{}将有强降雨", city.name)
      });
    }
  }
  alerts
}

4. 性能优化实战经验

4.1 数据缓存策略

采用三级缓存架构：

1. 内存缓存：最近查询的3个城市数据，有效期15分钟
2. IndexedDB缓存：用户收藏城市数据，有效期1小时
3. 网络请求：超过缓存时间或强制刷新时触发

javascript复制class WeatherCache {
  constructor() {
    this.memoryCache = new Map();
    this.refreshInterval = 15 * 60 * 1000; // 15分钟
  }

  async getWeather(location) {
    const cached = this.memoryCache.get(location.id);
    if (cached && Date.now() - cached.timestamp < this.refreshInterval) {
      return cached.data;
    }
    // ...其他缓存检查逻辑
  }
}

4.2 渲染性能提升

针对气象雷达图的优化方案：

1. 使用WebWorker处理数据解析
2. 对Canvas采用双缓冲技术
3. 动态降低非活跃标签页的更新频率

javascript复制// 主线程
const radarWorker = new Worker('radar-processor.js');
radarWorker.onmessage = (e) => {
  drawRadar(e.data); // 使用预处理好的数据
};

// worker线程
self.onmessage = (e) => {
  const processed = heavyProcessing(e.data);
  self.postMessage(processed);
};

4.3 安装包瘦身

通过以下措施将Tauri应用控制在8MB以内：

1. 使用UPX压缩可执行文件
2. 移除Rust调试符号
3. 优化前端依赖：
   • 用day.js代替moment.js
   • 自实现简单图表库替代ECharts

在tauri.conf.json中添加：

json复制"bundle": {
  "targets": "upx",
  "upx": {
    "enabled": true,
    "level": 9
  }
}

5. 实际开发中的典型问题

5.1 时区处理陷阱

天气API返回的UTC时间需要转换为本地时区：

javascript复制// 错误做法：直接使用new Date()
const date = new Date(apiTimestamp); // 会忽略时区偏移

// 正确做法：
function formatLocalTime(utcTimestamp, timezone) {
  return new Date(
    new Date(utcTimestamp).toLocaleString('en-US', { timeZone: timezone })
  );
}

踩坑记录：某用户反馈温度曲线时间轴错乱，最终发现是其电脑时区设置为UTC+8但系统语言为en-US导致的解析冲突

5.2 高分屏适配

Tauri应用中需同时配置：

1. 前端CSS使用rem单位
2. 后端设置缩放因子
3. 图标准备2x/3x版本

rust复制// 启用DPI感知
window_builder = window_builder.with_decorations(true).with_transparent(true);
if let Ok(scale_factor) = window.scale_factor() {
    window_builder = window_builder.with_scale_factor(scale_factor);
}

5.3 用户权限管理

地理位置权限需要分级处理：

1. 首次启动：询问"是否允许自动定位"
2. 拒绝后：显示城市搜索框
3. 设置中保留手动开启选项

javascript复制const getLocation = async () => {
  try {
    const pos = await new Promise((resolve, reject) => {
      navigator.geolocation.getCurrentPosition(resolve, reject);
    });
    return [pos.coords.latitude, pos.coords.longitude];
  } catch (err) {
    console.warn('定位失败:', err);
    return fallbackCoords; // 默认显示北京坐标
  }
};

开发过程中发现，Windows系统下打包后的应用需要额外申请location权限才能在用户拒绝浏览器权限后继续使用系统级定位API，这需要在tauri.conf.json中显式声明：

json复制"windows": {
  "webviewInstallMode": {
    "type": "downloadBootstrapper"
  },
  "permissions": ["location"]
}