Electron 建立選單(Menu)


當我們第一次執行 Electron ,會發現它上面有預設的選單,但這些選單的內容可能不是我們想要的,所以今天要來分享怎麼修改成客製化的選單。

首先我們開啟 main.js,裡面有很多註解解釋用途,所以我就不特別說明了,比較重要的就是如果要開啟 Chrome 的開發工具,需要把第16行指令的註解取消,變成:

mainWindow.webContents.openDevTools()

這樣我們執行時就會多出開發工具:

接下來就要進入正題,如何新建一個客製化的選單。
首先我們需要使用Menu,(官方API文件)。
將 main.js 第二行多增加 Menu :

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

然後在最底下新增一個 function :

function buildMenu(){
	//選單的Template
	const menu = Menu.buildFromTemplate([
		{
			label: 'My Menu',
			submenu: [
				{
					label: 'test',
					click: function() {						
						console.log('test');
					}
				}
			]
		}
	]);
	//將預設選單改為Template
	Menu.setApplicationMenu(menu);
}

我們要在建立視窗的時候呼叫它,所以把 createWindow 改成下列:

function createWindow () {
  // Create the browser window.
  mainWindow = new BrowserWindow({width: 800, height: 600})

  // and load the index.html of the app.
  mainWindow.loadFile('index.html')

  // Open the DevTools.
  mainWindow.webContents.openDevTools()
  buildMenu();
  
  // Emitted when the window is closed.
  mainWindow.on('closed', function () {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    mainWindow = null
  })
}

然後執行就會發現選單變成只剩 My Menu 了。

這時候我們點開 My Menu ,選 test :
就會在 cmd 中出現console的 test。(這邊要注意在 main.js 中寫的 console 是出現在 cmd ,在 renderer.js 中寫的 console 才是出現在 chrome 的開發工具)

附上完整程式碼:

// Modules to control application life and create native browser window
const {app, BrowserWindow, Menu} = require('electron')

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow

function createWindow () {
  // Create the browser window.
  mainWindow = new BrowserWindow({width: 800, height: 600})

  // and load the index.html of the app.
  mainWindow.loadFile('index.html')

  // Open the DevTools.
  mainWindow.webContents.openDevTools()
  buildMenu();
  
  // Emitted when the window is closed.
  mainWindow.on('closed', function () {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    mainWindow = null
  })
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', function () {
  // On OS X it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', function () {
  // On OS X it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (mainWindow === null) {
    createWindow()
  }
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.


function buildMenu(){
	//選單的Template
	const menu = Menu.buildFromTemplate([
		{
			label: 'My Menu',
			submenu: [
				{
					label: 'test',
					click: function() {						
						console.log('test');
					}
				}
			]
		}
	]);
	//將預設選單改為Template
	Menu.setApplicationMenu(menu);
}