跳到主要内容

集成到现有项目

如果你已经有一个现有的 Web 项目，本指南将指导你将 Tauri 集成到你的项目中，无论它是基于 Node.js（如 Svelte、React、Vue 或 Angular）还是基于 Rust（如 Yew 或 Dominator）。

信息

在我们继续之前，请确保你已完成 先决条件 以获得一个可用的开发环境。

虽然 Tauri 与几乎任何前端框架兼容，但我们将在本指南中使用一个 React 项目，该项目使用 create-react-app 创建。我们将假设你从类似于此的项目结构开始

.
│── package.json
│── public
│   ╰── index.html
╰── src
    │── App.css
    │── App.jsx
    │── index.css
    ╰── index.js

创建 Rust 项目​

每个 Tauri 应用程序的核心都是一个 Rust 二进制文件，它通过一个名为 tauri 的 Rust 箱管理窗口、Web 视图以及对操作系统的调用。此项目由 Cargo 管理，它是 Rust 的官方包管理器和通用构建工具。

我们的 Tauri CLI 在后台使用 Cargo，因此你很少需要直接与它交互。Cargo 还有许多未通过我们的 CLI 暴露的更多有用功能，例如测试、linting 和格式化，因此请参阅其 官方文档 以了解更多信息。

安装 Tauri CLI

如果你尚未安装 Tauri CLI，则可以使用以下命令之一进行安装。不确定使用哪一个？查看 FAQ 条目。

npm install --save-dev @tauri-apps/cli
为了让 npm 正确检测 Tauri，你需要将其添加到 package.json 文件中的“scripts”部分
package.json
"scripts": {
  "tauri": "tauri"
}

要构建一个预先配置为使用 Tauri 的最小 Rust 项目，请打开一个终端并运行以下命令

npm run tauri init

它将引导你完成一系列问题

  1. 你的应用程序名称是什么？
    这将是你最终包的名称，也是操作系统将调用你的应用程序的名称。你可以在此处使用任何你想要的名称。

  2. 窗口标题应该是什么？
    这将是默认主窗口的标题。你可以在此处使用任何你想要的标题。

  3. 你的 Web 资产（HTML/CSS/JS）相对于将创建的 <current dir>/src-tauri/tauri.conf.json 文件的位置是什么？
    这是 Tauri 在为生产构建时将从中加载前端资产的路径。
    对于本指南中的项目示例，这是 ../build。请注意，如果你使用的是不同的框架，它可能是 ../dist 之类的东西。

  4. 你的开发服务器的 URL 是什么？
    这可以是 URL 或文件路径，Tauri 将在开发期间加载它。
    对于本指南中的项目示例，这是 http://localhost:3000。请注意，如果你使用的是不同的框架，它可能是不同的东西（甚至是一个目录）。

  5. 你的前端开发命令是什么？
    这是用于启动你的前端开发服务器的命令。
    对于本指南中的项目示例，这是 npm run start（确保根据你选择的包管理器进行调整）。

  6. 你的前端构建命令是什么？
    这是构建你的前端文件的命令。
    对于本指南中的项目示例，这是 npm run build（确保根据你选择的包管理器进行调整）。
信息

如果你熟悉 Rust，你将注意到 tauri init 看起来和工作方式都非常像 cargo init。如果你更喜欢完全手动设置，你可以只使用 cargo init 并添加必要的 Tauri 依赖项。

tauri init 命令生成一个名为 src-tauri 的文件夹。Tauri 应用程序的惯例是将所有核心相关文件放置到此文件夹中。让我们快速浏览一下此文件夹的内容

  • Cargo.toml
    Cargo 清单文件。您可以声明应用程序依赖的 Rust 箱子、应用程序的元数据等等。有关完整参考，请参阅 Cargo 清单格式。

  • tauri.conf.json
    此文件允许您配置和自定义 Tauri 应用程序的各个方面，从应用程序的名称到允许的 API 列表。有关受支持选项的完整列表和每个选项的深入解释，请参阅 Tauri 的 API 配置。

  • src/main.rs
    这是 Rust 程序的入口点，也是我们引导 Tauri 的地方。您将在其中找到两个部分

    src/main.rs
     #![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]

    fn main() {
    tauri::Builder::default()
       .run(tauri::generate_context!())
       .expect("error while running tauri application");
    }

    以 cfg! 宏 开头的行只有一个目的：禁用命令提示符窗口，该窗口通常会在 Windows 上弹出如果您运行捆绑的应用程序。如果您在 Windows 上，请尝试将其注释掉并看看会发生什么。

    main 函数是入口点，也是程序运行时调用的第一个函数。

  • icons
    您很可能希望为您的应用程序添加一个时髦的图标！为了让您快速上手，我们包含了一组默认图标。您应该在发布应用程序之前将它们换掉。在 Tauri 的 图标功能指南 中了解有关各种图标格式的更多信息。

