HTML、CSS 和 JavaScript

本指南将指导你仅使用 HTML、CSS 和 JavaScript 创建你的第一个 Tauri 应用程序。如果你不熟悉 Web 开发，这可能是最好的起点。

信息

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

Tauri 是一个使用任何前端框架和 Rust 内核构建桌面应用程序的框架。每个应用程序由两部分组成

创建窗口并将本机功能公开给这些窗口的 Rust 二进制文件
你选择的用于在窗口内生成用户界面的前端

接下来，我们将首先构建前端，设置 Rust 项目，最后向你展示如何在两者之间进行通信。

create-tauri-app

构建新项目最简单的方法是 create-tauri-app 实用程序。它为基本的 HTML/CSS/JavaScript 和许多前端框架（如 React、Svelte 和 Yew）提供了自以为是的模板。

sh <(curl https://create.tauri.app/sh)

irm https://create.tauri.app/ps | iex

cargo install create-tauri-app --locked
cargo create-tauri-app

npm create tauri-app@latest

yarn create tauri-app

pnpm create tauri-app

bunx create-tauri-app

请注意，如果您使用 create-tauri-app，则无需遵循本指南的其余部分，但我们仍然建议您阅读它以了解设置。

以下是我们即将构建内容的预览

Preview of Application

创建前端

我们将使用 HTML 文件创建一个非常小的 UI。为了保持整洁，我们为其创建一个单独的文件夹

mkdir ui

接下来，在该文件夹中创建一个 index.html 文件，其内容如下

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>Welcome from Tauri!</h1>
  </body>
</html>

我们将为本指南保留最小的 UI，但您可以随意使用更多内容或通过 CSS 添加样式。

创建 Rust 项目

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

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

安装 Tauri CLI

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

npm
Yarn
pnpm
Bun
Cargo

npm install --save-dev @tauri-apps/cli

要让 npm 正确检测 Tauri，你需要将其添加到 package.json 文件中的“scripts”部分

package.json
"scripts": {
  "tauri": "tauri"
}

yarn add -D @tauri-apps/cli

pnpm add -D @tauri-apps/cli

bun add -D @tauri-apps/cli

cargo install tauri-cli

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

npm
Yarn
pnpm
Bun
Cargo

npm run tauri init

yarn tauri init

pnpm tauri init

bunx tauri init

cargo tauri init

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

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

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

你的 Web 资产 (HTML/CSS/JS) 相对于将创建的 <current dir>/src-tauri/tauri.conf.json 文件位于何处？
这是 Tauri 在为生产构建时将从中加载你的前端资产的路径。
为此值使用 ../ui。

你的开发服务器的 URL 是什么？
这可以是 URL 或文件路径，Tauri 将在开发期间加载该 URL 或文件路径。
为此值使用 ../ui。

你的前端开发命令是什么？
这是用于启动你的前端开发服务器的命令。
你可以将其留空，因为无需编译任何内容。

你的前端构建命令是什么？
这是用于构建你的前端文件的命令。
你可以将其留空，因为无需编译任何内容。

信息

如果你熟悉 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 的图标功能指南中了解有关各种图标格式的更多信息。

就是这样！现在，你可以在终端中运行以下命令来启动应用程序的开发构建

npm
Yarn
pnpm
bun
Cargo

npm run tauri dev

yarn tauri dev

pnpm tauri dev

bunx tauri dev

cargo tauri dev

应用程序预览

Development Progress

调用命令

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");
}

现在你可以从前端调用你的命令了！

我们通常会在此处推荐 @tauri-apps/api 包，但由于我们没有为此指南使用捆绑器，请在你的 tauri.conf.json 文件中启用 withGlobalTauri

tauri.conf.json
{
  "build": {
    "beforeBuildCommand": "",
    "beforeDevCommand": "",
    "devPath": "../ui",
    "distDir": "../ui",
    "withGlobalTauri": true
  },

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

你现在可以修改你的 index.html 文件以调用你的命令

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1 id="header">Welcome from Tauri!</h1>
    <script>
      // access the pre-bundled global API functions
      const { invoke } = window.__TAURI__.tauri

      // now we can call our Command!
      // You will see "Welcome from Tauri" replaced
      // by "Hello, World!"!
      invoke('greet', { name: 'World' })
        // `invoke` returns a Promise
        .then((response) => {
          window.header.innerHTML = response
        })
    </script>
  </body>
</html>

提示

如果你想进一步了解 Rust 和 JavaScript 之间的通信，请阅读 Tauri 进程间通信指南。

HTML、CSS 和 JavaScript

创建前端​

创建 Rust 项目​

调用命令​

创建前端

创建 Rust 项目

调用命令