electron 教程【7】如何实现自定义应用程序菜单，和右键菜单

最新推荐文章于 2025-03-05 16:06:24 发布

jigetage

最新推荐文章于 2025-03-05 16:06:24 发布

阅读量8k

点赞数 1

分类专栏： node.js electron 文章标签： electron electron菜单 electron menu

本文链接：https://blog.youkuaiyun.com/jigetage/article/details/81029234

版权

node.js 同时被 2 个专栏收录

17 篇文章

订阅专栏

electron

12 篇文章

订阅专栏

本文介绍如何使用Electron框架自定义应用程序菜单及右键菜单，包括实现步骤与代码示例，帮助开发者快速掌握定制技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、实现自定义应用程序菜单

基本思路：自定义应用程序菜单，然后将该菜单设置到对应的window上。

如何操作：Menu和MenuItem模块分别对应菜单，和菜单的内容。可以直接在主进程中调用，也可以在渲染进程中通过remote模块调用。

一个示例：

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})
  // Set menu to window
  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()
  }
})

一、实现右键菜单

基本思路：自定义右键菜单内容，然后在按下鼠标右键时，在渲染进程中发送信号，在主进程中显示右键菜单。

如何操作：Menu和MenuItem模块分别对应菜单，和菜单的内容。可以直接在主进程中调用，也可以在渲染进程中通过remote模块调用。

一个示例：

渲染进程：

			$('body').mouseup(
				(event) => {
					var e = event || window.event;
					let nType = e.button;
					if (2 === nType) {
						showRightClickMenu();
					}
					e.stopPropagation();
				}
			);

function showRightClickMenu(){
	ipcRenderer.send('sigShowRightClickMenu');
}

主进程：

ipcMain.on('sigShowRightClickMenu', (event) => {
	//! 生成菜单
	const menu = new Menu();
	menu.append(new MenuItem({ label: 'Hello world' }));
	menu.append(new MenuItem({ type: 'separator' }));
	menu.append(new MenuItem({ label: 'Electron', click: () => {
				Electron.shell.openExternal('https://www.baidu.com');
			}
		})
	);
	const win = BrowserWindow.fromWebContents(event.sender);
	menu.popup(win);
});