多窗口

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

创建窗口

窗口可以通过 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 实例创建窗口

可以通过设置钩子或调用 Builder::build 获取App实例。

tauri::Builder::default()
  .setup(|app| {
    let docs_window = tauri::WindowBuilder::new(
      app,
      "external", /* 唯一的窗口标签 */
      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(())
  })
  .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", /* 唯一的窗口标签 */
  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()?;

// 这将启动app，在此代码之下的其他代码将不会运行。
app.run(|_, _| {});

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

使用 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", /* 唯一的窗口标签 */
    tauri::WindowUrl::External("https://www.tauri.net.cn/".parse().unwrap())
  ).build().unwrap();
}

用 JavaScript 创建窗口

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

import { WebviewWindow } from '@tauri-apps/api/window'
const webview = new WebviewWindow('theUniqueLabel', {
  url: 'path/to/page.html',
})
// 因为webview窗口是异步创建的、
// Tauri 发出 `tauri://created` 和 `tauri://error` 以通知您创建响应
webview.once('tauri://created', function () {
  // 成功创建 webview 窗口
})
webview.once('tauri://error', function (e) {
  // 创建 Webview 窗口时发生错误
})

创建其他 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')

与其他窗口通信

窗口通信可通过事件系统完成。更多信息，请参阅事件指南。