Electron菜单

原生菜单和上下文菜单

创建原生应用菜单和上下文菜单

进程：主进程

new Menu() 创建新菜单

静态方法

Menu.setApplication(menu)

设置应用菜单。
Menu.getApplicationMenu()

获取菜单，返回 Menu | null 。
Menu.sendActionToFirstResponder(action) macOS

将 action 发送到应用程序的第一个响应方。用于默认的 macOS 菜单行为。
Menu.buildFromTemplate(template)

设置菜单模板。返回 Menu 。

template 是一个数组对象，数组中每一项是一个 MenuItem 。

实例方法

menu.popup([options])
- options Object(optional)
  - window browserWindow（可选）- 默认为弹出窗口。
  - x 默认为当前鼠标光标位置。如果声明了 y，则必须声明。
  - y 默认为当前鼠标光标位置。如果声明了 x，则必须声明。
  - positionItem macOS 要定位在鼠标光标下指定坐标处的菜单项的索引。默认值为-1。
  - callback 在菜单关闭后被调用的回调函数
将菜单作为 browserWindow 中的上下文菜单弹出。
menu.closePopup([browserWindow])

关闭 browserWindow 中的上下文菜单。
menu.append(menuItem)

将 menuItem 追加到菜单。
menu.getMenuItemById(id)

返回具有指定 id 项的 MenuItem 。
memu.insert(pos,menuItem)
- pos ： Integer
将 menuItem 插入菜单的 pos 位置。

实例事件

menu-will-show

返回 event Event

调用 menu.popup() 时触发。
menu-will-close

返回 event Event

手动关闭弹出或者调用 menu.closePopup() 时触发。

实例属性

menu.items
- items 包含菜单项的MenuItem[] 数组。

示例

在主进程代码 main.js 的同级目录创建 menu.js ，内容如下：

const { Menu, browserWindow, shell } = require('electron')

const isMac = process.platform === 'darwin'

const template = [
    {
        label: '主页'
    },
    {
        label:'技术网站推荐',
        submenu:[
            {
                label:'Vue.js',click(){
                    //在浏览器中打开链接
                    shell.openExternal('https://cn.vuejs.org/')     
                },
                enabled:true
            },
            {
                type:'separator'            
            },
            {
                label: 'w3school', click() {
                    //打开新窗口,加载网址，若加载本项目的文件，需要使用win.loadFile('fielPath')
                    var win = new browserWindow({
                        webPreferences:{                //允许渲染进程使用node
                            nodeIntegration:true
                        }
                    })

                    win.loadURL('https://www.w3school.com.cn/')

                    win.on('close',function(){
                        win = null
                    })
                }
            },
            {
                label:'百度',click(menuItem,browserWindow,event){
                    //在当前窗口重新加载新内容
                    browserWindow.loadURL('http://www.baidu.com')
                }
            }
        ]
    },
    {
        label:'退出',
        accelerator:'ctrl+q',           	//快捷键设置
        role:isMac ? 'close' : 'quit'     	//使用系统配置项--退出应用
    }
]

const menu = Menu.buildFromTemplate(template)

Menu.setApplicationMenu(menu)

在 main.js 中 ready 事件加入

require('./menu.js')

效果图：

MenuItem

添加菜单项到应用程序菜单或者上下文菜单中

进程：主进程

new MenuItem([options])

options Object
- id
- click Function(optional) 菜单项单击回调事件
  - menuItem
  - browserWindow
  - event
- label
- sublable
- type 可能值有 normal, separator, submenu, checkBox , radio
- role 指定菜单的行为，定义了click 之后此项忽略
- toolTip 鼠标悬停文本。
- accelerator 注册快捷键，绑定到该菜单项
- registeraccelerator Boolean (optional) Linux Windows - 设为false，则accelerator不生效。
- icon 图标
- enabled Boolean - 设为false，则该菜单项将会置灰且不可点击。
- acceleratorWorksWhenHidden Boolean macOS- 默认 true。设为false,会阻止accelerator项。
- visible Boolean - 设为false，则隐藏该菜单项。
- checked Boolean - 只为 checkBox 或者radio 类型菜单项指定。
- before
- after
- beforeGroupContaining
- afterGrounpContaining

角色

通过角色可以为 menu 添加预定义行为

role 可能值（内置角色）：

undo
redo
cut
copy
paste
pasteAndMatchStyle
selectAll
delete
minimize - 最小化当前窗口。
close - 关闭当前窗口.
quit - 退出程序
reload - 重新加载当前窗口。
forcereload - 忽略缓存，重新加载当前窗口。
toggledevtools - 在当前窗口中隐藏/显示开发者工具。
togglefullscreen - 将当前窗口切换至全屏模式。
resetzoom - 将主页的缩放级别重置为初始大小.
zoomin - 主页面放大 10%.
zoomout -主页面缩小 10%.
fileMenu - Whole default "File" menu (Close / Quit)
editMenu-默认的 "编辑" 菜单 (包括撤消、复制等)
viewMenu - 整个默认的“视图”菜单 (Reload, Toggle Developer Tools, 等等.)
windowMenu - 整个默认的“窗口”菜单 (Minimize, Zoom, 等等.).

