Tauri使用结合Web前端构建更小、更快、更安全的桌面应用

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目录。

它会向您询问几个问题：

1. 您应用的名字是什么？
   这将会是您打包后和操作系统会调用的应用名称。 您可以在此处填写任何您想要的名称。

2. 窗口标题叫什么？
   这将会是您主窗口的默认标题。 您可以在此处填写任何您想要的名称。

3. 前端页面资源 (HTML/CSS/JS) 相对于 <current dir>/src-tauri/tauri.conf.json 文件将被创建的位置？

   默认都是../dist

4. 开发环境时的加载路径?

   开发环境的加载路径 如vite启动的 http://localhost:3000

5. 你将使用什么命令来开发前端页面？

   这是启动前端开发服务器的命令。如npm run dev

6. 你将使用什么命令来构建前端页面？
   这是构建前端文件的命令。如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是一个简单直接的解决方案。

开源地址：tauri-apps/tauri: Build smaller, faster, and more secure desktop applications with a web frontend. (github.com)