在桌面应用开发通常有二种菜单，一种是位于顶部的菜单栏和上下文菜单（通过右击呼出菜单）。现在我们学习这二种菜单的使用。

在electron提供了二个模块，分别为Menu和MenuItem.我们需要注意的是这二个模块仅能够在main线程中使用。在rendere线程中同样提供了另一套模块，一会在创建上下文菜单时会看到。

现在我们创建一个main.js文件，并且写入下面的代码。

const { Menu,BrowserWindow } = require('electron')
const electron = require('electron')
const app = electron.appconst template = [ //菜单的内容{label: 'Edit',submenu: [{role: 'undo'},{role: 'redo'},{type: 'separator'//创建一个分隔符},{role: 'cut'},{role: 'copy'},{role: 'paste'},{role: 'pasteandmatchstyle'},{role: 'delete'},{role: 'selectall'}]},{label: 'View',submenu: [{label: 'Reload',accelerator: 'CmdOrCtrl+R',click(item, focusedWindow) {if (focusedWindow) focusedWindow.reload()}},{label: 'Toggle Developer Tools',accelerator: process.platform === 'darwin' ? 'Alt+Command+I' : 'Ctrl+Shift+I',click(item, focusedWindow) {if (focusedWindow) focusedWindow.webContents.toggleDevTools()}},{type: 'separator'},{role: 'resetzoom'},{role: 'zoomin'},{role: 'zoomout'},{type: 'separator'},{role: 'togglefullscreen'}]},{role: 'window',submenu: [{role: 'minimize'},{role: 'close'}]},{//添加一个菜单项的点击事件，浏览electron官网role: 'help',submenu: [{label: 'Learn More',click() { require('electron').shell.openExternal('http://electron.atom.io') }}]}
]if (process.platform === 'darwin') { //判断当前的系统是否为macconst name = app.getName()template.unshift({//添加首菜单项label: name,submenu: [{role: 'about'},{type: 'separator'},{role: 'services',submenu: []},{type: 'separator'},{role: 'hide'},{role: 'hideothers'},{role: 'unhide'},{type: 'separator'},{role: 'quit'}]})// Edit menu.template[1].submenu.push({type: 'separator'},{label: 'Speech',submenu: [{role: 'startspeaking'},{role: 'stopspeaking'}]})// Window menu.template[3].submenu = [{label: 'Close',accelerator: 'CmdOrCtrl+W',role: 'close'},{label: 'Minimize',accelerator: 'CmdOrCtrl+M',role: 'minimize'},{label: 'Zoom',role: 'zoom'},{type: 'separator'},{label: 'Bring All to Front',role: 'front'}]
}
let win
function createWindow() {win = new BrowserWindow({ width: 800, height: 600, })win.loadURL(`file://${__dirname}/index.html`)
// 窗口关闭时的事件win.on('closed', () => {win = null})
}
// 加载完成后事件
app.on('ready', () => {createWindow()const menu = Menu.buildFromTemplate(template)Menu.setApplicationMenu(menu)
})

我们通过Teample来构建一个菜单，template保存了菜单的信息，并且对mac系统进行特殊的处理。

现在我们创建一个index.html，并且创建一个上下文的菜单，MenuItem1点击输出信息，MenuItem2设置为可选按钮

<!-- index.html -->
<script>const {remote} = require('electron')const {Menu, MenuItem} = remoteconst menu = new Menu()menu.append(new MenuItem({label: 'MenuItem1', click() { console.log('item 1 clicked') }}))//点击MenuItem1，在console输出信息menu.append(new MenuItem({type: 'separator'}))menu.append(new MenuItem({label: 'MenuItem2', type: 'checkbox', checked: true}))//添加一个可选菜单window.addEventListener('contextmenu', (e) => { e.preventDefault()menu.popup(remote.getCurrentWindow())}, false)</script>

最终的效果，如下图所示