Tauri 2 使用教程

官方网站

Tauri 是什么？

Tauri 是一个构建适用于所有主流桌面和移动平台的轻快二进制文件的框架。开发者们可以集成任何用于创建用户界面的可以被编译成 HTML、JavaScript 和 CSS 的前端框架，同时可以在必要时使用 Rust、Swift 和 Kotlin 等语言编写后端逻辑。

前置要求

系统依赖项

Windows

Tauri 使用 Microsoft C++ 构建工具进行开发以及 Microsoft Edge WebView2。这些都是在 Windows 上进行开发所必需的。

按照以下步骤安装所需的依赖项。

Microsoft C++ 构建工具

• 下载 Microsoft C++ 构建工具 安装程序并打开它以开始安装。
• 在安装过程中，选中“使用 C++ 进行桌面开发”选项。

WebView2

WebView 2 已安装在 Windows 10（从版本 1803 开始）和更高版本的 Windows 上。如果你正在这些版本之一上进行开发，则可以跳过此步骤并直接转到 下载并安装 Rust。

Tauri 使用 Microsoft Edge WebView2 在 Windows 上呈现内容。

通过访问 WebView2 Runtime 下载区 安装 WebView2。下载“常青版独立安装程序（Evergreen Boostrapper）”并安装它。

MacOS

Tauri 使用 Xcode 以及各种 macOS 和 iOS 开发依赖项。

从以下位置之一下载并安装 Xcode：

• Mac App Store
• Apple Developer 网站

请务必在安装后启动 Xcode，以使它完成设置。

下载并安装 Rust

Tauri 使用 Rust 构建并需要它进行开发。使用以下方法之一安装 Rust。你可以在 https://www.rust-lang.org/tools/install 查看更多安装方法。

Linux/MacOs

curl --proto '=https' --tlsv1.2 https://sh.rustup.rs -sSf | sh

Windows

前往 https://www.rust-lang.org/tools/install 下载 rustup。

或者，你可以在 PowerShell 中使用 winget 安装 rustup：

winget install --id Rustlang.Rustup

创建项目

使用 create-tauri-app

npm create tauri-app@latest

我们建议从基础模板开始（使用 HTML、CSS 和 JavaScript，不使用前端框架），以便快速入门。随后您可以随时引入前端框架。

• 选择您的前端语言：TypeScript / JavaScript
• 选择您的包管理器：pnpm
• 选择您的 UI 模板：Vanilla
• 选择您的 UI 风格：TypeScript

在 create-tauri-app 创建完项目后，您可以进入项目文件夹，安装依赖，然后使用 Tauri CLI 启动开发服务器：

cd tauri-app
npm install
npm run tauri dev

常用功能

System Tray (系统托盘)

Tauri 允许您为您的应用程序创建和自定义系统托盘。这可以通过提供对常见操作的快速访问来增强用户体验。

配置

首先，更新您的Cargo.toml，以包括系统托盘的必要功能。

# src-tauri/Cargo.toml

tauri = { version = "2.0.0", features = [ "tray-icon" ] }

JavsScript 用法

创建托盘图标

使用 TrayIconTrayIcon.new静态功能创建新的托盘图标：

import { TrayIcon } from "@tauri-apps/api/tray";

const options = {
  // here you can add a tray menu, title, tooltip, event handler, etc
};

const tray = await TrayIcon.new(options);

有关自定义选项的更多信息，请参阅TrayIconOptions。

更改托盘图标

创建托盘时，您可以使用应用程序图标作为托盘图标：

import { TrayIcon } from "@tauri-apps/api/tray";

const options = {
  icon: "icons/32x32.png",
};

const tray = await TrayIcon.new(options);

添加菜单和事件

要附加在点击托盘时显示的菜单，您可以使用 menu 选项。

import { TrayIcon } from '@tauri-apps/api/tray';
import { Menu } from '@tauri-apps/api/menu';
import { getCurrentWindow } from "@tauri-apps/api/window"; // 获取当前窗口
import { exit } from "@tauri-apps/plugin-process"; // 进程管理

const menu = await Menu.new({
    [
      {
        id: "show",
        text: "显示窗口",
        action: () => {
          winShowFocus();
        },
      },
      {
        id: "quit",
        text: "退出",
        action: () => {
          exit(0);
        },
      },
    ],
});

const options = {
  menu,
  menuOnLeftClick: false,
};

async function winShowFocus() {
  const win = getCurrentWindow();
  if (!(await win.isVisible())) {
    win.show();
  } else {
    if (await win.isMinimized()) {
      await win.unminimize();
    }
    await win.setFocus();
  }
}

const tray = await TrayIcon.new(options);

显示窗口

tauri 遵循最小权限原则，在运行中可能会碰到如下权限不足的问题：

在 src-tauri/capabilities/default.json 文件的 permissions 属性数组中加入这几个权限：

{
  "permissions": [
    "core:window:allow-set-focus",
    "core:window:allow-close",
    "core:window:allow-show",
    "core:window:allow-is-visible",
    "core:window:allow-unminimize",
    "core:window:allow-is-minimized"
  ]
}

退出/重启应用

npm run tauri add process

引入 API

import { exit, relaunch } from ‘@tauri-apps/plugin-process’;

// 退出应用
await exit(0);
// 重启应用
await relaunch();