跳至主要內容

多視窗

在單一應用程式中管理多個視窗。

建立視窗​

視窗可以從 Tauri 設定檔靜態建立，或是在執行階段建立。

靜態視窗​

可以使用 tauri.windows 設定陣列建立多個視窗。以下 JSON 片段示範如何透過設定檔靜態建立多個視窗

{
  "tauri": {
    "windows": [
      {
        "label": "external",
        "title": "Tauri Docs",
        "url": "https://tauri.dev.org.tw"
      },
      {
        "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.dev.org.tw/".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.dev.org.tw/".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.dev.org.tw/".parse().unwrap())
  ).build().unwrap();
}
資訊

在 Tauri 命令中建立視窗時，請確保命令函式為 async，以避免 Windows 上因 wry#583 問題而導致死結。

在 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')

與其他視窗通訊​

視窗通訊可以使用事件系統。請參閱 事件指南 以取得更多資訊。