跳至主要内容

多窗口

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

创建窗口​

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

静态窗口​

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

{
  "tauri": {
    "windows": [
      {
        "label": "external",
        "title": "Tauri Docs",
        "url": "https://tauri.org.cn"
      },
      {
        "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.org.cn/".parse().unwrap())
    ).build()?;
    let local_window = tauri::WindowBuilder::new(
      app,
      "local",
      tauri::WindowUrl::App("index.html".into())
    ).build()?;
    Ok(())
  })
  .run(tauri::generate_context!())
  .expect("error while running app");

使用设置挂钩可确保静态窗口和 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.org.cn/".parse().unwrap())
).build().expect("failed to build window");

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

// This will start the app and no other code below this will run.
app.run(|_, _| {});

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

使用 AppHandle 实例创建窗口​

可以使用 [App::handle] 函数获得 AppHandle 实例，或直接注入 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.org.cn/".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
})

创建其他 HTML 页面​

如果您想创建除 index.html 之外的其他页面，您需要确保它们在构建时存在于 dist 目录中。具体做法取决于您的前端设置。如果您使用 Vite，请在 vite.config.js 中为第二个 HTML 页面创建一个其他 输入。

在运行时访问窗口​

可以使用其标签和 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')

与其他窗口通信​

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