当前位置：首页 > news >正文

字玩FontPlayer开发笔记6 Tauri2设置菜单

news 来源：原创 2025/5/9 19:43:03

字玩FontPlayer开发笔记6 Tauri2设置菜单

字玩FontPlayer是笔者开源的一款字体设计工具，使用Vue3 + ElementUI开发，源代码：
github: https://github.com/HiToysMaker/fontplayer
gitee: https://gitee.com/toysmaker/fontplayer

笔记

字玩目前是用Electron进行桌面端应用打包，但是性能体验不太好，一直想替换成Tauri。Tauri的功能和Electron类似，都可以把前端代码打包生成桌面端（比如Windows和Mac）应用。Tauri只使用系统提供的WebView，不像Electron一样内置Chromium和Node.js，性能体验更佳。

继昨天初步尝试Tauri后，今天学习了下Tauri的原生菜单设置，网上Tauri1的教程比较多，查了半天最后还是看官方文档的升级教程解决了问题。
官方教程升级链接：[https://v2.tauri.app/start/migrate/from-tauri-1/]https://v2.tauri.app/start/migrate/from-tauri-1/

添加菜单
src-tauri/lib.rs

use tauri::menu::{Menu, MenuItem, PredefinedMenuItem, Submenu, MenuItemBuilder};pub fn run() {tauri::Builder::default().setup(|app| {//...}).menu(|handle| Menu::with_items(handle, &[&Submenu::with_items(handle,"File",true,&[&MenuItemBuilder::with_id("about", "关于").build(handle).expect("Error")],)?,&Submenu::with_items(handle,"Test",true,&[&MenuItemBuilder::with_id("create-file", "新建").accelerator("Ctrl+Shift+T").build(handle).expect("Error")],)?,])).run(tauri::generate_context!()).expect("error while running tauri application");
}

菜单事件处理
src-tauri/lib.rs

use tauri::{AppHandle, Emitter};#[tauri::command]
fn test(app: AppHandle) {app.emit("create-file", ()).unwrap();
}pub fn run() {tauri::Builder::default().setup(|app| {//...app.on_menu_event(move |app, event| {if event.id() == "about" {println!("about");} else if event.id() == "create-file" {test(app.app_handle().clone())}});//...}).menu(//...).run(tauri::generate_context!()).expect("error while running tauri application");
}

注意到以上代码中定义了新建按钮的点击事件：

fn test(app: AppHandle) {app.emit("create-file", ()).unwrap();
}

这个事件中，app.emit方法将给前端发起消息，前端监听消息后进行逻辑处理。

前端监听代码

const initTauri = () => {listen('create-file', (event) => {handlers['create-file']()});
}

最终效果：

字玩FontPlayer开发笔记6 Tauri2设置菜单

笔记

相关文章：