共计 2410 个字符,预计需要花费 7 分钟才能阅读完成。
作者:梁棒棒
1. 简介
菜单次要分为应用程序菜单、上下文菜单,在 tray 和 dock 中也有用到菜单,本节次要介绍前两种。文档地址
1.1 应用程序菜单
mac 和 windows 都在左上角,然而一个在屏幕左上角一个在应用程序视图左上角。
mac 是这样的:
windows 长这样:
如果 windows 下没有显示菜单,在以后窗口按 alt 键即会呈现。
1.2 上下文菜单
即右键菜单。
2. 创立菜单
2.1 创立应用程序菜单
接下来咱们创立应用程序菜单。如下步骤:
- 引入 Menu 类
- 定义一个菜单模板
- 调用 Menu 类的
buildFromTemplate
办法,该办法会依据传入的模板创立对应的菜单 - 调用 Menu 类的
setApplicationMenu
办法
此四步即可创立应用程序菜单,先来看下效果图。
附上代码:
// 步骤一
const {Menu, dialog, app} = require('electron')
// 步骤二
const template = [
{
label: 'app', // macOS 下第一个标签是应用程序名字,此处设置有效
submenu: [{ label: '退出', click: () => {app.quit() } },
{label: '对于', click: () => {app.showAboutPanel() } }
]
},
{
label: '文件',
submenu: [
{
label: '子菜单',
click: () => {
// 调用了 dialog(弹窗模块),演示成果
dialog.showMessageBoxSync({
type: 'info',
title: '提醒',
message: '点击了子菜单'
})
}
}
]
}
]
// 步骤三
const menu = Menu.buildFromTemplate(template)
// 步骤四
Menu.setApplicationMenu(menu)
2.2 创立上下文菜单
即创立右键点击菜单,前三步与创立应用程序菜单雷同,最初一步需监听窗口 context-menu
事件展现菜单选项。
监听事件 context-menu 文档
先上效果图。
附上代码:
// 步骤一
const {Menu, BrowserWindow} = require('electron')
// 步骤二
const template = [
{
label: 'app', // macOS 下第一个标签是应用程序名字,此处设置有效
submenu: [{ role: 'quit'},
{role: 'about'}
]
},
{
label: '编辑',
role: 'editMenu'
}
]
// 步骤三
const contextMenu = Menu.buildFromTemplate(template)
// 步骤四
// 主过程,渲染过程可应用 window.addEventListener 设置监听事件
BrowserWindow.getFocusedWindow().webContents.on('context-menu', () => {contextMenu.popup()
})
可能你曾经发现,这个例子的代码比上个例子少,实现的菜单却更多,而且这个 role
又是干嘛的呢,别急,往下看。
3. 设置菜单属性
上节说到,这个 role
是干嘛的呢?
其实创立菜单行为有两种形式,一种是自定义,即 1.1 中实现形式,另外一种是预约义即role
。
role 是 MenuItem 的属性,是 electron 的预约义行为。文档说:最好给任何一个菜单指定 role 去匹配一个规范角色, 而不是尝试在 click 函数中手动实现该行为。内置的 role 行为将提供最佳的原生体验。应用 role 时, label 和 accelerator 值是可选的, 并为每个平台,默认为适当值。
这就是说,你只有设置好 role 属性,那么这个菜单的文案、快捷键、事件行为都已外部实现,而且比自定义的行为体验更好。
const {Menu, BrowserWindow} = require('electron')
const templateCustom = [
{
label: 'app', // macOS 下第一个标签是应用程序名字,此处设置有效
submenu: [{ label: 'quit', role: 'quit'},
{label: '对于', role: 'about', accelerator: 'CommandOrControl + shift + H'}
]
},
{
label: '编辑',
submenu: [{role: 'editMenu'},
{type: 'separator'},
{label: '自定义', click: () => {const win = new BrowserWindow()
win.loadURL('https://electronjs.org')
} }
]
}
]
const customMenu = Menu.buildFromTemplate(templateCustom)
Menu.setApplicationMenu(customMenu)
上述代码 line8 的 accelerator
是设置快捷键的属性。
4. 暗藏菜单
如果咱们在开发中应用了一些菜单,然而不想让用户看到,还要在线上保留这个性能,比方调试窗口,不便线上查找 bug,那么这个暗藏菜单的属性 visible 就能够派上用场了。
看下效果图:
const {Menu} = require('electron')
const menu = Menu.getApplicationMenu()
// 获取要暗藏的菜单将其属性 visible 设置为 false
menu.items[3].submenu.items[2].visible = false;
如图所示:刚开始能够看到 view 的子菜单 Toggle Developer Tools 切换调试窗口,点击执行暗藏该菜单,这时通过快捷键 cmd+option+I(windows 下 ctrl+shift+I)切换调试窗口。
咱们是晓黑板前端,欢送关注咱们的知乎、Segmentfault、CSDN、简书、开源中国、博客园账号。