본문으로 건너뛰기

멀티 윈도우

단일 애플리케이션에서 멀티 윈도우 관리하기.

윈도우 생성하기

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 명령으로 윈도우를 만들 때 wry#583 이슈로 인해 Windows에서 교착 상태가 발생하지 않도록 명령 기능이 async인지 확인해야 합니다.

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
})

런타임에 윈도우 접근하기

윈도우 인스턴스는 인스턴스 자체 레이블, Rust의 get_window 함수, JavaScript의 WebviewWindow.getByLabel을 사용하여 질의할 수 있습니다.

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

App 또는 AppHandle 인스턴스에서 get_window 함수를 사용하려면 tauri::Manager를 가져와야 합니다.

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

다른 윈도우와 통신하기

윈도우 간 통신은 이벤트 시스템을 통해 할 수 있습니다. 자세한 내용은 Event 안내서를 확인하세요.