Electron - Plateau système

La barre d'état système est un menu en dehors de la fenêtre de votre application. Sur MacOS et Ubuntu, il est situé dans le coin supérieur droit de votre écran. Sous Windows, il se trouve dans le coin inférieur droit. Nous pouvons créer des menus pour notre application dans des plateaux système en utilisant Electron.

Créer un nouveau main.jsfichier et ajoutez-y le code suivant. Ayez un fichier png prêt à être utilisé pour l'icône de la barre d'état système.

const {app, BrowserWindow} = require('electron')
const url = require('url')
const path = require('path')

let win

function createWindow() {
   win = new BrowserWindow({width: 800, height: 600})
   win.loadURL(url.format ({
      pathname: path.join(__dirname, 'index.html'),
      protocol: 'file:',
      slashes: true
   }))
}

app.on('ready', createWindow)

Après avoir mis en place une fenêtre de navigateur de base, nous allons créer un nouveau index.html fichier avec le contenu suivant -

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "UTF-8">
      <title>Menus</title>
   </head>
   <body>
      <script type = "text/javascript">
         const {remote} = require('electron')
         const {Tray, Menu} = remote
         const path = require('path')

         let trayIcon = new Tray(path.join('','/home/ayushgp/Desktop/images.png'))

         const trayMenuTemplate = [
            {
               label: 'Empty Application',
               enabled: false
            },
            
            {
               label: 'Settings',
               click: function () {
                  console.log("Clicked on settings")
               }
            },
            
            {
               label: 'Help',
               click: function () {
                  console.log("Clicked on Help")
               }
            }
         ]
         
         let trayMenu = Menu.buildFromTemplate(trayMenuTemplate)
         trayIcon.setContextMenu(trayMenu)
      </script>
   </body>
</html>

Nous avons créé le plateau à l'aide du sous-module Tray. Nous avons ensuite créé un menu à l'aide d'un modèle et attaché le menu à notre objet de plateau.

Exécutez l'application à l'aide de la commande suivante -

$ electron ./main.js

Lorsque vous exécutez la commande ci-dessus, vérifiez votre barre d'état système pour l'icône que vous avez utilisée. J'ai utilisé un visage souriant pour mon application. La commande ci-dessus générera la sortie suivante -