Electron - 系統托盤

上一個
下一個

系統托盤是應用程式視窗外的選單。在 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

執行上述命令後，檢查系統托盤中你使用的圖示。我為我的應用程式使用了一個笑臉。上述命令將生成以下輸出 —

tray
列印頁面
上一個
下一個
廣告