Tauri 进阶使用与实践指南

Tauri 进阶使用与实践指南

调试技术

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

Web 端调试

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

Rust 控制台调试

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

rust 复制代码
println!("Message from Rust: {}", msg);

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

bash 复制代码
RUST_BACKTRACE=1 tauri dev

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

cmd 复制代码
set RUST_BACKTRACE=1
tauri dev

Tauri 与 Web 端的通信机制

Rust 端

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

rust 复制代码
// 创建一个名为 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 端定义的命令:

typescript 复制代码
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 来创建和管理本机窗口菜单。

首先导入所需类型:

rust 复制代码
use tauri::{CustomMenuItem, Menu, MenuItem, Submenu};

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

rust 复制代码
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 函数中将菜单添加至全局,并监听菜单点击事件:

rust 复制代码
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 技术的融合,为桌面应用开发带来更多的可能性和便利性。

相关推荐
吃杠碰小鸡26 分钟前
commitlint校验git提交信息
前端
虾球xz1 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇1 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒1 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员1 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐1 小时前
前端图像处理(一)
前端
程序猿阿伟2 小时前
《智能指针频繁创建销毁:程序性能的“隐形杀手”》
java·开发语言·前端
疯狂的沙粒2 小时前
对 TypeScript 中函数如何更好的理解及使用?与 JavaScript 函数有哪些区别?
前端·javascript·typescript
瑞雨溪2 小时前
AJAX的基本使用
前端·javascript·ajax
力透键背2 小时前
display: none和visibility: hidden的区别
开发语言·前端·javascript