Electron 教程:菜单
桌面应用程序一般有两种类型的菜单:应用程序菜单(在顶部栏上)和上下文菜单(右键菜单)。我们将在本章中学习如何创建这两者。
我们将使用两个模块:Menu和MenuItem模块。请注意,Menu和MenuItem模块仅在主进程中可用。为了在渲染器过程中使用这些模块,您需要remote模块。我们在创建上下文菜单时会遇到这种情况。
现在,让我们为主进程创建一个新的main.js文件
const {app, BrowserWindow, Menu, MenuItem} = require('electron') const url = require('url') const path = require('path') let win function createWindow() { win = new BrowserWindow({width: 800, height: 600}) win.loadURL(url.format ({ pathname: path.join(__dirname, 'index.html'), protocol: 'file:', slashes: true })) } const template = [ { label: 'Edit', submenu: [ { role: 'undo' }, { role: 'redo' }, { type: 'separator' }, { role: 'cut' }, { role: 'copy' }, { role: 'paste' } ] }, { label: 'View', submenu: [ { role: 'reload' }, { role: 'toggledevtools' }, { type: 'separator' }, { role: 'resetzoom' }, { role: 'zoomin' }, { role: 'zoomout' }, { type: 'separator' }, { role: 'togglefullscreen' } ] }, { role: 'window', submenu: [ { role: 'minimize' }, { role: 'close' } ] }, { role: 'help', submenu: [ { label: 'Learn More' } ] } ] const menu = Menu.buildFromTemplate(template) Menu.setApplicationMenu(menu) app.on('ready', createWindow)
我们正在根据模板构建一个菜单。这意味着我们将菜单设置为JSON形式提供给该函数,它将处理剩下的部分。现在我们必须将此菜单设置为应用程序菜单。
现在创建一个名为index.html的空文件,并使用
$ electron ./main.js
在应用程序菜单的正常位置,您会看到一个基于上述模板的菜单。
我们从主进程创建了菜单。现在让我们为我们的应用程序创建一个上下文菜单。我们将在我们的超文本标记语言文件中这样做
<!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>Menus</title> </head> <body> <script type = "text/javascript"> const {remote} = require('electron') const {Menu, MenuItem} = remote const menu = new Menu() // Build menu one item at a time, unlike menu.append(new MenuItem ({ label: 'MenuItem1', click() { console.log('item 1 clicked') } })) menu.append(new MenuItem({type: 'separator'})) menu.append(new MenuItem({label: 'MenuItem2', type: 'checkbox', checked: true})) menu.append(new MenuItem ({ label: 'MenuItem3', click() { console.log('item 3 clicked') } })) // Prevent default action of right click in chromium. Replace with our menu. window.addEventListener('contextmenu', (e) => { e.preventDefault() menu.popup(remote.getCurrentWindow()) }, false) </script> </body> </html>
我们使用remote模块导入了Menu和MenuItem模块;然后,我们创建了一个菜单,并把我们的菜单一个接一个地添加进去。此外,我们拦截了在chromium中右键单击的默认操作,并将其替换为我们的菜单。
在Electron中创建菜单是一项非常简单的任务。现在,您可以将事件处理程序附加到这些项目上,并根据需要处理事件。