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>

最终的效果，以下图所示