在桌面应用开发通常有二种菜单,一种是位于顶部的菜单栏和上下文菜单(通过右击呼出菜单)。现在我们学习这二种菜单的使用。
在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>
最终的效果,如下图所示
![输入图片说明](http://7xrkms.com1.z0.glb.clouddn.com/屏幕截图\ 2017-08-13 01.17.24.png "最终效果")