目录:
- 菜单Menu(应用菜单和context菜单)
- 系统托盘图标Tray
1 菜单Menu(应用菜单和context菜单)
有两种菜单:应用程序(顶部)菜单和上下文(右键点击)菜单。
1.1 应用程序菜单
使用Menu和MenuItem模块可以自定义你的应用程序菜单。如果没有设置任何菜单,Electron将为您的应用生成一个最小的菜单。
这个模块是一个主进程的模块,并且可以通过 remote 模块给渲染进程调用。
每个菜单有一个或几个菜单项 menu items,并且每个菜单项可以有子菜单。
下面是一个简单的示例:
const electron = require('electron')
const BrowserWindow = electron.BrowserWindow
const Menu = electron.Menu
const app = electron.app
var template = [{
label: '编辑',
submenu: [{
label: '撤销',
accelerator: 'CmdOrCtrl+Z',
role: 'undo'
}, {
label: '重做',
accelerator: 'Shift+CmdOrCtrl+Z',
role: 'redo'
}, {
type: 'separator'
}, {
label: '复制',
accelerator: 'CmdOrCtrl+C',
role: 'copy'
}, {
label: '粘贴',
accelerator: 'CmdOrCtrl+V',
role: 'paste'
}]
}, {
label: '帮助',
role: 'help',
submenu: [{
label: '学习更多',
click: function () {
electron.shell.openExternal('http://electron.atom.io')
}
}]
}];
function createWindow () {
// Create the browser window.
mainWindow = new BrowserWindow({width: 800, height: 600})
......
const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)
}
app.on('ready', createWindow)
// Quit when all windows are closed.
app.on('window-all-closed', function () {
// On OS X it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', function () {
// On OS X it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (mainWindow === null) {
createWindow()
}
})
1.2 创建上下文菜单
可以使用Menu和MenuItem模块创建上下文或者右键点击菜单。您可以右键单击此应用程序中的任何位置查看示例上下文菜单。
在这个示例中,我们使用ipcRenderer模块来展示从渲染器进程显示调用它的上下文菜单。
//main.js
const electron = require('electron')
const BrowserWindow = electron.BrowserWindow
const Menu = electron.Menu
const MenuItem = electron.MenuItem
const ipc = electron.ipcMain
const app = electron.app
const menu = new Menu()
menu.append(new MenuItem({ label: 'Hello' }))
menu.append(new MenuItem({ type: 'separator' }))
menu.append(new MenuItem({ label: 'Electron', type: 'checkbox', checked: true }))
app.on('browser-window-created', function (event, win) {
win.webContents.on('context-menu', function (e, params) {
menu.popup(win, params.x, params.y)
})
})
ipc.on('show-context-menu', function (event) {
const win = BrowserWindow.fromWebContents(event.sender)
menu.popup(win)
})
//渲染进程
const ipc = require('electron').ipcRenderer
// 告诉主进程在单击示例按钮时显示菜单
const contextMenuBtn = document.getElementById('context-menu')
contextMenuBtn.addEventListener('click', function () {
ipc.send('show-context-menu')
})
2.系统托盘图标Tray
微信启动时,系统托盘中会自动添加一个微信启动程序图标 image使用electron如何实现这种效果昵?
以下是使用electron实现将应用程序加入系统托盘demo
//electron
const electron = require('electron');
const app = electron.app;
const path = require('path');
//用一个 Tray 来表示一个图标,这个图标处于正在运行的系统的通知区 ,通常被添加到一个 context menu 上.
const Menu = electron.Menu;
const Tray = electron.Tray;
//托盘对象
var appTray = null;
function createWindow() {
// Create the browser window.
mainWindow = new BrowserWindow({
width: 1000,
height: 600,
})
//系统托盘右键菜单
var trayMenuTemplate = [
{
label: '设置',
click: function () {} //打开相应页面
},
{
label: '帮助',
click: function () {}
},
{
label: '关于',
click: function () {}
},
{
label: '退出',
click: function () {
//ipc.send('close-main-window');
app.quit();
}
}
];
//系统托盘图标目录
trayIcon = path.join(__dirname, 'tray');
appTray = new Tray(path.join(trayIcon, 'app.ico'));
//图标的上下文菜单
const contextMenu = Menu.buildFromTemplate(trayMenuTemplate);
//设置此托盘图标的悬停提示内容
appTray.setToolTip('This is my application.');
//设置此图标的上下文菜单
appTray.setContextMenu(contextMenu);
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow);
// Quit when all windows are closed.
app.on('window-all-closed', function() {
// On OS X it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit()
}
})
用一个 Tray 来表示一个图标,这个图标处于正在运行的系统的通知区 ,通常被添加到一个 context menu 上。
以下是关键步骤:
//图标的上下文菜单
const contextMenu = Menu.buildFromTemplate(trayMenuTemplate);
//设置此图标的上下文菜单
appTray.setContextMenu(contextMenu);
网友评论