Tauri 框架:下一代跨平台桌面应用开发的选择?简介与入门指南
在现代软件开发领域,构建美观、高性能且能运行在多种操作系统上的桌面应用程序一直是开发者追求的目标。长期以来,Electron 框架凭借其成熟的生态和“一次编写,到处运行”的特性,成为了许多基于 Web 技术构建桌面应用的团队的首选。然而,随着用户对应用性能、资源占用以及安全性要求的不断提升,开发者们开始寻找更优的解决方案。正是在这样的背景下,Tauri 框架应运而生,并迅速获得了社区的广泛关注。
本文将深入探讨 Tauri 框架是什么,它为何与众不同,以及如何一步步开始使用 Tauri 构建你的第一个跨平台桌面应用程序。
一、 Tauri 框架简介:用 Web 技术构建安全、轻量、快速的桌面应用
什么是 Tauri?
Tauri 是一个使用 Web 前端技术(如 HTML、CSS、JavaScript、TypeScript 以及各种前端框架如 React、Vue、Angular、Svelte 等)结合 Rust 后端来构建跨平台桌面应用程序的框架。它的核心理念是利用操作系统的原生 WebView(例如 Windows 上的 WebView2、macOS 上的 WkWebView、Linux 上的 WebKitGTK)来渲染用户界面,而将应用的核心逻辑、需要访问操作系统 API 的部分以及性能敏感的任务交由强大的 Rust 后端处理。
简单来说,Tauri 允许你使用你熟悉的 Web 开发技能来构建用户界面,同时利用 Rust 的高性能和安全性来处理底层任务和与操作系统交互。
Tauri 的核心特点:
- 性能与轻量化 (Performance & Lightweight): 这是 Tauri 相对于 Electron 的最大优势之一。Tauri 不像 Electron 那样捆绑一个完整的 Chromium 浏览器运行时,而是依赖于操作系统内置或已有的 WebView。这极大地减小了最终应用的打包体积和运行时内存占用。应用启动速度更快,资源消耗更低。
- 安全性 (Security): Tauri 将安全性放在了首位。它默认遵循最小权限原则,提供了严格的安全沙箱环境。通过一个名为 “Allowlist” 的机制,开发者需要显式地允许前端访问特定的后端 API。Rust 语言本身的内存安全特性也从底层提高了应用的安全性。Tauri 提供了一个详细的安全指南和检查清单,帮助开发者构建更安全的应用。
- 多平台支持 (Multi-platform): Tauri 支持构建运行在 Windows (x86_64, aarch64)、macOS (x86_64, aarch64) 和 Linux (x86_64) 上的应用。它能够打包生成对应平台的原生安装包(如 Windows 的 MSI、macOS 的 .app 或 DMG、Linux 的 AppImage 或 Deb)。
- 前端技术无关性 (Frontend Agnostic): 你可以使用任何你喜欢的 Web 前端技术栈。Tauri 只负责提供一个 WebView 容器和与后端通信的桥梁,界面的构建完全由你的前端项目负责。这意味着你可以轻松地将现有的 Web 应用移植到桌面。
- Rust 后端 (Rust Backend): 选择 Rust 作为后端语言带来了诸多好处:
- 高性能: Rust 以其零成本抽象和优秀的性能著称,适合处理计算密集型任务。
- 内存安全: Rust 在编译时强制执行内存安全,避免了许多常见的运行时错误,如空指针解引用、数据竞争等。
- 原生能力: Rust 可以方便地调用 C/C++ 库,或者直接使用 Rust crates 访问底层的操作系统 API。
- 并发性: Rust 的所有权系统使得编写安全高效的并发代码成为可能。
- 生态系统 (Ecosystem): 虽然相对于 Electron 尚年轻,但 Tauri 的生态正在快速发展。它提供了官方插件机制,方便集成常见功能(如文件系统、网络、窗口控制等),社区也在积极贡献更多插件和工具。
二、 Tauri vs Electron:核心差异的比较
既然 Tauri 和 Electron 都是使用 Web 技术构建桌面应用,它们之间最本质的区别是什么?理解这些差异有助于你选择适合自己项目的框架。
特性 | Tauri | Electron |
---|---|---|
核心架构 | Native WebView + Rust 后端 | 捆绑的 Chromium + Node.js 后端 |
应用体积 | 小 (不包含完整的浏览器) | 大 (包含完整的 Chromium) |
内存占用 | 低 (利用系统 WebView) | 高 (运行独立的 Chromium 实例) |
性能 | 通常更接近原生应用性能 | 受限于 Node.js 和 Chromium 的性能开销 |
后端语言 | Rust | Node.js (JavaScript/TypeScript) |
安全性 | 设计优先考虑安全, 沙箱、Allowlist | 依赖 Chromium 的安全模型,需开发者额外加固 |
前端框架 | 任何 Web 框架 | 任何 Web 框架 |
原生能力 | 通过 Rust 访问操作系统 API | 通过 Node.js API 或 Native Modules 访问 |
生态成熟度 | 较新,快速成长 | 非常成熟,社区庞大 |
学习曲线 | 需要学习 Rust 基础 | 对于 Node.js 开发者更友好 |
总结来说:
- 如果你对应用的体积、性能、资源占用和安全性有较高要求,并且愿意学习或使用 Rust,Tauri 是一个非常有吸引力的选择。它更适合那些希望构建轻量级、接近原生体验的应用。
- 如果你已经有一个成熟的 Node.js/Web 前端团队,并且需要一个生态极其丰富、开发速度更快的框架,不介意较大的应用体积和内存占用,Electron 仍然是一个可行的选择。
Tauri 并不是要完全取代 Electron,而是提供了一个在不同权衡下构建桌面应用的强大替代方案。
三、 Tauri 入门实践:构建你的第一个 Tauri 应用
理论知识的学习总需要实践来巩固。接下来,我们将一步步指导你如何安装必要的依赖,并创建一个基础的 Tauri 应用程序。
步骤 1:安装前置依赖
在开始之前,你需要确保你的开发环境中安装了以下软件:
- Rust: Tauri 的后端是 Rust 编写的。你需要安装 Rust 的官方工具链
rustup
。- 访问 https://rustup.rs/ 并按照说明安装。安装完成后,可以通过
rustc --version
和cargo --version
来验证安装是否成功。
- 访问 https://rustup.rs/ 并按照说明安装。安装完成后,可以通过
- Node.js: Tauri 的构建工具和前端部分需要 Node.js 环境。
- 访问 https://nodejs.org/ 下载并安装 LTS 版本。安装完成后,可以通过
node -v
和npm -v
(或yarn -v
,pnpm -v
) 来验证安装是否成功。
- 访问 https://nodejs.org/ 下载并安装 LTS 版本。安装完成后,可以通过
- 系统构建工具链: Tauri 在构建应用时需要依赖操作系统的原生构建工具。
- Windows:
- 安装
Microsoft Visual Studio Build Tools
。你可以从 Visual Studio 官网下载并运行安装程序,选择 “Desktop development with C++” 工作负载。 - 确保安装了 WebView2 Runtime (对于 Windows 10 及以上通常已内置,Windows 7/8 需要手动安装)。
- 安装
- macOS:
- 安装 Xcode 命令行工具:
xcode-select --install
- 确保安装了 Command Line Tools for Xcode。
- 安装 Xcode 命令行工具:
- Linux:
- 安装 C++ 开发环境:通常是
build-essential
或类似的包 (sudo apt update && sudo apt install build-essential
或sudo dnf groupinstall "Development Tools"
)。 - 安装 WebKitGTK 开发包:具体包名取决于你的 Linux 发行版,例如在 Ubuntu 上是
libwebkit2gtk-4.0-dev
或libwebkit2gtk-4.1-dev
。(sudo apt install libwebkit2gtk-4.0-dev
)。
- 安装 C++ 开发环境:通常是
- Windows:
这些依赖是 Tauri 能够编译 Rust 代码、运行构建脚本以及使用原生 WebView 的基础。
步骤 2:创建 Tauri 项目
Tauri 提供了一个官方的 CLI 工具 create-tauri-app
,可以快速创建一个包含常用前端框架模板的项目。
打开你的终端或命令行工具,执行以下命令:
bash
cargo install create-tauri-app
这会全局安装 create-tauri-app
工具。安装完成后,使用它来创建新项目:
bash
create-tauri-app
执行命令后,它会引导你完成项目配置:
- 项目名称 (Project name): 输入你的项目名称,例如
my-tauri-app
。 - 包管理器 (Package manager): 选择你偏好的包管理器 (npm, yarn, pnpm)。
- 前端模板 (Frontend template): 选择一个前端框架模板。Tauri 支持纯 JavaScript/TypeScript、React、Vue、Angular、Svelte 等多种选项。选择你最熟悉的那个。例如,我们选择
react-ts
。 - UI 模板 (UI template): 根据你的前端框架选择具体的模板,例如
create-react-app
或vite
。通常选择基于 Vite 的模板,因为它速度更快。
按照提示完成选择后,create-tauri-app
会在当前目录下创建一个新的项目文件夹 (my-tauri-app
),并自动安装好所有依赖。
项目结构概览:
创建的项目目录大致如下:
my-tauri-app/
├── src/ # 前端代码目录 (React, Vue, etc.)
├── src-tauri/ # Tauri 后端代码目录 (Rust)
│ ├── src/
│ │ └── main.rs # Rust 应用入口文件
│ ├── tauri.conf.json # Tauri 配置文件
│ └── Cargo.toml # Rust 项目配置文件 (类似 package.json)
├── .gitignore
├── package.json # 前端项目配置文件
└── ... 其他前端项目文件
src/
: 这个目录是你存放所有前端代码的地方。你会在这里编写你的用户界面。src-tauri/
: 这个目录包含了 Tauri 的核心配置和 Rust 后端代码。src-tauri/src/main.rs
: Rust 后端应用的入口点。你将在这里定义可以被前端调用的命令 (Commands) 和处理后端逻辑。src-tauri/tauri.conf.json
: Tauri 的主要配置文件。你可以通过它配置窗口大小、标题、允许前端调用的后端 API (Allowlist)、打包选项等。src-tauri/Cargo.toml
: Rust 项目的依赖管理文件。
步骤 3:运行开发模式
进入新创建的项目目录:
bash
cd my-tauri-app
然后运行 Tauri 的开发命令:
bash
tauri dev
这个命令会做几件事:
- 启动你的前端开发服务器(例如 Vite 或 Webpack)。
- 编译并启动 Rust 后端应用。
- 在 Rust 应用中打开一个 WebView 窗口,加载前端开发服务器提供的 URL。
现在,一个带有你的前端界面的桌面应用程序窗口应该会出现在屏幕上。当你修改前端代码并保存时,前端开发服务器通常会进行热更新,WebView 中的界面也会随之刷新,就像在浏览器中开发 Web 应用一样方便。修改 Rust 后端代码时,tauri dev
会重新编译并重启后端。
步骤 4:初识前端与后端通信 (IPC)
Tauri 的核心在于前端(WebView)和后端(Rust)之间的通信,这被称为进程间通信 (IPC – Inter-Process Communication)。Tauri 提供了一个安全且方便的机制来实现这一点。
前端调用 Rust (Commands):
前端不能直接访问操作系统的文件系统或调用 Rust 函数。你需要将需要原生能力的逻辑封装成 Rust 函数,并将其标记为可供前端调用的“命令”。
-
在 Rust 后端定义命令:
打开src-tauri/src/main.rs
文件。你需要在一个函数上添加#[tauri::command]
属性来将其标记为可调用命令。“`rust
// main.rs![cfg_attr(not(debug_assertions), windows_subsystem = “windows”)]
// 定义一个可以从前端调用的命令
[tauri::command]
fn greet(name: &str) -> String {
format!(“Hello, {}! You’ve been greeted from Rust!”, name)
}fn main() {
tauri::Builder::default()
// 在这里注册你的命令
.invoke_handler(tauri::generate_handler![greet])
.run(tauri::generate_context!())
.expect(“error while running tauri application”);
}
``
main
在函数中,你需要在
invoke_handler中注册你定义的所有命令,使用
tauri::generate_handler!` 宏。 -
在前端调用 Rust 命令:
Tauri 提供了一个 JavaScript/TypeScript 库来与后端通信。你需要先导入invoke
函数。在你的前端代码(例如
src/App.tsx
或src/main.js
)中:“`typescript
// 导入 invoke 函数
import { invoke } from ‘@tauri-apps/api/tauri’;// 在某个事件处理器或函数中调用 Rust 命令
async function greetButtonClickHandler() {
const nameInput = document.querySelector(“#name-input”) as HTMLInputElement;
const name = nameInput ? nameInput.value : “World”;
try {
// 调用 Rust 的 greet 命令,并传递参数
const response = await invoke(‘greet’, { name: name });
console.log(response); // 打印 Rust 返回的结果
alert(response);
} catch (error) {
console.error(“Error calling greet command:”, error);
}
}// 假设你有一个输入框和一个按钮
//
//
``
invoke(‘command_name’, { arg1: value1, arg2: value2 })` 来调用指定的 Rust 命令,并传递参数。Rust 函数的返回值将作为 Promise 的 resolved 值返回给前端。
这里的关键是使用
Rust 调用前端 (Events):
后端有时也需要通知前端状态变化或发送数据。Tauri 提供了事件系统来实现这一点。
-
在 Rust 后端发射事件:
在 Rust 代码中,你可以获取AppHandle
或Window
的引用,然后使用emit_all
或emit
方法来发射一个事件。“`rust
// 在某个需要发送事件的地方 (例如在一个命令内部或独立的线程中)
use tauri::Manager;[tauri::command]
fn emit_my_event(app_handle: tauri::AppHandle) {
// 发射一个名为 ‘backend-event’ 的事件,携带一些数据
app_handle.emit_all(‘backend-event’, “Hello from Rust Backend!”).unwrap();
}fn main() {
tauri::Builder::default()
.invoke_handler(tauri::generate_handler![greet, emit_my_event]) // 别忘了注册新命令
.run(tauri::generate_context!())
.expect(“error while running tauri application”);
}
``
emit_all会将事件发送给所有窗口,
emit` 则发送给特定窗口。事件可以携带任何可序列化为 JSON 的数据。 -
在前端监听事件:
在前端代码中,使用 Tauri 提供的@tauri-apps/api/event
模块来监听后端发射的事件。“`typescript
// 导入 event 模块
import { listen } from ‘@tauri-apps/api/event’;// 监听事件
const unlisten = await listen(‘backend-event’, (event) => {
console.log(‘Received event from backend:’, event);
console.log(‘Event payload:’, event.payload); // 访问事件携带的数据
alert(Received event with payload: ${event.payload}
);
});// 如果需要在组件卸载时停止监听,可以调用 unlisten()
// 例如:unlisten();
``
listen函数返回一个 Promise,它 resolve 的是一个
unlisten` 函数,调用它可以移除该事件监听器。
通过 Commands 和 Events,前端和后端就可以安全有效地进行双向通信了。
步骤 5:配置你的应用 (tauri.conf.json)
src-tauri/tauri.conf.json
是 Tauri 应用的核心配置文件。你可以通过它控制应用的许多行为和属性。
json
{
"build": {
"devPath": "../src", // 开发模式下前端资源的路径
"distDir": "../dist", // 构建模式下前端资源的路径
"beforeBuildCommand": "", // 构建前执行的命令 (例如 npm run build)
"beforeDevCommand": "" // 开发前执行的命令 (例如 npm run dev)
},
"package": {
"productName": "my-tauri-app", // 应用显示名称
"version": "0.1.0" // 应用版本号
},
"tauri": {
"allowlist": { // 安全 Allowlist:允许前端访问哪些 Tauri API
"all": false, // 默认禁止所有
"shell": {
"all": false,
"open": true // 允许前端调用 shell.open 方法打开外部链接
},
"fs": { // 文件系统访问
"all": false,
"readFile": true,
"writeFile": true,
"readDir": true,
"scope": ["$APPDATA/*"] // 限定文件系统访问范围
},
"dialog": { // 对话框
"all": true
}
// ... 其他模块,如 window, http, path 等
},
"bundle": { // 打包配置
"active": true,
"targets": "all", // 打包目标平台 (all, msi, dmg, appimage, deb, etc.)
"identifier": "com.tauri.dev", // 应用唯一标识符
"icon": [ // 应用图标
"icons/32x32.png",
"icons/128x128.png",
"icons/[email protected]",
"icons/icon.icns",
"icons/icon.ico"
]
},
"security": {
"csp": null // Content Security Policy 配置
},
"updater": { // 应用更新配置
"active": false
},
"windows": [ // 窗口配置
{
"fullscreen": false,
"resizable": true,
"title": "My Tauri App", // 窗口标题
"width": 800,
"height": 600
}
]
}
}
build
: 配置前端项目的构建和开发命令以及输出目录。package
: 配置打包后的应用名称和版本。tauri.allowlist
: 这是最重要的安全配置之一。 你必须在这里显式地允许前端能够调用的 Tauri 内置 API。例如,如果你想让前端能够打开外部链接,你需要将shell.open
设置为true
。如果你需要访问文件系统,你需要启用fs
模块并配置访问范围 (scope
)。默认情况下all
是false
,这意味着前端没有任何 Tauri API 的访问权限,你需要按需开启。tauri.bundle
: 配置应用的打包方式、目标平台、应用图标和唯一标识符。tauri.security
: 配置 Content Security Policy (CSP) 等安全相关的设置。tauri.updater
: 配置应用更新功能(需要后端支持)。tauri.windows
: 配置应用窗口的属性,如标题、大小、是否可调整大小、是否全屏等。
请务必仔细阅读并理解 tauri.conf.json
中的配置项,特别是 allowlist
,它直接关系到应用的安全。
步骤 6:构建最终应用
当你完成了应用开发,并希望生成可以分发给用户的安装包时,使用构建命令:
bash
tauri build
这个命令会:
- 运行
build.beforeBuildCommand
中配置的前端构建命令(通常是npm run build
或yarn build
),将前端代码打包到build.distDir
指定的目录。 - 编译 Rust 后端代码,并将编译好的可执行文件与前端资源捆绑在一起。
- 根据
tauri.conf.json
中bundle
的配置,生成对应平台的安装包或可执行文件。
构建成功后,你会在 src-tauri/target/release/bundle/
目录下找到生成的安装包或可执行文件,可以将其分发给用户了。
四、 进阶话题简述
本文只是一个入门指南,Tauri 还有许多更强大的特性等待你去探索:
- 插件系统: Tauri 提供了强大的插件系统,可以方便地集成常见功能,例如数据库访问、系统托盘、文件拖放等。你也可以编写自己的 Rust 插件。
- 自定义窗口: 除了基本配置,你还可以通过 Rust 代码更精细地控制窗口行为,例如无边框窗口、透明窗口、窗口间通信等。
- Updater: Tauri 内置了应用自动更新的功能,可以帮助你轻松地发布和管理应用更新。
- CI/CD 集成: Tauri 项目可以很容易地集成到持续集成/持续部署流程中,实现自动化构建和发布。
- 外部协议处理: 注册自定义 URL 协议,让你的应用可以响应特定的链接(例如
my-app://open/some/page
)。
五、 社区与资源
Tauri 拥有一个活跃的社区,当你遇到问题或需要帮助时,可以寻求社区的支持:
- 官方文档: https://tauri.app/zh-cn/ (提供中文文档) 这是学习 Tauri 最权威的资源。
- Discord 服务器: 加入 Tauri 的 Discord 服务器,与其他开发者交流。
- GitHub 仓库: https://github.com/tauri-apps/tauri 查看源码、提交问题或贡献代码。
六、 结论
Tauri 框架为跨平台桌面应用开发提供了一个令人兴奋的新选择。它结合了 Web 技术的前端灵活性与 Rust 后端的性能、安全和原生能力,解决了 Electron 在体积和性能方面的一些痛点。虽然它的生态系统相对年轻,但凭借其优秀的设计和快速的发展,Tauri 正在成为构建现代、高效、安全的桌面应用的有力竞争者。
通过本文的介绍和入门实践,你应该对 Tauri 有了初步的了解,并能够开始构建你的第一个 Tauri 应用了。探索其强大的功能,利用你已有的 Web 技能,结合 Rust 的能力,去创造令人惊叹的桌面应用程序吧!