跳至主要内容

SvelteKit

本指南将指导你使用 SvelteKit 前端框架创建你的第一个 Tauri 应用程序。

信息

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

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

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

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

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

Application Preview

创建前端​

SvelteKit 是一个主要设计用于服务器端渲染 (SSR) 的 Svelte 前端。为了让 SvelteKit 与 Tauri 协同工作，我们将禁用 SSR 并使用 @sveltejs/adapter-static 基于静态站点生成 (SSG) 创建前端。

SvelteKit 提供了一个类似于 create-tauri-app 的脚手架实用程序，它可以快速设置一个新项目，并提供许多自定义选项。对于本指南，我们将选择 TypeScript 模板，并启用 ESLint 和 Prettier。

npm create svelte@latest

  1. 项目名称
    这将是你的 JavaScript 项目的名称。它对应于此实用程序将创建的文件夹的名称，但除此之外不会对你的应用程序产生任何影响。你可以在此处使用任何你想要的名称。

  2. 应用程序模板
    我们将选择 Skeleton project 作为基础模板。如果你想使用更完整的 SvelteKit 示例，可以选择 SvelteKit demo app。

  3. 类型检查
    你是否希望在你的项目中通过 JSDoc 或 TypeScript 进行类型检查。对于本指南，我们假设你选择了 TypeScript。

  4. 代码检查和格式化
    你是否希望使用 ESLint 进行代码检查和 Prettier 进行代码格式化来启动你的项目。本指南中不会对此进行其他说明，但我们建议启用这两个选项。

  5. 浏览器测试
    SvelteKit 为浏览器测试提供了内置的 Playwright 支持。由于 Tauri API 在 Playwright 中不起作用，我们建议不要添加它。查看我们的 WebDriver 文档，了解使用 Selenium 或 WebdriverIO 而不是 Playwright 的替代方案。

SSG 模式下的 SvelteKit​

首先，我们需要安装 @sveltejs/adapter-static

npm install --save-dev @sveltejs/adapter-static

然后更新 svelte.config.js 文件中的 adapter 导入

svelte.config.js
import adapter from '@sveltejs/adapter-static' // This was changed from adapter-auto
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'

/** @type {import('@sveltejs/kit').Config} */
const config = {
  // Consult https://kit.svelte.net.cn/docs/integrations#preprocessors
  // for more information about preprocessors
  preprocess: vitePreprocess(),

  kit: {
    adapter: adapter(),
  },
}

export default config

最后，我们需要通过添加一个根 +layout.ts 文件（如果你不使用 TypeScript，则为 +layout.js）来禁用 SSR 并启用预渲染，其中包含以下内容

src/routes/+layout.ts
export const prerender = true
export const ssr = false

请注意，static-adapter 不要求你为整个应用程序禁用 SSR，但它可以使用依赖于全局 window 对象（如 Tauri 的 API）的 API，而无需 客户端检查。

此外，如果您更喜欢 SPA（单页面应用程序）模式而不是 SSG，您可以根据适配器文档更改适配器配置和 +layout.ts。

创建 Rust 项目​

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

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

安装 Tauri CLI

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

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。

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

  5. 你的前端开发命令是什么？
    这是用于启动你的前端开发服务器的命令。
    使用 npm run dev（确保根据需要调整此命令以使用你选择的包管理器）。

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

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

现在我们已经构建了我们的前端并初始化了 Rust 项目，创建的 tauri.conf.json 文件应如下所示

src-tauri/tauri.conf.json
{
  "build": {
    // This command will execute when you run `tauri build`.
    "beforeBuildCommand": "npm run build",
    // This command will execute when you run `tauri dev`
    "beforeDevCommand": "npm run dev",
    "devPath": "http://localhost:5173",
    "distDir": "../build"
  },

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

npm run tauri dev

Application Window

调用命令​

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 JavaScript 库。它通过便捷的 JavaScript 抽象提供了对核心功能（例如窗口、文件系统等）的访问。您可以使用您最喜欢的 JavaScript 包管理器安装它

npm install @tauri-apps/api

安装库后，我们现在可以创建一个新的 Svelte 组件。我们将在 src/lib/Greet.svelte 中创建它

src/lib/Greet.svelte
<script>
  import { invoke } from '@tauri-apps/api/tauri'

  let name = ''
  let greetMsg = ''

  async function greet() {
    greetMsg = await invoke('greet', { name })
  }
</script>

<div>
  <input id="greet-input" placeholder="Enter a name..." bind:value="{name}" />
  <button on:click="{greet}">Greet</button>
  <p>{greetMsg}</p>
</div>

现在您可以将此组件添加到 src/routes/+page.svelte

src/routes/+page.svelte
<script>
  import Greet from '../lib/Greet.svelte'
</script>

<h1>Welcome to SvelteKit</h1>
<Greet />

现在您可以使用 npm run tauri dev 运行它并查看结果

Application Preview

提示

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