深度解析Tauri：特性、优势与实战 – wiki词典

作者： /

深度解析Tauri：特性、优势与实战

引言

在当今的桌面应用开发领域，开发者们不断寻求更轻量、更高效、更具现代感的解决方案。Electron作为桌面应用开发的先行者，凭借其跨平台能力和Web技术栈的熟悉度，赢得了广泛的市场。然而，Electron应用的资源占用问题也一直备受诟病。正是在这样的背景下，Tauri应运而生，以其独特的优势，为桌面应用开发带来了新的选择。

本文将深入探讨Tauri的特性、优势，并通过实战示例展示其应用。

什么是Tauri？

Tauri是一个基于Rust开发的桌面应用框架，它允许开发者使用Web技术（HTML、CSS、JavaScript/TypeScript）构建轻量级、高性能的跨平台桌面应用。与Electron不同的是，Tauri不捆绑完整的Chromium浏览器作为运行时，而是利用操作系统原生的WebView组件（如Windows上的WebView2、macOS上的WKWebView、Linux上的WebKitGTK），极大地减少了应用体积和资源消耗。

Tauri的核心特性

  1. 极低的资源占用： 这是Tauri最显著的优势之一。通过使用原生WebView，Tauri应用无需包含庞大的Chromium运行时，从而显著减小了打包体积，并降低了内存和CPU的消耗。
  2. 跨平台支持： Tauri支持Windows、macOS和Linux三大主流桌面操作系统，实现了一次开发，多平台部署。
  3. Rust作为后端： Tauri的后端逻辑使用Rust编写，充分利用了Rust的内存安全、并发性能和执行效率。开发者可以通过Rust与操作系统进行深度交互，例如访问文件系统、调用系统API、进行网络操作等。
  4. Web技术栈： 前端界面依然使用熟悉的Web技术（HTML、CSS、JavaScript/TypeScript），这意味着前端开发者可以沿用现有的知识、框架和工具（如React, Vue, Angular, Svelte等）。
  5. 安全性： Tauri在设计时就考虑了安全性，提供了多种安全特性，例如内容安全策略（CSP）、API沙箱化、IPC通信保护等，以防止潜在的安全漏洞。
  6. 自定义标题栏和窗口： 允许开发者完全自定义应用窗口的外观，包括标题栏、边框等，以实现更具品牌特色的用户界面。
  7. 插件系统： Tauri提供了一个灵活的插件系统，开发者可以根据需要扩展Tauri的功能，或者创建自己的插件与社区共享。
  8. Tray图标： 支持在系统托盘中显示图标，并提供上下文菜单，方便用户快速访问应用功能。
  9. 文件系统访问： 提供了安全的、受限的文件系统访问API，允许应用读写用户指定的文件。

Tauri的优势

  1. 性能卓越： Rust后端带来了接近原生的执行效率，而原生WebView则保证了前端渲染的流畅性。
  2. 体积小巧： 应用打包后体积通常只有几MB到几十MB，远小于同等功能的Electron应用，这对于分发和用户下载都非常有利。
  3. 开发体验： 对于前端开发者而言，可以继续使用熟悉的Web技术栈，降低了学习成本。同时，Rust后端提供了强大的系统级编程能力。
  4. 更强的安全性： Tauri的安全模型和Rust的语言特性，使得构建更安全的桌面应用成为可能。
  5. 现代感与用户体验： 更小的体积和更快的响应速度，能够为用户提供更现代、更流畅的应用体验。

Tauri实战：构建一个简单的待办事项应用

为了更好地理解Tauri，我们将通过一个简单的待办事项（Todo List）应用来展示其基本开发流程。

前提条件：

  • 安装Rust：rustup.rs
  • 安装Node.js：nodejs.org
  • 安装Yarn或npm
  • Windows用户可能需要安装WebView2 Runtime。

步骤1：创建Tauri项目

我们可以使用create-tauri-app工具来快速创建一个项目。这里我们选择一个React + TypeScript模板。

bash
cargo install create-tauri-app # 如果未安装
npm create tauri-app my-todo-app -- --template react-ts
cd my-todo-app

根据提示选择你喜欢的前端框架（这里我们选择了React + TypeScript）。

步骤2：前端界面开发（src/App.tsx）

在src/App.tsx中，我们将创建一个简单的待办事项列表UI。

