So zeigen Sie die App-Elektronjs im SystemTray an

Einführung

Electron JS ist ein beliebtes Framework zum Erstellen von Desktop-Anwendungen mithilfe von Webtechnologien wie JavaScript, HTML und CSS. Eines der wesentlichen Merkmale von Desktop-Anwendungen ist die Möglichkeit, sie in die Taskleiste zu integrieren, sodass Benutzer problemlos auf wichtige Funktionen und Einstellungen zugreifen können. Dieser Artikel führt Sie durch die Erstellung einer Electron JS-Anwendung und deren Integration in die Taskleiste.

Zeigen Sie die App in der Taskleiste an

Um Ihre Anwendung in der Taskleiste anzuzeigen, müssen Sie eine Instanz der Tray-Klasse von Electron erstellen. Diese Instanz stellt die App in der Taskleiste mit einem Symbol dar.

Fügen Sie die folgenden Zeilen zur Datei main.js hinzu:

const { app, BrowserWindow, Tray, Menu } = require('electron');
let mainWindow;
let tray;

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });
  mainWindow.loadFile('index.html');
  createTray();
});

function createTray() {
  tray = new Tray('path/to/icon.png'); // Path to your tray icon
  const contextMenu = Menu.buildFromTemplate([
    {
      label: 'Show App',
      click: () => {
        mainWindow.show();
      }
    }
  ]);
  tray.setToolTip('My Electron App');
  tray.setContextMenu(contextMenu);
}

Anpassen des Symbols

Um das Taskleistensymbol zu ändern, aktualisieren Sie den Pfad im Tray-Konstruktor:

tray = new Tray('path/to/new_icon.png');

Stellen Sie sicher, dass der Pfad auf eine gültige Bilddatei verweist, die Sie als Taskleistensymbol verwenden möchten.

Hinzufügen von Schaltflächen zum Anzeigen, Ausblenden und Beenden

Um die Funktionalität Ihres Taskleistenmenüs zu erweitern, können Sie Optionen zum Anzeigen, Ausblenden und Beenden der Anwendung hinzufügen. Ändern Sie die Datei main.js wie folgt:

const { app, BrowserWindow, Tray, Menu } = require('electron');
let mainWindow;
let tray;

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });
  mainWindow.loadFile('index.html');
  createTray();
});

function createTray() {
  tray = new Tray('path/to/icon.png'); // Path to your tray icon
  const contextMenu = Menu.buildFromTemplate([
    {
      label: 'Show App',
      click: () => {
        mainWindow.show();
      }
    },
    {
      label: 'Hide App',
      click: () => {
        mainWindow.hide();
      }
    },
    {
      label: 'Exit',
      click: () => {
        app.quit();
      }
    }
  ]);
  tray.setToolTip('My Electron App');
  tray.setContextMenu(contextMenu);
}

Erläuterung

1. App-Schaltfläche anzeigen:

   {
     label: 'Show App',
     click: () => {
       mainWindow.show();
     }
   }

Dieser Menüpunkt bringt das Fenster der Anwendung wieder in die Ansicht, wenn Sie darauf klicken.

1. App-Schaltfläche ausblenden:

   {
     label: 'Hide App',
     click: () => {
       mainWindow.hide();
     }
   }

Dieser Menüpunkt minimiert die Anwendung in der Taskleiste und versteckt sie in der Taskleiste.

1. Beenden-Taste:

   {
     label: 'Exit',
     click: () => {
       app.quit();
     }
   }

Dieser Menüpunkt schließt die Anwendung, wenn er ausgewählt wird.

Beispiel eines vollständigen Kontextmenüs

Sie können das Kontextmenü weiter anpassen, indem Sie weitere Optionen hinzufügen, z. B. das Öffnen eines Einstellungsfensters oder die Anzeige von Anwendungsinformationen.

const { app, BrowserWindow, Tray, Menu } = require('electron');
let mainWindow;
let tray;

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });
  mainWindow.loadFile('index.html');
  createTray();
});

function createTray() {
  tray = new Tray('path/to/icon.png'); // Path to your tray icon
  const contextMenu = Menu.buildFromTemplate([
    {
      label: 'Show App',
      click: () => {
        mainWindow.show();
      }
    },
    {
      label: 'Hide App',
      click: () => {
        mainWindow.hide();
      }
    },
    {
      label: 'Settings',
      click: () => {
        // Open a settings window
      }
    },
    {
      label: 'About',
      click: () => {
        // Show about information
      }
    },
    {
      label: 'Exit',
      click: () => {
        app.quit();
      }
    }
  ]);
  tray.setToolTip('My Electron App');
  tray.setContextMenu(contextMenu);
}

Abschluss

Indem Sie diese Schritte befolgen, können Sie mit Electron JS eine Desktop-Anwendung erstellen, die sich nahtlos in die Taskleiste integriert. Diese Integration verbessert das Benutzererlebnis, indem sie einen einfachen Zugriff auf wichtige App-Funktionen direkt über die Taskleiste ermöglicht. Ob es darum geht, die Anwendung anzuzeigen, auszublenden oder zu beenden, die Taskleiste bietet Benutzern eine bequeme Möglichkeit, mit Ihrer App zu interagieren.

Das obige ist der detaillierte Inhalt vonSo zeigen Sie die App-Elektronjs im SystemTray an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!