tauri：关闭窗口后最小化到托盘

上一篇博客记录了一个最简单的tauri+vue3+vite案例，这篇博客来实现关闭窗口后最小化到托盘的功能，注意我这里使用的是tauri2.0，与tauri1.0的托盘实现区别很大。

1、创建托盘

在Cargo.toml文件的tauri配置里添加tray-icon.

在src-tauri的src下创建tray.rs文件，代码如下：

注意：

use tauri::{

menu::{Menu, MenuItem}, tray::TrayIconBuilder, AppHandle, Manager, Runtime

};这里面的Manager看似没用到，其实在app.get_webview_window的时候会用到，不能删除。

rust 复制代码

use tauri::{
    menu::{Menu, MenuItem}, tray::TrayIconBuilder, AppHandle, Manager, Runtime
};

pub fn create_tray<R: Runtime>(app: &AppHandle<R>) -> tauri::Result<()> {
    let toggle_visibility = MenuItem::with_id(app, "toggle", "显示/隐藏窗口", true, None::<&str>)?;
    let quit = MenuItem::with_id(app, "quit", "退出", true, None::<&str>)?;
    
    let menu = Menu::with_items(app, &[&toggle_visibility, &quit])?;
    
    let _tray = TrayIconBuilder::new()
        .icon(app.default_window_icon().unwrap().clone())
        .tooltip("tauri-vite-vue3")
        .menu(&menu)
        .on_menu_event(move |app, event| match event.id.as_ref() {
            "toggle" => {
                if let Some(window) = app.get_webview_window("main") {
                    if window.is_visible().unwrap() {
                        let _ = window.hide();
                    } else {
                        let _ = window.show();
                        let _ = window.set_focus();
                    }
                }
            }
            "quit" => {
                app.exit(0);
            }
            _ => {}
        })
        .build(app)?;

    Ok(())
}

右键托盘，有两个菜单：显示/隐藏窗口，退出。

tooltip是鼠标移到托盘上显示的内容。

2、引入托盘

在main.rs里引入tray.rs，并且创建托盘：

rust 复制代码

// Prevents additional console window on Windows in release, DO NOT REMOVE!!
#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]

mod tray;

#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
    tauri::Builder::default()
        .setup(|app| {
            // 创建系统托盘
            tray::create_tray(app.handle())?;
            Ok(())
        })
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

fn main() {
    run();
}

3、监听窗口关闭事件

在App.vue里监听窗口关闭行为，并且emit给tauri来处理。

javascript 复制代码

<script setup>
import { getCurrentWindow } from '@tauri-apps/api/window';
import { emit } from '@tauri-apps/api/event';
import { onMounted } from "vue";


const appWindow = getCurrentWindow();


// 在组件挂载时添加事件监听
onMounted(() => {
  // 监听窗口关闭请求
  appWindow.onCloseRequested(async (event) => {
    // 阻止默认的关闭行为
    event.preventDefault();
    // 发送事件到后端处理
    await emit('close_requested');
  });

});

4、处理窗口关闭事件

由于后续我还要添加其他窗口处理，所以另外创建一个window_manager.rs，代码统一写在这里：

这里写了两个方法：窗口最大化；处理close_requested事件，隐藏窗口。

rust 复制代码

// src/window_manager.rs
use tauri::{AppHandle, Listener, Manager, Runtime};


/// 设置窗口关闭事件监听器
pub fn setup_close_listener<R: Runtime>(app: &AppHandle<R>) {
    let app_handle = app.clone();
    app.listen_any("close_requested", move |_event| {
        if let Some(window) = app_handle.get_webview_window("main") {
            let _ = window.hide();
        }
    });
}



/// 设置所有窗口相关功能
pub fn setup_window_features<R: Runtime>(app: &AppHandle<R>) {
    setup_close_listener(app);
}

5、引入窗口处理

跟步骤2创建托盘类似，也要在main.rs里引入window_manager。

一个简单的托盘案例就做好了。