在Tauri中点击菜单项时如何向前端发送事件？

要在菜单事件处理函数中向前端发送事件，核心是通过菜单事件对象获取应用句柄，再找到目标窗口调用emit方法，具体实现如下：

1. 修改Rust端菜单事件代码 #

在on_menu_event的闭包里，通过event.app_handle()获取AppHandle实例，再用它获取主窗口（默认标签为main，如果你的窗口标签自定义过，请替换成对应值），最后调用emit发送事件。

修改后的完整代码：

use tauri::{Builder, generate_context, Menu, MenuItem, Submenu};

// 可选：定义自定义事件载荷结构体，需实现序列化
#[derive(serde::Serialize)]
struct MenuActionPayload {
    action: String,
    tip: String,
}

fn build_menu() -> Menu {
    // 示例菜单结构，可根据你的实际需求调整
    let file_submenu = Submenu::new(
        "File",
        Menu::new()
            .add_item(MenuItem::new("New", "new"))
            .add_item(MenuItem::new("Save", "save"))
            .add_item(MenuItem::new("Open", "open"))
            .add_item(MenuItem::new("Export", "export")),
    );
    Menu::new().add_submenu(file_submenu)
}

fn main() {
    Builder::default()
        .menu(build_menu())
        .on_menu_event(|event| {
            // 获取应用句柄
            let app_handle = event.app_handle();
            // 获取主窗口（默认标签为"main"）
            if let Some(main_window) = app_handle.get_window("main") {
                match event.menu_item_id() {
                    "new" => {
                        println!("New fired");
                        // 发送带自定义载荷的事件
                        main_window.emit(
                            "menu-triggered",
                            MenuActionPayload {
                                action: "new".to_string(),
                                tip: "触发新建操作".to_string(),
                            }
                        ).unwrap();
                    }
                    "save" => {
                        println!("Save fired");
                        // 直接发送字符串载荷
                        main_window.emit("menu-triggered", "save").unwrap();
                    }
                    "open" => {
                        println!("Open fired");
                        main_window.emit("menu-triggered", "open").unwrap();
                    }
                    "export" => {
                        println!("Export fired");
                        main_window.emit("menu-triggered", "export").unwrap();
                    }
                    _ => {}
                }
            }
        })
        .run(generate_context!())
        .expect("error while running tauri application");
}

2. 前端接收事件 #

在前端（JS/TS）中，使用Tauri的事件API监听发送的事件：

// 监听菜单触发事件
window.__TAURI__.event.listen("menu-triggered", (event) => {
    console.log("收到菜单事件:", event.payload);
    // 根据载荷执行对应前端逻辑
    if (event.payload?.action === "new") {
        // 处理新建操作的前端逻辑
        alert("新建按钮已点击");
    }
});

关键注意点 #

• 窗口标签：get_window的参数要和你在tauri.conf.json或窗口创建时指定的标签一致，默认值是main。
• 错误处理：示例中用unwrap()快速处理错误，生产环境建议用match或if let捕获异常，避免程序崩溃。
• 序列化：如果发送自定义结构体作为载荷，必须给结构体添加#[derive(serde::Serialize)]注解，确保能序列化为JSON格式。

内容的提问来源于stack exchange，提问作者HeyItDoodler