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

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

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

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

Explication

1. Afficher le bouton de l'application :

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

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

1. Masquer le bouton de l'application :

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

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

1. Bouton Quitter :

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

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

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!