SvelteKit

本指南将引导您使用 SvelteKit 框架创建您的第一款 Tauri 应用程序。

Tauri 由一个可搭配任何前端来构建桌面应用的框架和 Rust 核心构成。 每个应用均由两个部分组成：

1. 创建窗口并向其提供原生功能支持的 Rust 二进制文件
2. 由您选择的前端框架，用于编写窗口内的用户界面

接下来，我们会先搭建好前端框架，然后设置一个Rust工程，最后向你展示这两者之间如何通信。

这是我们将要构建的内容的预览：

创建前端

SvelteKit 是一个 Svelte 前端，主要用于服务器端渲染（SSR）。为了使 SvelteKit 和 Tauri 正常工作，需要关闭 SSR 并且使用 @sveltejs/adapter-static 创建基于前端的静态页面生成 (SSG).

SvelteKit 自带的脚手架工具类似于 create-tauri-app，可以快速创建一个具有许多自定义选项的新项目。在本指南中，我们将选择 TypeScript 模板，并启用 ESLint 和 Prettier。

1. Project name
   这将是 JavaScript 项目的名称。与本实用程序将创建的文件夹名称相对应，但对应用程序没有其他影响。您可以在此处使用任何您想要的名称。

2. App template
   我们将选择 Skeleton project作为基本模板。如果你想体验更完整的 SvelteKit 示例，可以选择 SvelteKit demo app。

3. Type checking
   您希望在项目中通过 JSDoc 还是 TypeScript 进行类型检查。在本指南中，我们假设你选择 TypeScript。

4. Code linting and formatting
   您是否希望在项目开始时使用 ESLint（用于代码检查）和 Prettier（用于代码格式化）。本指南中不会提及其他相关内容，但我们建议启用这两个选项。

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

在 SvelteKit 使用 SSG 模式

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

然后更新adapter导入到 svelte.config.js 文件：

import adapter from '@sveltejs/adapter-static' // 这将会通过 adapter-auto 更改
import preprocess from 'svelte-preprocess'

/** @type {import('@sveltejs/kit').Config} */
const config = {
  // 查询 https://github.com/sveltejs/svelte-preprocess
  // 以了解更多关于预处理器的信息
  preprocess: preprocess(),

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

export default config

最后，我们需要禁用 SSR 并启用预渲染，方法是添加一个包含这些内容的 +layout.ts 根文件（如果不使用 TypeScript，则为 +layout.js）：

export const prerender = true
export const ssr = false

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

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

创建 Rust 项目

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

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

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

它会向您询问几个问题：

1. 您应用的名字是什么？
   这将会是您打包后和操作系统会调用的应用名称。 您可以在此处填写任何您想要的名称。
2. 窗口标题叫什么？
   这将会是您主窗口的默认标题。 您可以在此处填写任何您想要的名称。
3. 前端页面资源 (HTML/CSS/JS) 相对于 <current dir>/src-tauri/tauri.conf.json 文件将被创建的位置？
   这是生产环境时tauri加载web前端资源的目录.
   此值使用../build。
4. 开发环境时的加载路径?
   这可以是一个 URL 或文件路径，Tauri 将在开发过程中加载该 URL 或文件路径。
   此值使用http://localhost:5173。
5. 你将使用什么命令来开发前端页面？
   这是启动前端开发服务器的命令。
   使用npm run dev (请确保将其调整为使用您选择的软件包管理器)。
6. 你将使用什么命令来构建前端页面？
   这是构建前端文件的命令。

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 文件应该如下所示：

{
  "build": {
    // 当你运行 `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"
  },

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

调用指令

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

现在您的前端可以调用刚注册的指令了！

使用 @tauri-apps/api JavaScript 库来调用新创建的命令， 通过 JavaScript 访问诸如窗口、文件系统等核心功能， 您可以使用自己喜欢的 JavaScript 包管理器来安装。

安装依赖库后，我们现在可以创建一个新的 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:

<script>
  import Greet from '../lib/Greet.svelte'
</script>

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

现在，您可以使用 npm run tauri dev 运行该程序并查看结果：