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

相关推荐
qq_390161779 分钟前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test38 分钟前
js下载excel示例demo
前端·javascript·excel
Yaml41 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事1 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶1 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo1 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v1 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
知孤云出岫1 小时前
web 渗透学习指南——初学者防入狱篇
前端·网络安全·渗透·web
贩卖纯净水.1 小时前
Chrome调试工具(查看CSS属性)
前端·chrome
栈老师不回家2 小时前
Vue 计算属性和监听器
前端·javascript·vue.js