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

字玩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/

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");
}

2. 菜单事件处理
   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方法将给前端发起消息，前端监听消息后进行逻辑处理。

3. 前端监听代码

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

4. 最终效果：