作者：梁棒棒
1.簡介
菜單主要分為應(yīng)用程序菜單、上下文菜單婿崭，在tray和dock中也有用到菜單，本節(jié)主要介紹前兩種。文檔地址
1.1 應(yīng)用程序菜單
mac和windows都在左上角鳄梅，但是一個在屏幕左上角一個在應(yīng)用程序視圖左上角厕怜。
mac是這樣的：
windows長這樣：
如果windows下沒有顯示菜單衩匣，在當(dāng)前窗口按alt鍵即會出現(xiàn)。
1.2 上下文菜單
即右鍵菜單粥航。
2. 創(chuàng)建菜單
2.1 創(chuàng)建應(yīng)用程序菜單
接下來我們創(chuàng)建應(yīng)用程序菜單琅捏。如下步驟：
- 引入Menu類
- 定義一個菜單模板
- 調(diào)用Menu類的
buildFromTemplate方法，該方法會根據(jù)傳入的模板創(chuàng)建對應(yīng)的菜單 - 調(diào)用Menu類的
setApplicationMenu方法
此四步即可創(chuàng)建應(yīng)用程序菜單递雀，先來看下效果圖柄延。
附上代碼：
// 步驟一
const { Menu, dialog, app } = require('electron')
// 步驟二
const template = [
{
label: 'app', // macOS下第一個標簽是應(yīng)用程序名字，此處設(shè)置無效
submenu: [
{ label: '退出', click: () => { app.quit() } },
{ label: '關(guān)于', click: () => { app.showAboutPanel() } }
]
},
{
label: '文件',
submenu: [
{
label: '子菜單',
click: () => {
// 調(diào)用了dialog（彈窗模塊）缀程，演示效果
dialog.showMessageBoxSync({
type: 'info',
title: '提示',
message: '點擊了子菜單'
})
}
}
]
}
]
// 步驟三
const menu = Menu.buildFromTemplate(template)
// 步驟四
Menu.setApplicationMenu(menu)
2.2 創(chuàng)建上下文菜單
即創(chuàng)建右鍵點擊菜單搜吧，前三步與創(chuàng)建應(yīng)用程序菜單相同，最后一步需監(jiān)聽窗口context-menu事件展示菜單選項杨凑。
監(jiān)聽事件context-menu文檔
先上效果圖滤奈。
附上代碼：
// 步驟一
const { Menu, BrowserWindow } = require('electron')
// 步驟二
const template = [
{
label: 'app', // macOS下第一個標簽是應(yīng)用程序名字，此處設(shè)置無效
submenu: [
{ role: 'quit' },
{ role: 'about' }
]
},
{
label: '編輯',
role: 'editMenu'
}
]
// 步驟三
const contextMenu = Menu.buildFromTemplate(template)
// 步驟四
// 主進程撩满，渲染進程可使用window.addEventListener設(shè)置監(jiān)聽事件
BrowserWindow.getFocusedWindow().webContents.on('context-menu', () => {
contextMenu.popup()
})
可能你已經(jīng)發(fā)現(xiàn)蜒程，這個例子的代碼比上個例子少，實現(xiàn)的菜單卻更多鹦牛，而且這個role又是干嘛的呢搞糕，別急，往下看曼追。
3. 設(shè)置菜單屬性
上節(jié)說到窍仰，這個role是干嘛的呢？
其實創(chuàng)建菜單行為有兩種方式礼殊，一種是自定義驹吮，即1.1中實現(xiàn)方式针史，另外一種是預(yù)定義即role。
role是MenuItem的屬性碟狞，是electron的預(yù)定義行為啄枕。文檔說：最好給任何一個菜單指定 role去匹配一個標準角色, 而不是嘗試在 click 函數(shù)中手動實現(xiàn)該行為。 內(nèi)置的 role 行為將提供最佳的原生體驗族沃。使用 role 時, label 和 accelerator 值是可選的, 并為每個平臺频祝，默認為適當(dāng)值。
這就是說脆淹，你只要設(shè)置好role屬性常空，那么這個菜單的文案、快捷鍵盖溺、事件行為都已內(nèi)部實現(xiàn)漓糙，而且比自定義的行為體驗更好。
const { Menu, BrowserWindow } = require('electron')
const templateCustom = [
{
label: 'app', // macOS下第一個標簽是應(yīng)用程序名字烘嘱，此處設(shè)置無效
submenu: [
{ label: 'quit', role: 'quit' },
{label: '關(guān)于', 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是設(shè)置快捷鍵的屬性昆禽。
4. 隱藏菜單
如果我們在開發(fā)中使用了一些菜單，但是不想讓用戶看到蝇庭，還要在線上保留這個功能醉鳖，比如調(diào)試窗口，方便線上查找bug遗契，那么這個隱藏菜單的屬性visible就可以派上用場了辐棒。
看下效果圖：
const { Menu } = require('electron')
const menu = Menu.getApplicationMenu()
// 獲取要隱藏的菜單將其屬性visible設(shè)置為false
menu.items[3].submenu.items[2].visible = false;
如圖所示：剛開始可以看到view的子菜單Toggle Developer Tools切換調(diào)試窗口，點擊執(zhí)行隱藏該菜單牍蜂，這時通過快捷鍵cmd+option+I(windows下ctrl+shift+I)切換調(diào)試窗口漾根。
我們是曉黑板前端，歡迎關(guān)注我們的知乎鲫竞、Segmentfault辐怕、CSDN、簡書从绘、開源中國寄疏、博客園賬號。
