Tauri 入门指南：从零开始构建桌面 App – wiki大全

作者： /

我无法直接创建文件并写入内容。但是，我可以将文章内容直接输出给你。

Tauri 入门指南：从零开始构建桌面 App

引言

在当今的软件开发领域，桌面应用程序依然占据着重要的地位。虽然 Electron 等框架为开发者提供了使用 Web 技术构建桌面应用的能力，但其打包体积大、运行时内存占用高等问题也日益凸显。Tauri 应运而生，它是一个使用 Web 前端技术栈（如 React, Vue, Angular, Svelte 等）结合 Rust 后端来构建轻量级、高性能、跨平台桌面应用程序的框架。

Tauri 的核心优势在于：

  • 极致轻量化： 相较于 Electron，Tauri 打包后的应用体积显著减小，因为它不捆绑 Chromium 运行时，而是利用系统原生的 WebView。
  • 高性能： 后端采用 Rust 语言，提供了接近原生的性能，并且可以安全地与前端进行高性能的 IPC（进程间通信）。
  • 跨平台： 支持 Windows、macOS 和 Linux，一份代码多端运行。
  • 安全性： Tauri 专注于安全性，提供了强大的沙箱机制和上下文隔离。

本文将带领你从零开始，构建你的第一个 Tauri 桌面应用程序。

准备工作

在开始之前，请确保你的开发环境已安装以下工具：

  1. Node.js 和 npm/yarn/pnpm： 用于管理前端项目依赖。
  2. Rust 和 Cargo： Tauri 的后端由 Rust 提供支持，Cargo 是 Rust 的包管理器和构建工具。
  3. 系统构建工具： 根据你的操作系统，可能还需要安装一些额外的构建依赖。
    • Windows: 安装 Microsoft Visual Studio C++ build tools。最简单的方法是安装 Visual Studio Build Tools 并选择“使用 C++ 的桌面开发”工作负载。
    • macOS: 安装 Xcode Command Line Tools (xcode-select --install)。
    • Linux: 安装 webkit2gtk-4.0 及相关开发库。具体包名因发行版而异，例如在 Ubuntu/Debian 上是 sudo apt install libwebkit2gtk-4.0-dev。

构建你的第一个 Tauri 应用

我们将以一个基于 Vite + React 的前端项目为例。

步骤 1：创建前端项目

首先，使用你喜欢的前端框架创建一个新的项目。这里我们以 Vite + React 为例：

“`bash

使用 npm

npm create vite@latest my-tauri-app — –template react-ts
cd my-tauri-app
npm install
npm run dev # 确保前端项目可以正常运行
“`

步骤 2：添加 Tauri 到项目中

进入你的前端项目目录，然后添加 Tauri。Tauri CLI 会引导你完成初始化设置。

bash
cd my-tauri-app
npm install --save-dev @tauri-apps/cli
npx tauri init

npx tauri init 命令会询问你一些问题：

  1. What is your app name? (你的应用名称是什么？) – 输入 my-tauri-app 或你喜欢的名字。
  2. What is the window title? (窗口标题是什么？) – 默认即可，或者自定义。
  3. Where are your web assets (HTML/CSS/JS) located, relative to the cargo root? (你的 Web 资源（HTML/CSS/JS）相对于 cargo 根目录在哪里？) – 对于 Vite，通常是 ../dist。
  4. What is the URL of your dev server? (你的开发服务器 URL 是什么？) – 对于 Vite，通常是 http://localhost:5173 或 http://127.0.0.1:5173。

完成初始化后，你的项目结构会发生变化，会新增一个 src-tauri 文件夹，其中包含了 Tauri 应用的 Rust 后端代码和配置。

步骤 3：理解项目结构

  • my-tauri-app/
    • src/：你的 React/Vite 前端代码。
    • dist/：前端项目的构建输出目录。
    • src-tauri/：Tauri 应用的核心目录。
      • Cargo.toml：Rust 项目的配置文件，定义依赖和元数据。
      • src/main.rs：Tauri 应用的 Rust 入口文件，定义后端逻辑和 IPC。
      • tauri.conf.json：Tauri 应用的主要配置文件，定义窗口行为、菜单、权限等。

