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 crate 来管理窗口、webview 和对操作系统的调用。此项目由Cargo管理，Cargo 是 Rust 的官方包管理器和通用构建工具。

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

安装 Tauri CLI

如果您尚未安装 Tauri CLI，可以使用以下命令之一进行安装。不确定使用哪个？查看常见问题解答条目。

npm
Yarn
pnpm
Bun
Cargo

npm install --save-dev @tauri-apps/cli@">1.0.0"

为了让 npm 正确检测 Tauri，您需要将其添加到 `package.json` 文件的 "scripts" 部分

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

yarn add -D @tauri-apps/cli@^1.0.0

pnpm add -D @tauri-apps/cli@1

bun add -D @tauri-apps/[email protected]

cargo install tauri-cli --version "^1.0.0"

要搭建一个预先配置为使用 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）相对于将要创建的 <当前目录>/src-tauri/tauri.conf.json文件位于哪个位置？
这是 Tauri 在构建**生产环境**版本时将从中加载前端资源的路径。
为此值使用../ui。

您的开发服务器的 URL 是什么？
这可以是 Tauri 在 开发过程中将加载的 URL 或文件路径.
为此值使用../ui。

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

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

信息

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

tauri init命令会生成一个名为src-tauri的文件夹。对于 Tauri 应用来说，将所有核心相关文件放在此文件夹中是一种约定。让我们快速浏览一下此文件夹的内容

Cargo.toml
Cargo 的清单文件。您可以声明您的应用依赖的 Rust crate、关于您的应用的元数据等等。有关完整参考，请参阅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 的图标功能指南中了解有关各种图标格式的更多信息。

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

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 项目

调用命令