Учебники

Электрон — Системный лоток

Февраль 4, 2019

Системный трей это меню за пределами окна вашего приложения. В MacOS и Ubuntu он расположен в верхнем правом углу экрана. На Windows это в правом нижнем углу. Мы можем создавать меню для нашего приложения в системных лотках, используя Electron.

Создайте новый файл main.js и добавьте в него следующий код. Подготовьте файл png к значку на панели задач. 

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)

После настройки основного окна браузера мы создадим новый файл index.html со следующим содержимым: 

<!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>

Мы создали лоток, используя подмодуль Tray. Затем мы создали меню с помощью шаблона и дополнительно прикрепили меню к нашему объекту в трее.

Запустите приложение, используя следующую команду — 

$ electron ./main.js

Когда вы запустите указанную выше команду, проверьте в системном трее значок, который вы использовали. Я использовал смайлик для моего заявления. Приведенная выше команда сгенерирует следующий вывод:

42
Share: