Tauri 是一个开源框架,用于构建桌面应用程序,它将 Web 前端与 Rust 后端相结合。开发者可以用熟悉的 Web 技术(HTML, CSS 和 JavaScript)构建应用界面,Tauri 则负责与操作系统进行交互,提供系统级 API 调用能力。
相比 Electron 等解决方案,Tauri 应用更小、更快、更安全。它使用 Rust 编写,可以将 WebAssembly 与原生 Rust 代码融合,充分利用 Rust 的性能和安全优势。此外,Tauri 应用只包含使用的 Web 技术(DOM 和 JavaScript 运行时),不像 Electron 包含整个 Chromium,所以 Tauri 应用的大小可以减小 80%以上。
主要功能
- 桌面集成:文件浏览,剪切板,触摸板手势等
- 系统 API 访问:窗口管理,托盘,通知等
- 渐进式 Web 应用支持:使用 Web 技术构建界面,与桌面环境深度集成
- 更小尺寸:只包含所需的 Web 技术,不像 Electron 包含完整的 Chromium
- 更快速度:使用 Rust 编写,可以调用 WebAssembly 和原生代码
- 更高安全性:Rust 可以避免许多常见安全漏洞
- 跨平台:支持 Windows, macOS 和 Linux
- 热重载:保存代码后即时更新界面
下面我们来看如何将 Tauri 集成到 React 项目中。
1. 安装 Tauri CLI
使用 npm 或 yarn 安装 Tauri CLI:
npm install -g @tauri-apps/cli
或
yarn global add @tauri-apps/cli
2. 初始化 Tauri 项目
在 React 项目的根目录运行:
tauri init
这会生成 Tauri 需要的文件,如 tauri.conf.json 配置文件和 src-tauri 目录。
它会向您询问几个问题：
-
您应用的名字是什么？ 这将会是您打包后和操作系统会调用的应用名称。 您可以在此处填写任何您想要的名称。
-
窗口标题叫什么？ 这将会是您主窗口的默认标题。 您可以在此处填写任何您想要的名称。
-
前端页面资源 (HTML/CSS/JS) 相对于
<current dir>/src-tauri/tauri.conf.json文件将被创建的位置？默认都是../dist
-
开发环境时的加载路径?
开发环境的加载路径 如 vite 启动的 http://localhost:3000
-
你将使用什么命令来开发前端页面？
这是启动前端开发服务器的命令。如
npm run dev -
你将使用什么命令来构建前端页面？ 这是构建前端文件的命令。如
npm run build
3. 开发浏览器内部和 Tauri 原生逻辑
你可以在 src-tauri/src/main.rs 编写 Rust 代码来处理 Tauri 原生调用。在 src/index.js 中你可以调用 tauri.* 方法来访问这些 Rust API。
例如在 src-tauri/src/main.rs 中:
fn show_dialog(window: Window, event: Event) {
dialog::message(window.into(), "Hello from Tauri!");
event.reply("Hello from Rust!");
}
在 React app 的 src/index.js 中:
tauri.invoke("show_dialog");
这会在 Tauri 中打开一个消息框,并返回一个字符串到 React。
4. 编译和运行
运行 yarn tauri dev 来启动浏览器和 Tauri 的双重开发环境。这会启动应用的浏览器版本和 Tauri 的本地版本。当你进行更改并保存时,两者都会重新加载。
运行 yarn tauri build 来构建生产版本。这会构建你的 React app 并将其捆绑在 Tauri 中,创建一个单独的二进制文件。
要分发你的 Tauri app,只需将生成的文件夹发布给最终用户。 Tauri 不需要安装运行时或其他依赖项,它包含在应用程序本身中。
总结
将 Tauri 集成到已有 Web 项目中只需要几个简单步骤。Tauri 提供了一种在不损失 Web 开发体验的前提下,将 Web 应用“原生化”的简单方法。 相比 Electron 等解决方案,Tauri 可以生成更小、更快、更安全的桌面应用,是 Web 开发者构建跨平台桌面应用的最佳选择。 Tauri 无疑是一个非常有前景的框架,值得 Web 开发者投入时间学习和使用。如果你想让你的 Web app 在更广泛的环境下运行,Tauri 是一个简单直接的解决方案。
