comment afficher l'application electronicjs dans la barre système-js tutoriel-php.cn

comment afficher l'application electronicjs dans la barre système

WBOY

Libérer： 2024-07-18 21:34:53

original

1039 Les gens l'ont consulté

how to show the app electronjs in the systemTray

Introduction

Electron JS est un framework populaire pour créer des applications de bureau à l'aide de technologies Web telles que JavaScript, HTML et CSS. L'une des caractéristiques importantes des applications de bureau est la possibilité de les intégrer à la barre d'état système, permettant aux utilisateurs d'accéder facilement aux fonctionnalités et paramètres clés. Cet article vous guidera dans la création d'une application Electron JS et son intégration à la barre d'état système.

Afficher l'application dans la barre d'état système

Pour afficher votre application dans la barre d'état système, vous devez créer une instance de la classe Tray à partir d'Electron. Cette instance représentera l'application dans la barre d'état système avec une icône.

Ajoutez les lignes suivantes au fichier main.js :

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

Copier après la connexion

Personnalisation de l'icône

Pour modifier l'icône de la barre d'état, mettez à jour le chemin dans le constructeur de la barre :

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

Copier après la connexion

Assurez-vous que le chemin pointe vers un fichier image valide que vous souhaitez utiliser comme icône de la barre d'état.

Ajout de boutons Afficher, Masquer et Quitter

Pour améliorer les fonctionnalités du menu de votre barre d'état système, vous pouvez ajouter des options pour afficher, masquer et quitter l'application. Modifiez le fichier main.js comme suit :

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

Copier après la connexion

Explication

Afficher le bouton de l'application :

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

Copier après la connexion

Cet élément de menu ramènera la fenêtre de l'application à la vue lorsque vous cliquez dessus.

Masquer le bouton de l'application :

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

Copier après la connexion

Cet élément de menu minimisera l'application dans la barre d'état système, la cachant de la barre des tâches.

Bouton Quitter :

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

Copier après la connexion

Cet élément de menu fermera l'application une fois sélectionné.

Exemple de menu contextuel complet

Vous pouvez personnaliser davantage le menu contextuel en ajoutant plus d'options, telles que l'ouverture d'une fenêtre de paramètres ou l'affichage des informations sur l'application.

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

Copier après la connexion

Conclusion

En suivant ces étapes, vous pouvez créer une application de bureau avec Electron JS qui s'intègre parfaitement à la barre d'état système. Cette intégration améliore l'expérience utilisateur en offrant un accès facile aux fonctionnalités essentielles de l'application directement depuis la barre d'état système. Qu'il s'agisse d'afficher, de masquer ou de quitter l'application, la barre d'état système offre aux utilisateurs un moyen pratique d'interagir avec votre application.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!