electron建立菜單

在桌面應用開發一般有二種菜單，一種是位於頂部的菜單欄和上下文菜單（經過右擊呼出菜單）。如今咱們學習這二種菜單的使用。

在electron提供了二個模塊，分別爲Menu和MenuItem.咱們須要注意的是這二個模塊僅可以在main線程中使用。在rendere線程中一樣提供了另外一套模塊，一會在建立上下文菜單時會看到。

如今咱們建立一個main.js文件，而且寫入下面的代碼。

const { Menu,BrowserWindow } = require('electron')
const electron = require('electron')
const app = electron.app

const 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') { //判斷當前的系統是否爲mac
    const 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} = remote
    
    const 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>

最終的效果，以下圖所示