Tauri 快速入门:GitHub 仓库完整指南
Tauri 快速入门:GitHub 仓库完整指南
引言
在当今的软件开发领域,跨平台桌面应用程序的需求日益增长。开发者们一直在寻找一种高效、轻量级且安全的解决方案,以构建能够在 Windows、macOS 和 Linux 等多个操作系统上无缝运行的应用程序。Tauri 正是这样一种新兴的框架,它以其独特的优势迅速赢得了开发者的青睐。
Tauri 的核心理念是利用现代 Web 技术(HTML、CSS 和 JavaScript)来构建桌面应用程序的用户界面,同时通过 Rust 编写的后端提供强大的系统级功能和安全性。这种组合方式既保留了 Web 开发的便捷性和灵活性,又克服了传统 Electron 框架在性能和安全性方面的不足。
本文将为您提供一份详尽的 Tauri 快速入门指南,重点介绍如何利用 GitHub 上的官方 Tauri 仓库和社区资源,快速搭建开发环境、创建第一个 Tauri 应用,并了解 Tauri 的核心概念和最佳实践。无论您是经验丰富的桌面应用开发者,还是刚刚接触 Tauri 的新手,都能从本文中获益。
1. Tauri 的优势:为什么选择 Tauri?
在深入了解 Tauri 的技术细节之前,我们先来探讨一下为什么 Tauri 值得您关注和学习。相比于其他跨平台桌面应用开发框架,Tauri 具有以下显著优势:
- 更小的应用体积: Tauri 应用程序通常比 Electron 应用程序小得多。这是因为 Tauri 不会将整个 Chromium 浏览器引擎打包到应用程序中,而是利用操作系统自带的 Webview(如 Windows 上的 WebView2、macOS 上的 WKWebView 和 Linux 上的 WebKitGTK)。
- 更高的性能: 由于减少了不必要的资源消耗,Tauri 应用程序通常具有更快的启动速度和更低的内存占用。
- 更强的安全性: Tauri 的后端使用 Rust 编写,Rust 是一种以内存安全著称的系统级编程语言,可以有效防止内存泄漏、缓冲区溢出等常见的安全漏洞。此外,Tauri 还提供了内置的安全机制,如内容安全策略(CSP)和权限系统,以进一步增强应用程序的安全性。
- 更灵活的架构: Tauri 允许开发者自由选择前端框架(如 React、Vue、Svelte 等)和构建工具(如 Vite、Webpack 等),从而可以根据项目需求和个人偏好进行定制。
- 活跃的社区: Tauri 拥有一个快速发展的社区,提供了丰富的文档、示例和第三方库,可以帮助开发者快速解决问题和学习新知识。
2. 准备工作:搭建 Tauri 开发环境
在开始创建 Tauri 应用程序之前,您需要先搭建好开发环境。以下是在不同操作系统上安装 Tauri 所需的依赖项和步骤:
2.1. 前置条件
-
Rust 环境: Tauri 的后端依赖于 Rust 语言,因此您需要安装 Rust 工具链。
- 访问 Rust 官方网站:https://www.rust-lang.org/
- 按照官方指南下载并安装 Rustup(Rust 的安装程序和版本管理器)。
- 在终端中运行
rustc --version
和cargo --version
,确保 Rust 和 Cargo 已正确安装。
-
Node.js 和 npm/Yarn/pnpm: Tauri 的前端构建工具依赖于 Node.js 环境。
- 访问 Node.js 官方网站:https://nodejs.org/
- 下载并安装 LTS(长期支持)版本的 Node.js。
- 在终端中运行
node -v
和npm -v
(或yarn -v
、pnpm -v
),确保 Node.js 和包管理器已正确安装。
2.2. 特定于操作系统的依赖项
-
Windows:
- Microsoft Visual Studio C++ Build Tools: Tauri 需要 C++ 构建工具来编译 Rust 代码。
- 下载 Visual Studio Installer:https://visualstudio.microsoft.com/downloads/
- 在安装过程中,选择“使用 C++ 的桌面开发”工作负载,并确保勾选了“MSVC v142 - VS 2019 C++ x64/x86 生成工具”和“Windows 10 SDK”。
- WebView2: Tauri 在 Windows 上使用 WebView2 来渲染 Web 内容。
- 通常情况下,WebView2 已经预装在 Windows 10 及更高版本的系统中。如果没有,可以从 Microsoft 官方网站下载并安装:https://developer.microsoft.com/en-us/microsoft-edge/webview2/
- Microsoft Visual Studio C++ Build Tools: Tauri 需要 C++ 构建工具来编译 Rust 代码。
-
macOS:
- Xcode Command Line Tools: Tauri 需要 Xcode Command Line Tools 来编译 Rust 代码。
- 在终端中运行
xcode-select --install
来安装。
- 在终端中运行
- Xcode Command Line Tools: Tauri 需要 Xcode Command Line Tools 来编译 Rust 代码。
-
Linux:
- WebKitGTK 开发库: Tauri 在 Linux 上使用 WebKitGTK 来渲染 Web 内容。
- 使用您发行版的包管理器安装 WebKitGTK 开发库。例如:
- Debian/Ubuntu:
sudo apt-get install libwebkit2gtk-4.0-dev
- Fedora/CentOS/RHEL:
sudo dnf install webkit2gtk3-devel
- Arch Linux:
sudo pacman -S webkit2gtk
- Debian/Ubuntu:
- 使用您发行版的包管理器安装 WebKitGTK 开发库。例如:
- WebKitGTK 开发库: Tauri 在 Linux 上使用 WebKitGTK 来渲染 Web 内容。
2.3. 安装 Tauri CLI
一旦安装了所有必需的依赖项,您就可以安装 Tauri CLI(命令行界面),它是创建、构建和管理 Tauri 项目的主要工具。
-
使用您喜欢的包管理器(npm、Yarn 或 pnpm)安装 Tauri CLI:
```bash
使用 npm
npm install -g @tauri-apps/cli
使用 Yarn
yarn global add @tauri-apps/cli
使用 pnpm
pnpm add -g @tauri-apps/cli
``` -
验证 Tauri CLI 是否已正确安装:
bash
tauri --version
3. 创建您的第一个 Tauri 应用
现在您已经准备好创建您的第一个 Tauri 应用了!我们将使用 Tauri CLI 的 create
命令来生成一个基本的项目模板。
3.1. 生成项目
-
在终端中,导航到您希望创建项目的目录。
-
运行以下命令来创建一个新的 Tauri 项目:
bash
tauri create my-tauri-app
把my-tauri-app
替换为你想要的项目名称。- Tauri CLI 会询问您一些问题,以配置您的项目:
- App name: 您的应用程序的名称(例如,My Tauri App)。
- Window title: 您的应用程序窗口的标题(例如,My First Tauri App)。
- Frontend dev command: 用于在开发模式下启动前端服务器的命令(例如,
npm run dev
或yarn dev
)。 - Frontend dist directory: 前端构建后的输出目录(例如,
dist
)。 - Choose your framework: 选择您喜欢的前端框架(如 React, Vue, Svelte 等)。CLI 会根据您的选择自动配置项目。
- Tauri CLI 会询问您一些问题,以配置您的项目:
-
等待 Tauri CLI 完成项目生成过程。
3.2. 项目结构
生成的 Tauri 项目具有以下典型的目录结构:
my-tauri-app/
├── src-tauri/
│ ├── Cargo.toml # Rust 项目的清单文件
│ ├── src/
│ │ └── main.rs # Rust 后端的主入口文件
│ ├── tauri.conf.json # Tauri 应用程序的配置文件
│ └── icons/ # 应用程序图标目录
├── src/ # 前端源代码目录(如 React、Vue、Svelte 等)
├── public/ # 静态资源目录
├── package.json # 前端项目的依赖项和脚本
└── node_modules/ # 前端依赖项安装目录
src-tauri/
: 包含 Rust 后端代码和 Tauri 应用程序的配置。Cargo.toml
:Rust 项目的清单文件,用于管理 Rust 依赖项和构建配置。src/main.rs
:Rust 后端的主入口文件,您可以在这里编写与系统交互的 Rust 代码。tauri.conf.json
:Tauri 应用程序的配置文件,用于设置应用程序的名称、窗口大小、安全策略等。icons/
:应用程序图标目录,包含不同尺寸的应用程序图标。
src/
: 包含前端源代码,通常使用您选择的前端框架(如 React、Vue、Svelte 等)编写。public/
: 包含静态资源,如图片、字体等。package.json
: 前端项目的清单文件,用于管理前端依赖项和构建脚本。node_modules/
: 前端依赖项安装目录。
3.3. 运行您的应用
-
在终端中,导航到您的 Tauri 项目的根目录(
my-tauri-app
)。 -
运行以下命令来启动 Tauri 开发服务器:
bash
tauri dev -
Tauri CLI 将会:
- 启动前端开发服务器(如 Vite、Webpack 等)。
- 编译 Rust 后端代码。
- 打开一个 Tauri 应用程序窗口,显示您的前端界面。
-
现在,您可以在浏览器中访问前端开发服务器的 URL(通常是
http://localhost:3000
或类似的地址),或者直接在 Tauri 应用程序窗口中查看您的应用。
4. Tauri 的核心概念
在您开始构建更复杂的 Tauri 应用程序之前,了解 Tauri 的一些核心概念非常重要。
4.1. 前端与后端的通信
Tauri 应用程序由前端和后端两部分组成,它们之间需要进行通信以实现各种功能。Tauri 提供了几种不同的通信机制:
-
命令(Commands): 这是 Tauri 中最常用的通信方式。您可以在 Rust 后端定义命令,然后在前端使用 JavaScript 调用这些命令。命令可以接受参数并返回结果,支持同步和异步操作。
-
在 Rust 后端定义命令:
```rust
[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");
}
``` -
在前端调用命令:
```javascript
import { invoke } from '@tauri-apps/api/tauri';async function greetUser() {
const greeting = await invoke('greet', { name: 'World' });
console.log(greeting); // 输出:Hello, World! You've been greeted from Rust!
}
```
* 事件(Events): Tauri 允许您在前端和后端之间发送和监听自定义事件。事件可以携带数据,用于实现更灵活的通信模式。 -
在 Rust 后端发送事件:
rust
use tauri::{Manager, Window};
#[tauri::command]
fn emit_event(window: Window){
window.emit("my-event", "Hello from Rust").unwrap();
} -
在前端发送事件:
```javascript
import { emit, listen } from '@tauri-apps/api/event';// 监听来自后端的事件
listen('my-event', (event) => {
console.log(Got event: ${event.payload}
);
});// 向后端发送事件(需要窗口对象,使用场景有限)
```
-
-
状态管理 (State): Tauri 允许你在 Rust 后端管理全局状态,并在前端访问和修改它们。
```rust
// 定义一个状态
use std::sync::Mutex;
struct Counter(Mutex); #[tauri::command]
fn increment(state: tauri::State<'_, Counter>){
let mut counter = state.0.lock().unwrap();
counter += 1;
}
#[tauri::command]
fn get_count(state: tauri::State<'_, Counter>) -> i32{
let counter = state.0.lock().unwrap();
counter
}
// main.rs
fn main() {
tauri::Builder::default()
.manage(Counter(Mutex::new(0))) // 注册状态
.invoke_handler(tauri::generate_handler![increment, get_count])
.run(tauri::generate_context!())
.expect("error while running tauri application");
}js
//前端调用
invoke('increment'); // 调用 increment 命令
const count = await invoke('get_count'); // 调用 get_count 命令
* **全局快捷键 (Global Shortcuts):** 注册系统范围的快捷键,即使应用没有焦点也能触发。
rust
// main.rs
use tauri::GlobalShortcutManager;
fn main() {
tauri::Builder::default()
.setup(|app| {
let mut shortcut = app.global_shortcut_manager();
shortcut.register("CmdOrCtrl+Shift+C", ||{
println!("快捷键被按下");
}).unwrap();
Ok(())
})
.run(tauri::generate_context!())
.expect("error while running tauri application");
}
```
4.2. Tauri API
Tauri 提供了一组丰富的 API,用于访问系统级功能和与操作系统交互。这些 API 通过 @tauri-apps/api
包提供给前端使用。
@tauri-apps/api/app
: 应用程序相关的功能,如获取应用程序版本、名称等。@tauri-apps/api/clipboard
: 剪贴板操作,如读取和写入剪贴板内容。@tauri-apps/api/dialog
: 对话框,如打开文件、保存文件、消息框等。@tauri-apps/api/fs
: 文件系统操作,如读取、写入、创建、删除文件和目录。@tauri-apps/api/globalShortcut
: 全局快捷键,如注册和注销快捷键。@tauri-apps/api/http
: 发送 HTTP 请求。@tauri-apps/api/notification
: 系统通知。@tauri-apps/api/os
: 操作系统相关的信息,如获取操作系统类型、版本等。@tauri-apps/api/path
: 路径操作,如获取 home 目录、应用程序数据目录等。@tauri-apps/api/process
: 进程操作,如创建子进程、退出当前进程等。@tauri-apps/api/shell
: Shell 命令执行。@tauri-apps/api/tauri
: Tauri 核心功能,如调用命令、监听事件等。@tauri-apps/api/updater
: 应用程序更新。@tauri-apps/api/window
: 窗口操作,如创建、关闭、最大化、最小化窗口等。
5. GitHub 仓库:Tauri 的资源宝库
Tauri 的官方 GitHub 仓库(https://github.com/tauri-apps/tauri)是学习和使用 Tauri 的重要资源。
5.1. 代码库
tauri
: Tauri 框架的核心代码。您可以在这里找到 Tauri 的源代码、API 实现、构建脚本等。如果您对 Tauri 的内部工作原理感兴趣,或者希望为 Tauri 贡献代码,那么这个代码库是必不可少的。create-tauri-app
: 用于创建 Tauri 项目的模板生成器。这个代码库包含了 Tauri CLI 的create
命令的实现,以及各种前端框架的项目模板。tauri-docs
: Tauri 的官方文档。这个代码库包含了 Tauri 的详细文档,包括 API 参考、指南、教程等。如果您在使用 Tauri 时遇到问题,或者想了解更多关于 Tauri 的信息,那么这个文档库是您的首选。awesome-tauri
: Tauri 社区精选的资源列表。这个代码库收集了各种与 Tauri 相关的资源,包括第三方库、插件、示例项目、文章、视频等。如果您想了解 Tauri 的生态系统,或者寻找一些灵感,那么这个列表非常有用。
5.2. 问题跟踪器(Issues)
Tauri 的 GitHub 仓库使用 Issues 来跟踪 bug 报告、功能请求和讨论。如果您在使用 Tauri 时遇到问题,或者有任何改进建议,都可以在 Issues 中提出。
- 在提交 Issues 之前,请先搜索现有的 Issues,看看是否已经有人提出了类似的问题或建议。
- 如果确实是新的问题或建议,请尽可能详细地描述您的问题或建议,包括您的操作系统、Tauri 版本、复现步骤、期望结果等。
- Tauri 社区的成员和维护者会积极响应 Issues,并尽力提供帮助和解决方案。
5.3. 讨论区(Discussions)
Tauri 的 GitHub 仓库还提供了一个 Discussions 区域,用于更广泛的讨论和交流。您可以在这里提问、分享经验、寻求帮助、讨论 Tauri 的未来发展等。
5.4. 示例项目
Tauri 的 GitHub 仓库中包含了一些示例项目,可以帮助您快速了解 Tauri 的各种功能和用法。这些示例项目涵盖了不同的前端框架和应用场景,是学习 Tauri 的宝贵资源。
6. Tauri 社区与支持
Tauri 拥有一个活跃的社区,您可以通过多种渠道获得帮助和支持:
- GitHub Discussions: 如前所述,您可以在 Tauri 的 GitHub 仓库的 Discussions 区域提问、交流和寻求帮助。
- Discord 服务器: Tauri 官方 Discord 服务器是一个实时交流的平台,您可以在这里与其他 Tauri 开发者和用户交流,获得即时帮助。
- Stack Overflow: 您可以在 Stack Overflow 上搜索或提问与 Tauri 相关的问题,Tauri 社区的成员会积极回答问题。
- Twitter: 您可以在 Twitter 上关注 Tauri 的官方账号(@TauriApps),获取最新的 Tauri 动态和资讯。
7. 最佳实践
在开发 Tauri 应用程序时,遵循一些最佳实践可以提高应用程序的性能、安全性和可维护性:
- 合理划分前端和后端: 将应用程序的 UI 逻辑和系统级操作分离到前端和后端,保持代码的清晰和模块化。
- 使用类型安全: 在前端使用 TypeScript,在后端使用 Rust,利用类型系统来减少错误和提高代码质量。
- 优化性能: 避免在前端执行耗时的操作,将复杂的计算和系统级任务交给 Rust 后端处理。
- 增强安全性: 遵循 Tauri 的安全最佳实践,如使用内容安全策略(CSP)、启用沙盒模式、限制 API 访问权限等。
- 编写测试: 为您的前端和后端代码编写单元测试和集成测试,确保应用程序的稳定性和可靠性。
- 代码审查: 定期进行代码审查,发现潜在的问题和改进空间。
- 持续集成: 使用持续集成工具(如 GitHub Actions、Travis CI 等)自动化构建、测试和部署流程。
8. 总结
Tauri 作为一种新兴的跨平台桌面应用开发框架,以其轻量级、高性能和安全性等优势,正在成为越来越多开发者的首选。本文为您提供了一份详尽的 Tauri 快速入门指南,介绍了如何利用 GitHub 上的官方 Tauri 仓库和社区资源,快速搭建开发环境、创建第一个 Tauri 应用,并了解 Tauri 的核心概念和最佳实践。
希望本文能够帮助您快速上手 Tauri,构建出色的跨平台桌面应用程序!如果您在使用 Tauri 的过程中遇到任何问题,或者有任何建议,欢迎随时向 Tauri 社区寻求帮助。