就是这样，您现在已将 Tauri 添加到现有项目中，您应该会看到一个类似以下内容的 src-tauri 目录

│── package.json
│── public
│   ╰── index.html
│── src
│   │── App.css
│   │── App.jsx
│   │── index.css
│   ╰── index.js
╰── src-tauri
    │── Cargo.toml
    │── build.rs
    │── icons
    │── src
    ╰── tauri.conf.json

调用命令​

Tauri 允许您使用本机功能增强前端。我们称之为 命令，本质上是您可以从前端 JavaScript 调用的 Rust 函数。这使您能够以性能更高的 Rust 代码处理繁重的处理或对操作系统的调用。

我们举一个简单的例子

src-tauri/src/main.rs
#[tauri::command]
fn greet(name: &str) -> String {
   format!("Hello, {}!", name)
}

命令就像任何常规 Rust 函数一样，另外还添加了 #[tauri::command] 属性宏，该宏允许您的函数与 JavaScript 上下文通信。

最后，我们还需要告知 Tauri 我们新创建的命令，以便它可以相应地路由调用。这可以通过以下所示的 .invoke_handler() 函数和 generate_handler![] 宏的组合来完成

src-tauri/src/main.rs
fn main() {
  tauri::Builder::default()
    .invoke_handler(tauri::generate_handler![greet])
    .run(tauri::generate_context!())
    .expect("error while running tauri application");
}

现在，你已准备好从前端调用你的命令！

有两种不同的方式可以从你的前端项目调用命令

  1. 使用 @tauri-apps/api JavaScript 库（首选）
  2. 使用 withGlobalTauri 来使用 Tauri API 的预捆绑版本

我们将在下面介绍这两种方法。

使用 JavaScript 库​

要调用我们新创建的命令，我们将使用 @tauri-apps/api JavaScript 库。它通过便捷的 JavaScript 抽象提供了对核心功能（如窗口、文件系统等）的访问。你可以使用你最喜欢的 JavaScript 包管理器来安装它

npm install @tauri-apps/api

你现在可以从库中导入 invoke 函数并使用它来调用我们的命令

src/App.jsx
import logo from './logo.svg';
import './App.css';

import { invoke } from '@tauri-apps/api'

function App() {
  // now we can call our Command!
  // Right-click the application background and open the developer tools.
  // You will see "Hello, World!" printed in the console!
  invoke('greet', { name: 'World' })
  // `invoke` returns a Promise
  .then((response) => console.log(response))

  return (
    // -- snip --
  )
}

使用 withGlobalTauri​

要在不使用 @tauri-apps/api JavaScript 包的情况下从你的前端与 Tauri 交互，你需要在你的 tauri.conf.json 文件中启用 withGlobalTauri

tauri.conf.json
{
  "build": {
    "beforeBuildCommand": "npm run build",
    "beforeDevCommand": "npm run dev",
    "devPath": "http://localhost:3000",
    "distDir": "../build",
    "withGlobalTauri": true
  },

这会将 API 函数的预捆绑版本注入到你的前端中。

你现在可以修改 App.jsx 文件来调用你的命令

src/App.js
import logo from './logo.svg';
import './App.css';

// access the pre-bundled global API functions
const { invoke } = window.__TAURI__.tauri

function App() {
  // now we can call our Command!
  // Right-click the application background and open the developer tools.
  // You will see "Hello, World!" printed in the console!
  invoke('greet', { name: 'World' })
  // `invoke` returns a Promise
  .then((response) => console.log(response))

  return (
    // -- snip --
  )
}

运行你的应用​

你现在可以在你的终端中运行以下命令来启动你的应用的开发构建

npm run tauri dev
提示

如果您想了解有关 Rust 和 JavaScript 之间通信的更多信息，请阅读 Tauri 进程间通信指南。