Electron Desktop App Development · Lekcja

Zarządzanie wieloma oknami

Nauczą się Państwo tworzyć, koordynować i komunikować między wieloma instancjami BrowserWindow — to kluczowa umiejętność rozwijająca podstawy procesu głównego i IPC.

Zarządzanie wieloma oknami to bezpłatna lekcja Electron Desktop App Development na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Electron Desktop App Development, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Electron Desktop App Development zawiera 4 lekcji w sumie.

Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.

Beyond a Single Window

Real desktop apps often need multiple windows: a main editor, a settings panel, a preview. The main process owns and tracks all of them.

Creating a Window

Each window is a BrowserWindow instance created in the main process.

const { BrowserWindow } = require('electron');
function createWindow() {
  const win = new BrowserWindow({ width: 600, height: 400 });
  win.loadFile('index.html');
  return win;
}

Keeping References

If you do not keep a reference, the window can be garbage collected. Store windows in a variable or array.

let windows = [];
function track(win) {
  windows.push(win);
  win.on('closed', () => {
    windows = windows.filter(w => w !== win);
  });
}

Parent and Child Windows

You can make one window the parent of another. Child windows move with the parent and can be modal.

new BrowserWindow({
  parent: mainWindow,
  modal: true,
  width: 300,
  height: 200
});

Window-to-Window Messaging

Windows do not share memory. They communicate through the main process using IPC as a relay.

ipcMain.on('to-other', (e, msg) => {
  otherWindow.webContents.send('from-main', msg);
});

Identifying Windows

Each window has a unique id. Use it to target a specific window when relaying messages.

function findWindow(id, list) {
  return list.find(w => w.id === id);
}
console.log(findWindow(2, [{ id: 1 }, { id: 2 }]));

Showing Windows Gracefully

Avoid a white flash by creating windows hidden and showing them once ready.

const win = new BrowserWindow({ show: false });
win.once('ready-to-show', () => win.show());

Managing Focus

Use focus() and the blur event to know which window the user is interacting with, useful for save prompts.

Closing and Cleanup

Listen for close to prompt for unsaved changes, and closed to release references.

win.on('close', (e) => {
  if (hasUnsaved) {
    e.preventDefault();
  }
});

Single Instance Lock

Use app.requestSingleInstanceLock() to focus the existing window instead of opening duplicates.

Coordinating State

Centralize shared state in the main process so every window reads from one source of truth, avoiding drift.

Quick Check

Test your window management knowledge.

Recap

You learned to create and track multiple BrowserWindow instances, manage parent/child relationships, relay messages via the main process, and clean up references properly.

Często zadawane pytania

Czy lekcja „Zarządzanie wieloma oknami” jest bezpłatna?

Tak — pełny tekst „Zarządzanie wieloma oknami” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Electron Desktop App Development, przejdź na CoddyKit PRO. Kurs Electron Desktop App Development zawiera 4 lekcji w sumie.

Co nauczysz się w „Zarządzanie wieloma oknami”?

Nauczą się Państwo tworzyć, koordynować i komunikować między wieloma instancjami BrowserWindow — to kluczowa umiejętność rozwijająca podstawy procesu głównego i IPC. Ćwiczysz Electron Desktop App Development z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Electron Desktop App Development?

Nie wymagamy żadnego doświadczenia. Electron Desktop App Development w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Zarządzanie wieloma oknami”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Electron Desktop App Development?

Tak. Każda lekcja Electron Desktop App Development zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Electron Desktop App Development