集成到已有项目

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

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

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

创建 Rust 项目

每款 Tauri 应用的核心都是由一个管理窗口的 Rust 二进制文件、WebView 和进行系统调用的 tauri Rust 包构成。 此项目使用官方的软件包管理器及 Rust 通用构建工具 Cargo 来管理。

我们的 Tauri CLI 工具会在底层自动调用 Cargo，所以您大部分情况下无需和其交互。 Cargo 有诸多我们的 CLI 工具所未提供的有用功能，包括测试、分析及格式化工具。请参阅其官方文档来了解更多。

要搭建一个使用 Tauri 的简单 Rust 项目，请打开终端并运行如下命令：

它会向您询问几个问题：

1. What is your app name?
   这将会是您打包后和操作系统会调用的应用名称。 您可以在此处填写任何您想要的名称。
2. What should the window title be?
   这将会是您主窗口的默认标题。 您可以在此处填写任何您想要的名称。
3. Where are your web assets (HTML/CSS/JS) located relative to the <current dir>/src-tauri/tauri.conf.json file that will be created?
   这是 Tauri 为生产构建时加载前端资源的路径。
   在本指南的项目示例中，它是 ../build。请注意，如果你使用的是不同的框架，它可能是不同的，比如 ../dist。
4. What is the URL of your dev server?
   这可以是一个 URL 或文件路径，Tauri 将在开发过程中加载该 URL 或文件路径。
   在本指南的项目示例中，它是 http://localhost:3000。请注意，如果使用的是不同的框架，它可能是不同的内容（甚至是一个目录）。
5. What is your frontend dev command?
   这是用于启动前端开发服务器的命令。
   对于本指南中的项目示例，这是 npm run start（请务必根据自己选择的软件包管理器进行调整）。
6. What is your frontend build command?
   这是构建前台文件的命令。
   对于本指南中的项目示例，这是 npm run build（请务必根据自己选择的软件包管理器进行调整）。

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 函数是您程序的入口点，也是运行时调用的第一个函数。

• 图标
  您可能想为自己的应用整一个漂亮的图标！ 为了帮助您快速开发，我们为您提供了一套默认图标。 您应该在发布前把这些图标换成您自己的图标。 您可以在 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 代码处理繁重的任务或系统调用。

以下是一个简单示例：

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

一个指令等于一个普通的 Rust 函数，只是还加上了 #[tauri::command] 宏来让其与您的 JavaScript 环境交互。

最后，我们需要让 Tauri 知悉您刚创建的指令才能让其调用。 我们需要使用 .invoke_handler() 函数及 Generate_handler![] 宏来注册指令：

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 包管理器来安装。

您现在可以从库中导入 invoke 函数并使用它来调用命令：

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

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

function App() {
  // now we can call our Command!
  // 在应用窗口中右键，打开开发者工具
  // 你会看到控制台上输出了 "Hello, World!"！
  invoke('greet', { name: 'World' })
  // `invoke` 返回异步函数
  .then((response) => console.log(response))

  return (
    // -- snip --
  )
}

使用 withGlobalTauri

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

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

此选项会将已打包版本的 API 函数注入到您的前端中。

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

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!
  // 在应用窗口中右键，打开开发者工具
  // 你会看到控制台上输出了 "Hello, World!"！
  invoke('greet', { name: 'World' })
  // `invoke` 返回异步函数
  .then((response) => console.log(response))

  return (
    // -- snip --
  )
}

运行您的应用程序

现在您可以在您的终端中运行接下来的命令来开始您的应用程序的开发构建：