Electron 建立一個空白的介面
新增應用
首先新增一個Lorikeet版本的Electron應用。
1 'use strict' 2 const electron = require('electron'); 3 const app = electron.app; 4 const BrowserWindow = electron.BrowserWindow; 5 6 let mainWindow = null; 7 8 app.on('window-all-closed', () => { 9if (process.platform !== 'darwin') { 10app.quit(); 11} 12 }); 13 14 app.on('ready', () => { 15mainWindow = new BrowserWindow(); 16mainWindow.loadURL(`file://${app.getAppPath()}/index.html`); 17mainWindow.on('closed', () => { 18mainWindow = null; 19}); 20 });
選單設定
1. 永久隱藏選單
const electronMenu=electron.Menu;
electronMenu.setApplicationMenu(null);
另:也可以直接設定mainWindow.setMenu(null);
1 'use strict' 2 const electron = require('electron'); 3 const app = electron.app; 4 const BrowserWindow = electron.BrowserWindow; 5 const electronMenu=electron.Menu; 6 7 let mainWindow = null; 8 9 app.on('window-all-closed', () => { 10if (process.platform !== 'darwin') { 11app.quit(); 12} 13 }); 14 15 app.on('ready', () => { 16electronMenu.setApplicationMenu(null); 17mainWindow = new BrowserWindow(); 18mainWindow.loadURL(`file://${app.getAppPath()}/index.html`); 19mainWindow.on('closed', () => { 20mainWindow = null; 21}); 22 }); View Code
2. 自動隱藏選單
設定BrowserWindow的屬性,autoHideMenuBar: true。
設定autoHideMenuBar隱藏後,按Alt,可顯示出選單選項。
1 'use strict' 2 const electron = require('electron'); 3 const app = electron.app; 4 const BrowserWindow = electron.BrowserWindow; 5 6 let mainWindow = null; 7 8 app.on('window-all-closed', () => { 9if (process.platform !== 'darwin') { 10app.quit(); 11} 12 }); 13 14 app.on('ready', () => { 15mainWindow = new BrowserWindow({autoHideMenuBar:true}); 16mainWindow.loadURL(`file://${app.getAppPath()}/index.html`); 17mainWindow.on('closed', () => { 18mainWindow = null; 19}); 20 }); View Code
另:自定義選單設定,可參考 ofollow,noindex">https://segmentfault.com/a/1190000008473121
視窗設定
直接設定Window的屬性
mainWindow = new BrowserWindow({width:600,height:400,icon: 'images/myIcon.ico'});
另:如果需要隱藏window的標題欄,可以設定frame:false;
圖上:Demo
注: GitHub官方文件與Demo: electron-api-demos-Zh_CN