步骤 4：运行和构建

开发模式：

在开发模式下，Tauri 会启动你的前端开发服务器，并在一个独立的窗口中加载它。这允许你利用前端的热重载功能。

bash
npm run tauri dev

构建生产版本：

当你准备好发布应用程序时，可以使用以下命令构建生产版本：

bash
npm run tauri build

这会在 src-tauri/target/release 目录下生成可执行文件（例如 .exe, .dmg, .AppImage）。

核心概念

1. tauri.conf.json 配置

这个文件是 Tauri 应用的“大脑”，你可以配置：

  • build: 构建相关的设置，如 distDir (Web 资产目录), devPath (开发服务器 URL)。
  • window: 窗口的初始大小、标题、是否可调整大小等。
  • security: 内容安全策略 (CSP) 等安全设置。
  • plugins: 配置 Tauri 插件。
  • tauri: Rust 后端的一些通用配置。

例如，如果你想修改窗口的初始宽度和高度，可以在 tauri.conf.json 中找到 windows 数组：

json
{
"build": { /* ... */ },
"minification": false,
"bundle": { /* ... */ },
"plugins": { /* ... */ },
"tauri": {
"bundle": { /* ... */ },
"security": { /* ... */ },
"updater": { /* ... */ },
"windows": [
{
"fullscreen": false,
"resizable": true,
"title": "My Tauri App",
"width": 1000, // 修改宽度
"height": 700 // 修改高度
}
]
}
}

2. 前后端通信 (IPC)

Tauri 最强大的特性之一是其无缝的前后端通信机制。你可以通过 JavaScript 调用 Rust 函数，也可以从 Rust 向前端发送事件。

从前端调用 Rust 函数：

在 src-tauri/src/main.rs 中，你可以定义可供前端调用的函数。这些函数需要使用 #[tauri::command] 宏进行标记。

“`rust
// src-tauri/src/main.rs

// 阻止在 Windows 上打开额外的控制台窗口

![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]) // 注册 greet 函数
.run(tauri::generate_context!())
.expect(“error while running tauri application”);
}
“`

然后在你的前端代码（例如 src/App.tsx）中，你可以使用 @tauri-apps/api 包提供的 invoke 函数来调用它：

“`tsx
// src/App.tsx
import { useState } from ‘react’;
import { invoke } from ‘@tauri-apps/api/tauri’;

function App() {
const [name, setName] = useState(”);
const [greeting, setGreeting] = useState(”);

async function callGreet() {
// 调用 Rust 后端的 ‘greet’ 命令
const response = await invoke(‘greet’, { name });
setGreeting(response as string);
}

return (

setName(e.currentTarget.value)}
placeholder=”Enter a name…”
/>

{greeting &&

{greeting}

}

);
}

export default App;
“`

3. 使用 Rust 的生态系统

Tauri 后端是纯粹的 Rust 项目，这意味着你可以利用 Cargo 的强大功能和 Rust 丰富的 crates.io 生态系统。你可以添加任何你需要的 Rust 库，例如用于文件操作、网络请求、数据库交互等。

在 src-tauri/Cargo.toml 的 [dependencies] 部分添加你的 Rust 依赖：

“`toml
[dependencies]
tauri = { version = “1.6.0”, features = [“shell”] }
serde = { version = “1.0”, features = [“derive”] }
serde_json = “1.0”

添加你需要的其他 Rust 依赖，例如：

reqwest = { version = “0.11”, features = [“json”] }

“`

然后，你可以在 src-tauri/src/main.rs 或其他 Rust 模块中使用这些库。

结论

通过本文，你已经学习了如何从零开始搭建一个 Tauri 桌面应用程序，并了解了其核心概念如配置、前后端通信。Tauri 提供了一个强大而高效的替代方案，让你能够利用熟悉的 Web 技术栈结合 Rust 的强大性能，构建出色的桌面应用。

现在，你可以开始探索 Tauri 更高级的功能，例如自定义菜单、系统托盘、文件系统访问、通知、更新器等等，打造你独一无二的跨平台应用吧！

更多资源：

滚动至顶部