Tauri 开发入门：前端开发者必备的桌面端解决方案 – wiki词典

作者： /

Tauri 开发入门：前端开发者必备的桌面端解决方案

对于许多前端开发者来说，将 Web 技术栈延伸至桌面端，构建跨平台的原生应用，一直是一个充满吸引力的领域。过去，Electron 是这个领域当之无愧的王者，但其打包体积大、内存占用高等问题也备受诟病。现在，一个名为 Tauri 的新兴框架正以其轻量、高效和安全的特性，成为越来越多开发者的选择。

本文将作为一篇详细的入门指南，带你走近 Tauri，了解其核心优势，并手把手教你如何搭建环境、创建你的第一个桌面应用。

什么是 Tauri？

Tauri 是一个开源框架，它允许开发者使用任何编译为 HTML、CSS 和 JavaScript 的前端框架来构建跨平台桌面应用。它的后端使用 Rust 语言编写，前端则通过操作系统的原生 WebView 渲染，而不是像 Electron 那样捆绑一个完整的 Chromium 浏览器。

这种架构设计带来了 Tauri 最核心的几个优势：

  1. 极致轻量： 由于共享了操作系统的 WebView，Tauri 应用的安装包体积非常小（通常只有几 MB），内存占用也远低于同类 Electron 应用。
  2. 卓越性能： 后端采用以性能和内存安全著称的 Rust 语言，确保了应用的流畅运行和稳定性。关键业务逻辑可以放在 Rust 端处理，充分利用原生能力。
  3. 安全为本： Tauri 在设计之初就将安全性放在首位。默认情况下，前端对系统能力的访问是受限的，开发者需要通过配置文件明确授权，从而有效防止恶意代码对系统造成危害。
  4. 技术栈灵活： 你可以自由选择 React、Vue、Svelte、Angular 或任何你喜欢的前端框架来构建用户界面，无缝迁移你的 Web 开发经验。

Tauri 开发环境搭建

在开始之前，你需要确保系统中安装了以下依赖：

  1. Node.js 与包管理器： Tauri 的脚手架和许多前端工具链都依赖于 Node.js 环境。请确保你已安装 Node.js (v16+)，并选择一个包管理器，如 npm、yarn 或 pnpm。

  2. Rust 环境： 由于 Tauri 的核心是 Rust，你需要安装 Rust 的工具链。官方推荐使用 rustup 进行安装。访问 rustup.rs 网站，根据指引安装即可。
    bash
    # 通过 rustup 安装 Rust
    curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

  3. 平台特定依赖：

    • Windows: 需要安装 Microsoft Visual Studio C++ build tools 和 WebView2 Runtime。
    • macOS: 需要安装 Xcode Command Line Tools (xcode-select --install)。
    • Linux: 需要安装 build-essential、libwebkit2gtk-4.0-dev 等开发库。

详细的依赖说明，请参考 Tauri 官方文档。

创建你的第一个 Tauri 应用

环境准备就绪后，我们可以使用官方提供的脚手架工具 create-tauri-app 快速创建一个项目。

  1. 运行创建命令：
    打开终端，执行以下命令。脚手架会引导你完成一系列选择。
    bash
    npm create tauri-app@latest

  2. 跟随交互式指引：

    • Project name: 为你的应用起一个名字（例如 my-first-tauri-app）。
    • Choose your UI recipe: 选择你熟悉的前端框架（例如 React）。
    • Choose your UI flavor: 选择 TypeScript (推荐) 或 JavaScript。

    命令执行完毕后，一个集成了 React 和 Tauri 的项目就创建好了。

  3. 进入项目并安装依赖：
    bash
    cd my-first-tauri-app
    npm install

项目结构如下：
– src/: 存放你的前端代码（React 组件、样式等）。
– src-tauri/: 存放所有与 Tauri 相关的后端代码和配置。
– tauri.conf.json: Tauri 应用的核心配置文件。
– src/main.rs: Rust 后端的入口文件。

核心概念：前端与后端的通信

桌面应用的核心之一是前端 UI 与后端原生能力之间的交互。Tauri 提供了一套安全且高效的 IPC (Inter-Process Communication) 机制，主要通过 Commands (命令) 和 Events (事件) 实现。

Commands：从前端调用 Rust 函数

你可以将 Rust 函数暴露给前端，让 JavaScript 可以像调用异步函数一样调用它们。

  1. 在 Rust 中定义 Command：
    打开 src-tauri/src/main.rs，在文件顶部添加 #[tauri::command] 宏来定义一个函数。

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

    // … (默认代码)

    [tauri::command]

    fn greet(name: &str) -> String {
    format!(“你好, {}! 这是来自 Rust 的问候。”, name)
    }

    fn main() {
    tauri::Builder::default()
    // 在这里注册你的 command
    .invoke_handler(tauri::generate_handler![greet])
    .run(tauri::generate_context!())
    .expect(“error while running tauri application”);
    }
    “`

  2. 在前端调用 Command：
    Tauri 提供了 @tauri-apps/api 这个 npm 包，其中的 invoke 函数可以让你轻松调用后端命令。

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

    function App() {
    const [name, setName] = useState(”);
    const [greetMsg, setGreetMsg] = useState(”);

    async function callGreet() {
    if (name) {
    const message = await invoke(‘greet’, { name });
    setGreetMsg(message as string);
    }
    }

    return (

    欢迎使用 Tauri!

    setName(e.target.value)}
    />

    {greetMsg}

    );
    }

    export default App;
    “`

运行与构建

开发模式

在开发过程中，你希望前端代码的修改能够实时反映在应用中。Tauri 提供了热重载功能。

bash
npm run tauri dev

此命令会同时启动前端开发服务器和 Tauri 的桌面窗口。你在 src 目录下的任何修改都会立即更新界面，无需重启应用。

构建生产版本

当你准备好发布应用时，可以执行构建命令。

bash
npm run tauri build

Tauri 会将你的前端代码打包，并与 Rust 后端编译成一个单一的、针对目标操作系统的可执行文件或安装包。构建产物位于 src-tauri/target/release/bundle/ 目录下。

总结

Tauri 为前端开发者打开了一扇通往桌面端开发的新大门。它巧妙地结合了 Web 技术的灵活性和 Rust 的强大性能，同时解决了传统桌面端开发方案的痛点。通过本文的引导，你应该已经对 Tauri 有了基本的认识，并成功创建和运行了你的第一个应用。

这仅仅是一个开始。Tauri 还提供了丰富强大的 API，用于窗口管理、文件系统操作、系统通知、菜单栏定制等。继续探索官方文档，将你的 Web 应用无缝带到桌面上吧！

滚动至顶部