Electron 开发者的 Tauri 2.0 实战指南：窗口管理与系统集成

最新推荐文章于 2025-04-30 15:14:34 发布

原创

最新推荐文章于 2025-04-30 15:14:34 发布 · 1.9k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#人工智能 #前端 #React

作为 Electron 开发者，我们已经习惯了使用 BrowserWindow 来管理窗口，以及通过各种内置模块来实现系统集成。在 Tauri 2.0 中，这些功能虽然概念类似，但实现方式有所不同。本文将帮助你快速掌握 Tauri 的窗口管理和系统集成功能。

窗口管理

基础窗口操作

Electron 方式

// main.js
const { BrowserWindow } = require('electron')

// 创建窗口
const win = new BrowserWindow({
  width: 800,
  height: 600,
  frame: true,
  transparent: false,
  webPreferences: {
    nodeIntegration: true,
    contextIsolation: false
  }
})

// 加载内容
win.loadFile('index.html')
// 或加载 URL
win.loadURL('https://example.com')

// 窗口事件监听
win.on('closed', () => {
  // 窗口关闭时的处理
})

Tauri 方式

// main.rs
use tauri::{Window, WindowBuilder, WindowUrl};

// 创建窗口
#[tauri::command]
async fn create_window(app_handle: tauri::AppHandle) -> Result<(), String> {
    WindowBuilder::new(
        &app_handle,
        "main",
        WindowUrl::App("index.html".into())
    )
    .title("My App")
    .inner_size(800.0, 600.0)
    .resizable(true)
    .decorations(true)
    .transparent(false)
    .build()
    .map_err(|e| e.to_string())?;

    Ok(())
}

// 前端调用

// App.tsx
import { WebviewWindow } from '@tauri-apps/api/window'

// 创建新窗口
const createWindow = async () => {
  const webview = new WebviewWindow('main', {
    url: 'index.html',
    width: 800,
    height: 600
  })

  // 窗口事件监听
  webview.once('tauri://created', () => {
    // 窗口创建完成
  })

  webview.once('tauri://error', (e) => {
    // 窗口创建错误
  })
}

多窗口管理

Electron 方式

// main.js
const windows = new Map()

function createWindow(name) {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })

  windows.set(name, win)

  win.on('closed', () => {
    windows.delete(name)
  })

  return win
}

// 获取窗口
function getWindow(name) {
  return windows.get(name)
}

Tauri 方式

// main.rs
#[tauri::command]
async fn manage_windows(
    app_handle: tauri::AppHandle,
    window_label: String,
    action: String
) -> Result<(), String> {
    match action.as_str() {
        "create" => {
            WindowBuilder::new(&app_handle, window_label, WindowUrl::App("index.html".into()))
                .build()
                .map_err(|e| e.to_string())?;
        }
        "close" => {
            if let Some(window) = app_handle.get_window(&window_label) {
                window.close().map_err(|e| e.to_string())?;
            }
        }
        _ => return Err("Unknown action".into())
    }

    Ok(())
}