介紹
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);
}
登入後複製
結論
按照以下步驟，您可以使用 Electron JS 建立一個與系統匣無縫整合的桌面應用程式。這種整合透過直接從系統托盤輕鬆存取基本應用程式功能來增強用戶體驗。無論是顯示、隱藏還是退出應用程序，系統托盤都為用戶與您的應用程式互動提供了便捷的方式。
以上是如何在系統托盤中顯示應用程式 electrojs的詳細內容。更多資訊請關注PHP中文網其他相關文章！
