多窗口

管理单个应用程序上的多个窗口。

创建窗口

可以从 Tauri 配置文件或在运行时静态创建窗口。

静态窗口

可以使用 tauri.windows 配置数组创建多个窗口。 下面的 JSON 代码片段演示如何通过配置静态创建几个窗口：

{
  "tauri": {
    "windows": [
      {
        "label": "external",
        "title": "Tauri Docs",
        "url": "https://tauri.app"
      },
      {
        "label": "local",
        "title": "Tauri",
        "url": "index.html"
      }
    ]
  }
}

注意，窗口标签必须是唯一的，并且可以在运行时用于访问窗口实例。 静态窗口可用的配置选项的完整列表可以在WindowConfig中找到。

运行时窗口

还可以通过 Rust 层或 Tauri API 在运行时创建窗口。

在 Rust 中创建窗口

窗口可以在运行时使用 WindowBuilder 结构体创建。

要创建一个窗口，必须有一个正在运行的 App 的实例或一个 AppHandle。

使用 App 实例创建一个窗口

App 实例可以在安装钩子中获取，也可以在调用 Builder::build 之后获取。

tauri::Builder::default()
  .setup(|app| {
    let docs_window = tauri::WindowBuilder::new(
      app,
      "external", /* the unique window label */
      tauri::WindowUrl::External("https://tauri.app/".parse().unwrap())
    ).build()?;
    let local_window = tauri::WindowBuilder::new(
      app,
      "local",
      tauri::WindowUrl::App("index.html".into())
    ).build()?;
    Ok(())
  })

使用设置钩子确保静态窗口和 Tauri 插件已初始化。 或者，可以在构建 App 后创建一个窗口：

let app = tauri::Builder::default()
  .build(tauri::generate_context!())
  .expect("error while building tauri application");

let docs_window = tauri::WindowBuilder::new(
  &app,
  "external", /* the unique window label */
  tauri::WindowUrl::External("https://tauri.app/".parse().unwrap())
).build().expect("failed to build window");

let local_window = tauri::WindowBuilder::new(
  &app,
  "local",
  tauri::WindowUrl::App("index.html".into())
).build()?;

当无法将值的所有权移动到设置闭包时，此方法非常有用。

使用 AppHandle 实例创建一个窗口

AppHandle 实例可以使用 [App::handle] 函数获得，也可以直接注入 Tauri 命令。

tauri::Builder::default()
  .setup(|app| {
    let handle = app.handle();
    std::thread::spawn(move || {
      let local_window = tauri::WindowBuilder::new(
        &handle,
        "local",
        tauri::WindowUrl::App("index.html".into())
      ).build()?;
    });
    Ok(())
  })

#[tauri::command]
async fn open_docs(handle: tauri::AppHandle) {
  let docs_window = tauri::WindowBuilder::new(
    &handle,
    "external", /* the unique window label */
    tauri::WindowUrl::External("https://tauri.app/".parse().unwrap())
  ).build().unwrap();
}

信息

当在 Tauri 命令中创建窗口时，确保命令函数是 async，以避免由于 wry#583 问题而导致的 windows 死锁。

在 JavaScript 中创建窗口

使用 Tauri API，可以通过导入 WebviewWindow 类轻松地在运行时创建一个窗口。

import { WebviewWindow } from '@tauri-apps/api/window'
const webview = new WebviewWindow('theUniqueLabel', {
  url: 'path/to/page.html',
})
// since the webview window is created asynchronously,
// Tauri emits the `tauri://created` and `tauri://error` to notify you of the creation response
webview.once('tauri://created', function () {
  // webview window successfully created
})
webview.once('tauri://error', function (e) {
  // an error occurred during webview window creation
})

Creating additional HTML pages

If you want to create additional pages beyond index.html, you will need to make sure they are present in the dist directory at build time. How you do this depends on your frontend setup. If you use Vite, create an additional input for the second HTML page in vite.config.js.

运行时访问窗口

可以使用它的标签和 Rust 上的 get_window 方法或 JavaScript 上的 WebviewWindow.getByLabel 查询窗口实例。

use tauri::Manager;
tauri::Builder::default()
  .setup(|app| {
    let main_window = app.get_window("main").unwrap();
    Ok(())
  })

注意，必须导入 tauri::Manager 才能在 App 或 AppHandle 实例上使用 get_window 方法。

import { WebviewWindow } from '@tauri-apps/api/window'
const mainWindow = WebviewWindow.getByLabel('main')

与其它窗口通信

窗口通信可以使用事件系统完成。 有关更多信息，请参阅 事件指南。