Ereignisse im App-Lebenszyklus verwalten
Behandeln Sie verschiedene Ereignisse im Lebenszyklus der Anwendung wie `ready`, `window-all-closed`, `activate` und `quit`, um ein korrektes Anwendungsverhalten sicherzustellen.
Ereignisse im App-Lebenszyklus verwalten ist eine kostenlose Electron Desktop App Development-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Electron Desktop App Development-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Electron Desktop App Development-Kurs umfasst insgesamt 4 Lektionen.
Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.
App's Journey: Lifecycle Events
Just like people, software applications have a lifecycle! They start, run, and eventually close. In Electron, these stages are managed through "lifecycle events".
- These events let your app react to important moments, like when it's ready to show a window or when all its windows are closed.
- Properly handling them ensures your app behaves predictably and professionally on different operating systems.
Meet the `app` Module
Electron provides a special module called app. This module is the heart of your application's lifecycle management.
- You use the
appmodule to control your application's events. - It allows you to listen for events like when the app is ready, when windows close, or when the app is about to quit.
- It also provides methods to manage the app, such as quitting or restarting.
App is Ready! The `ready` Event
The ready event is the most fundamental lifecycle event. It fires when Electron has finished initializing and is ready to create browser windows and interact with the system.
You must wait for this event before performing most operations. Try running this simple example:
const { app } = require('electron');
app.on('ready', () => {
console.log('Electron app is ready!');
// In a real app, you'd create windows here.
});
// Minimal handler to allow the app to quit when needed
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});Launching Your First Window
The ready event is typically where you create your application's main window. This ensures the Electron environment is fully initialized before the UI appears.
We import BrowserWindow and create an instance, loading simple HTML content directly.
const { app, BrowserWindow } = require('electron');
let mainWindow;
function createWindow () {
mainWindow = new BrowserWindow({
width: 400,
height: 300
});
// Load a simple HTML string directly for a self-contained example
mainWindow.loadURL('data:text/html;charset=utf-8,<h1>Hello Electron!</h1><p>This is your window.</p>');
mainWindow.on('closed', () => {
mainWindow = null;
});
}
app.on('ready', createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});Closing All Windows? `window-all-closed`
The window-all-closed event fires when all of your application's windows have been closed. How you respond depends on the operating system.
- On Windows and Linux, apps usually quit when all windows close.
- On macOS, apps often stay active in the dock.
This code ensures the app quits on Windows/Linux but stays open on macOS.
const { app, BrowserWindow } = require('electron');
let mainWindow;
function createWindow () {
mainWindow = new BrowserWindow({
width: 400,
height: 300
});
mainWindow.loadURL('data:text/html;charset=utf-8,<h1>Close Me!</h1>');
mainWindow.on('closed', () => {
mainWindow = null;
});
}
app.on('ready', createWindow);
app.on('window-all-closed', () => {
// On macOS, it's common for apps to remain active in the dock
// until the user quits explicitly with Cmd + Q.
if (process.platform !== 'darwin') {
app.quit();
}
});Reactivating Your macOS App
The activate event is specific to macOS. It fires when the application is activated, typically when the user clicks on the app's icon in the dock, but no windows are currently open.
This is where you'd re-create a window if mainWindow is null.
const { app, BrowserWindow } = require('electron');
let mainWindow;
function createWindow () {
mainWindow = new BrowserWindow({
width: 400,
height: 300
});
mainWindow.loadURL('data:text/html;charset=utf-8,<h1>Activated!</h1><p>A new window was opened.</p>');
mainWindow.on('closed', () => {
mainWindow = null;
});
}
app.on('ready', createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
// On macOS, re-create a window when the dock icon is clicked
// and there are no other windows open.
if (mainWindow === null) {
createWindow();
}
});Last Chance: `will-quit`
The will-quit event fires just before the application begins to close its windows and quit. This is your last opportunity to perform synchronous cleanup operations.
- For example, you might save unsaved data or close database connections.
- This event is emitted before the
quitevent.
const { app, BrowserWindow } = require('electron');
let mainWindow;
function createWindow () {
mainWindow = new BrowserWindow({
width: 400,
height: 300
});
mainWindow.loadURL('data:text/html;charset=utf-8,<h1>Will Quit Demo</h1>');
mainWindow.on('closed', () => { mainWindow = null; });
}
app.on('ready', createWindow);
app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit(); } });
app.on('activate', () => { if (mainWindow === null) { createWindow(); } });
app.on('will-quit', (event) => {
console.log('Application is about to quit! Performing final cleanup...');
// event.preventDefault(); // Uncomment to prevent quitting
// Perform synchronous cleanup here, e.g., save data.
});The Final Goodbye: `quit`
The quit event is emitted when the application successfully exits. By this point, all windows have been closed, and the main process is shutting down.
- This event is primarily for logging or very simple, final notifications.
- It's generally too late to perform significant cleanup or prevent the app from quitting.
const { app, BrowserWindow } = require('electron');
let mainWindow;
function createWindow () {
mainWindow = new BrowserWindow({
width: 400,
height: 300
});
mainWindow.loadURL('data:text/html;charset=utf-8,<h1>Quit Demo</h1>');
mainWindow.on('closed', () => { mainWindow = null; });
}
app.on('ready', createWindow);
app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit(); } });
app.on('activate', () => { if (mainWindow === null) { createWindow(); } });
app.on('will-quit', () => { console.log('Will quit...'); });
app.on('quit', (event, exitCode) => {
console.log(`Application has quit with code: ${exitCode}`);
// This is the very last event.
});Lifecycle Event Check
You've learned about several key Electron application lifecycle events. Now, let's test your understanding!
Lifecycle Events: Key Takeaways
Great job! You've learned how to manage your Electron application's lifecycle, ensuring it starts, runs, and quits gracefully on different operating systems.
- The
appmodule is central to event handling. readyis crucial for initialization and window creation.window-all-closedandactivatehandle window behavior across platforms.will-quitandquitmanage the final stages of app termination.
Mastering these events is fundamental for building robust Electron applications. Keep practicing!
Lerne JavaScript mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 12
- Lektionen
- 47
Häufig gestellte Fragen
Ist die Lektion „Ereignisse im App-Lebenszyklus verwalten“ kostenlos?
Ja — der vollständige Text von „Ereignisse im App-Lebenszyklus verwalten“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Electron Desktop App Development-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Electron Desktop App Development-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Ereignisse im App-Lebenszyklus verwalten“?
Behandeln Sie verschiedene Ereignisse im Lebenszyklus der Anwendung wie `ready`, `window-all-closed`, `activate` und `quit`, um ein korrektes Anwendungsverhalten sicherzustellen. Du übst Electron Desktop App Development mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Electron Desktop App Development zu starten?
Keine Vorkenntnisse erforderlich. Electron Desktop App Development auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.
Wie lange dauert die Lektion „Ereignisse im App-Lebenszyklus verwalten“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Electron Desktop App Development-Lektion Code schreiben und ausführen?
Ja. Jede Electron Desktop App Development-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Ereignisse im App-Lebenszyklus verwalten
- Automatische Updates implementieren
- Absturzberichte
- Deep Linking und Protokoll-Handler