macOs 提供了额外的 role:

appMenu - Whole default "App" menu (About, Services, etc.)
about-映射到 orderFrontStandardAboutPanel 操作.
hide-映射到 hide 操作.
hideOthers-映射到 hideOtherApplications 操作.
unhide-映射到 unhideAllApplications 操作.
startSpeaking-映射到 startSpeaking 操作.
stopSpeaking-映射到 stopSpeaking 操作.
front-映射到 arrangeInFront 操作.
zoom-映射到 performZoom 操作.
toggleTabBar-映射到 toggleTabBar 操作.
selectNextTab - 映射到 selectNextTab 操作.
selectPrevIoUsTab - 映射到 selectPrevIoUsTab 操作.
mergeAllWindows - 映射到 mergeAllWindows 操作.
moveTabToNewWindow - 映射到 moveTabToNewWindow 操作.
window - 这个子菜单是"Window" 菜单.
help-这个子菜单是 "Help" 菜单.
services - The submenu is a "Services" menu. This is only intended for use in the Application Menu and is not the same as the "Services" submenu used in context menus in macOS apps, which is not implemented in Electron.
recentDocuments-这个子菜单是 "Open Recent" 菜单.
clearRecentDocuments -映射到 clearRecentDocuments 操作.

在 macOS 上指定 role 时, label 和 accelerator 是影响菜单项的唯一选项。所有其它选项都将被忽略。不过，仍然支持小写的role，如toggledevtools。

实例属性

属性	类型	描述
`menuItem.id`	String	指定该选项的唯一id，可被动态修改。
`menuItem.label`	String	可见标签
`menuItem.sublabel`	String	可见副标签
`menuItem.click`	Function	`menuItem.click(event,focuseWindow,focuseWebContents)`
`menuItem.menu`	Menu
`menuItem.submenu`	Menu	子菜单
`menuItem.type`	String	菜单项的类型 `normal`, `separator`, `submenu`, `checkBox` , `radio`
`menuItem.role`	String	`undo`, `redo`, `cut`, `copy`, `paste`, `pasteAndMatchStyle`, `delete`, `selectAll`, `reload`, `forceReload`, `toggleDevTools`, `resetZoom`, `zoomIn`, `zoomOut`, `togglefullscreen`, `window`, `minimize`, `close`, `help`, `about`, `services`, `hide`, `hideOthers`, `unhide`, `quit`, `startSpeaking`, `stopSpeaking`, `close`, `minimize`, `zoom`, `front`, `appMenu`, `fileMenu`, `editMenu`, `viewMenu`, `recentDocuments`, `toggleTabBar`, `selectNextTab`, `selectPrevIoUsTab`, `mergeAllWindows`, `clearRecentDocuments`, `moveTabToNewWindow`, `windowMenu`
`menuItem.accelerator`	Accelerator
`menuItem.icon`	String\|NativeImage	图标
`menuItem.toolTip`	String	鼠标悬停文本。macOS
`menuItem.enabled`	Boolean	是否启用该项。
`menuItem.visible`	Boolean	是否可见。
`menuItem.checked`	Boolean	是否选中该项。
`menuItem.registeraccelerator`	Boolean	加速器是应该向系统注册还是只显示。
`menuItem.commandId`	Number	该项的唯一顺序id。

右键菜单

实现方法一：在渲染进程中实现，代码如下：

const { remote } = require('electron')

const template = [
    {
        label:'百度'
    },{
        label:'360'
    }
]

var m = remote.Menu.buildFromTemplate(template)

window.addEventListener('contextmenu',function(e){
    e.preventDefault()
    m.popup({window:remote.getCurrentwindow()})
})

实现方法二：在主进程中先注册菜单，再通过主进程监听渲染进程中右键事件。

menu.js

const { Menu, ipcMain, browserWindow } = require('electron')

const template = [
    {
        label:'百度'
    },{
        label:'360'
    }
]

var m = Menu.buildFromTemplate(template)

ipcMain.on('contextMenu',function(){
    m.popup(browserWindow.getFocusedWindow())
})

渲染进程文件：

const { ipcRenderer } = require("electron");
window.addEventListener('contextmenu', function (e) {
    e.preventDefault();
    ipcRenderer.send('contextMenu');
})

原生菜单和上下文菜单

Menu

静态方法

实例方法

实例事件

实例属性

示例

MenuItem

角色

实例属性

右键菜单

相关推荐