Tauri 进阶使用与实践指南

news/2024/9/17 15:54:34

Tauri 进阶使用与实践指南

调试技术

在 Tauri 应用开发中，调试分为两大部分：Web 端与 Rust 控制台。

Web 端调试

在 Web 端界面，可以直接采用浏览器内置的开发者工具进行调试。在 Windows 上，可以通过快捷键 Ctrl + Shift + i 打开调试器；而在 macOS 上，则是通过 Command + Option + i 快捷键启动。

Rust 控制台调试

Rust 代码中的调试主要依靠 println! 宏来进行输出，例如：

println!("Message from Rust: {}", msg);

当遇到 Tauri 应用崩溃时，开启 Rust 调试堆栈跟踪有助于定位问题。在 Linux 和 macOS 上，执行如下命令启用堆栈跟踪：

RUST_BACKTRACE=1 tauri dev

而对于 Windows 用户，应在命令行中先设置环境变量再运行 Tauri：

set RUST_BACKTRACE=1
tauri dev

Tauri 与 Web 端的通信机制

Rust 端

在 /src-tauri/src/main.rs 文件中定义 Rust 端逻辑。通过 #[tauri::command] 注解声明一个可被 Web 端调用的函数：

// 创建一个名为 my_custom_command 的方法，接受字符串参数并返回一个字符串
#[tauri::command]
fn my_custom_command(_str: String) -> String {
    let _res_str = format!("接受参数为: {}", _str);
    _res_str
}

fn main() {
    tauri::Builder::default()
        .invoke_handler(tauri::generate_handler![greet, my_custom_command]) // 多个命令以逗号分隔
        .run(tauri::generate_context!())
        .expect("运行 Tauri 应用时出错");
}

Web 端

在前端 JavaScript 或 TypeScript 中，通过 @tauri-apps/api 导入 invoke 函数以调用 Rust 端定义的命令：

import { invoke } from "@tauri-apps/api/tauri";

const clickEvent = async () => {
  let str = 'web字符串';
  let res = await invoke("my_custom_command", { str });
  console.log(res, "===str===");
};

窗口菜单定制

创建和添加菜单

在 /src-tauri/src/main.rs 中，Tauri 提供了丰富的 API 来创建和管理本机窗口菜单。

首先导入所需类型：

use tauri::{CustomMenuItem, Menu, MenuItem, Submenu};

接下来实例化菜单项和子菜单：

let quit = CustomMenuItem::new("caidan11".to_string(), "菜单1-1");
let close = CustomMenuItem::new("caidan12".to_string(), "菜单1-2");
let submenu = Submenu::new("菜单1", Menu::new().add_item(quit).add_item(close));

let menu = Menu::new()
    .add_native_item(MenuItem::Copy) // 添加本机菜单项（如复制）
    .add_item(CustomMenuItem::new("caidan2", "菜单2")) // 添加自定义菜单项
    .add_submenu(submenu); // 添加带有子菜单的条目

然后，在 main 函数中将菜单添加至全局，并监听菜单点击事件：

fn main() {
    // ... 菜单项初始化 ...

    tauri::Builder::default()
        .menu(menu) // 将菜单添加至所有窗口
        .on_menu_event(|event| {
            match event.menu_item_id() {
                "caidan2" => println!("event caidan2"),
                "caidan11" => println!("event caidan11"),
                "caidan12" => println!("event caidan12"),
                _ => {}
            }
        })
        // ... 其他配置 ...
}

Tauri 2.0 展望

随着 Tauri 框架的持续演进，未来的 Tauri 2.0 版本预计将带来更多强大的功能和更完善的开发者体验。通过上述进阶示例，我们已经展示了如何进行跨语言通信、调试和自定义窗口菜单。期待 Tauri 2.0 在保持轻量化的同时，进一步提高性能，增加跨平台一致性，并强化与现代 Web 技术的融合，为桌面应用开发带来更多的可能性和便利性。