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