如何在系統托盤中顯示應用程式 electrojs-js教程-PHP中文網

如何在系統托盤中顯示應用程式 electrojs

WBOY

發布： 2024-07-18 21:34:53

原創

1039 人瀏覽過

how to show the app electronjs in the systemTray

介紹

Electron JS 是一種流行的框架，用於使用 JavaScript、HTML 和 CSS 等 Web 技術建立桌面應用程式。桌面應用程式的重要功能之一是能夠將它們與系統托盤集成，從而允許用戶輕鬆存取關鍵功能和設定。本文將指導您創建一個 Electron JS 應用程式並將其與系統托盤整合。

在系統托盤中顯示應用程式

要在系統匣中顯示您的應用程序，您需要從 Electron 建立 Tray 類別的實例。此實例將在系統托盤中以圖示代表該應用程式。

將以下行加入 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);
}

登入後複製

自訂圖示

要更改托盤圖標，請更新托盤構造函數中的路徑：

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

登入後複製

確保路徑指向要用作托盤圖示的有效影像檔案。

新增顯示、隱藏和退出按鈕

為了增強系統托盤選單的功能，您可以新增顯示、隱藏和退出應用程式的選項。修改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();
      }
    },
    {
      label: 'Hide App',
      click: () => {
        mainWindow.hide();
      }
    },
    {
      label: 'Exit',
      click: () => {
        app.quit();
      }
    }
  ]);
  tray.setToolTip('My Electron App');
  tray.setContextMenu(contextMenu);
}

登入後複製

解釋

顯示應用程式按鈕：

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

登入後複製

點擊此選單項目將使應用程式的視窗重新顯示出來。

隱藏應用程式按鈕：

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

登入後複製

此選單項目會將應用程式最小化到系統托盤，將其從工作列隱藏。

退出按鈕：

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

登入後複製

選擇此選單項目將關閉應用程式。

完整的上下文選單範例

您可以透過新增更多選項來進一步自訂上下文選單，例如開啟設定視窗或顯示應用程式資訊。

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

登入後複製