“`typescript jsx
import React, { useState, useEffect } from ‘react’;
import ‘./App.css’;
import { invoke } from ‘@tauri-apps/api/tauri’;

interface Todo {
id: number;
text: string;
completed: boolean;
}

function App() {
const [todos, setTodos] = useState([]);
const [newTodo, setNewTodo] = useState(”);

// 加载Todos
useEffect(() => {
async function loadTodos() {
const storedTodos: Todo[] = await invoke(‘get_todos’);
setTodos(storedTodos);
}
loadTodos();
}, []);

// 添加Todo
const addTodo = async () => {
if (newTodo.trim() === ”) return;
const addedTodo: Todo = await invoke(‘add_todo’, { text: newTodo });
setTodos([…todos, addedTodo]);
setNewTodo(”);
};

// 切换Todo完成状态
const toggleTodo = async (id: number) => {
const updatedTodos: Todo[] = await invoke(‘toggle_todo’, { id });
setTodos(updatedTodos);
};

// 删除Todo
const deleteTodo = async (id: number) => {
const updatedTodos: Todo[] = await invoke(‘delete_todo’, { id });
setTodos(updatedTodos);
};

return (

Tauri Todo App

setNewTodo(e.target.value)}
placeholder=”Add a new todo”
/>
    {todos.map((todo) => (

  • toggleTodo(todo.id)}>{todo.text}

    • ))}

);
}

export default App;
“`

步骤3：后端Rust逻辑开发（src-tauri/src/main.rs）

Tauri通过#[tauri::command]宏将Rust函数暴露给前端。我们将实现get_todos, add_todo, toggle_todo, delete_todo四个命令。为了简单起见，我们将待办事项存储在内存中。

“`rust

![cfg_attr(not(debug_assertions), windows_subsystem = “windows”)]

use serde::{Deserialize, Serialize};
use std::sync::Mutex;
use tauri::{State, Manager};

// 定义Todo结构体，用于在Rust和前端之间传输数据

[derive(Debug, Clone, Serialize, Deserialize)]

struct Todo {
id: u32,
text: String,
completed: bool,
}

// 全局状态管理待办事项列表和下一个ID
struct AppState {
todos: Mutex>,
next_id: Mutex,
}

// 初始化状态
impl AppState {
fn new() -> Self {
AppState {
todos: Mutex::new(vec![]),
next_id: Mutex::new(0),
}
}
}

// 获取所有待办事项

[tauri::command]

fn get_todos(state: State<‘_, AppState>) -> Vec {
state.todos.lock().unwrap().clone()
}

// 添加待办事项

[tauri::command]

fn add_todo(text: String, state: State<‘_, AppState>) -> Todo {
let mut todos = state.todos.lock().unwrap();
let mut next_id = state.next_id.lock().unwrap();

let new_todo = Todo {
    id: *next_id,
    text,
    completed: false,
};
todos.push(new_todo.clone());
*next_id += 1;
new_todo

}

// 切换待办事项完成状态

[tauri::command]

fn toggle_todo(id: u32, state: State<‘_, AppState>) -> Vec {
let mut todos = state.todos.lock().unwrap();
if let Some(todo) = todos.iter_mut().find(|t| t.id == id) {
todo.completed = !todo.completed;
}
todos.clone()
}

// 删除待办事项

[tauri::command]

fn delete_todo(id: u32, state: State<‘_, AppState>) -> Vec {
let mut todos = state.todos.lock().unwrap();
todos.retain(|t| t.id != id);
todos.clone()
}

fn main() {
tauri::Builder::default()
// 将自定义命令注册到Tauri应用
.invoke_handler(tauri::generate_handler![
get_todos, add_todo, toggle_todo, delete_todo
])
// 将状态传递给Tauri应用
.manage(AppState::new())
.run(tauri::generate_context!())
.expect(“error while running tauri application”);
}
“`

步骤4：运行应用

bash
npm run tauri dev

这将会启动开发服务器，并打开Tauri应用窗口。你可以在前端修改代码，应用将自动热重载。

步骤5：构建生产版本

bash
npm run tauri build

这将在src-tauri/target/release目录下生成可执行文件和安装包，你可以将它们分发给用户。

总结

Tauri作为一种新兴的桌面应用开发框架，凭借其轻量级、高性能和高安全性的特点，正在逐步改变桌面应用开发的格局。它完美结合了Web前端开发的便捷性与Rust后端开发的强大能力，为开发者提供了一个构建现代跨平台桌面应用的卓越选择。虽然Tauri生态系统仍在不断发展中，但其潜力和优势已然显现。对于追求极致性能和用户体验的开发者而言，Tauri无疑是一个值得深入探索和实践的强大工具。

滚动至顶部