2019獨角獸企業重金招聘Python工程師標準>>>

在桌面應用開發通常有二種菜單，一種是位于頂部的菜單欄和上下文菜單（通過右擊呼出菜單）。現在我們學習這二種菜單的使用。

在electron提供了二個模塊，分別為Menu和MenuItem.我們需要注意的是這二個模塊僅能夠在main線程中使用。在rendere線程中同樣提供了另一套模塊，一會在創建上下文菜單時會看到。

現在我們創建一個main.js文件，并且寫入下面的代碼。

const { Menu,BrowserWindow } = require('electron') const electron = require('electron') const app = electron.appconst 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') { //判斷當前的系統是否為macconst 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} = remoteconst 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>

最終的效果，如下圖所示


轉載于:https://my.oschina.net/u/215677/blog/1507264

總結

以上是生活随笔為你收集整理的electron创建菜单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。