字玩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']()});
}
- 最终效果：
