1. 控制應用視窗大小
構建桌面應用時，我們要考慮我們的應用程序需要如何讓用戶來使用，那么我們需要提供一個視窗，那么該視窗可以最大化展示，也可以最小化展示，當然我們也希望可以全屏運行。
在electron中，我們可以配置我們的視窗的尺寸大小。首先還是來看下我們的demo的項目結構如下：
|---- electron-demo | |--- node_modules # 依賴包 | |--- index.html # html文件 | |--- main.js # 入口文件 | |--- package.json | |--- app.js
package.json 如下：
{ "name": "window-electron", "version": "1.0.0", "description": "", "main": "main.js", "scripts": { }, "author": "kongzhi", "license": "ISC", "dependencies": { "electron": "^6.0.0" } }
如上，入口的文件是 main.js
index.html 代碼如下：
<html> <head> <title>window-electron</title> </head> <body> <h1>hello electron</h1> </body> </html>
main.js 代碼如下：
'use strict'; // 引入 electron模塊 const electron = require('electron'); // 創建 electron應用對象的引用 const app = electron.app; const BrowserWindow = electron.BrowserWindow; // 定義變量 對應用視窗的引用 let mainWindow = null; // 監聽視窗關閉的事件 app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit(); } }); // 將index.html 載入應用視窗中 app.on('ready', () => { mainWindow = new BrowserWindow({ width: 400, height: 200 }); mainWindow.loadURL(`file://${__dirname}/index.html`); mainWindow.on('closed', () => { mainWindow = null; }); });
如上代碼，我們設置了視窗的大小的是 400px * 200px; 現在我們在我們項目中運行 electron . 即可看到如下彈窗：
更多的參數請看具體API（https://electronjs.org/docs/api/browser-window）
2. 設置應用視窗的尺寸
如上我們通過在 BrowserWindow 實列上實現對視窗尺寸設置了 寬度為400px，高度為200px; 我們將視窗的寬度和高度傳遞給了該對象，但是我們還可以設置該視窗的最大寬度(maxWidth)和最小寬度(minWidth)及最大高度(maxHeight)和最小高度(minHeight). 代碼添加如下：
mainWindow = new BrowserWindow({ width: 400, height: 200, minWidth: 300, maxWidth: 600, minHeight: 150, maxHeight: 450 });
如上，我們的視窗的默認寬度和高度分別為400 * 200; 我們打開的時候，就是默認的寬度和高度，當然我們也可以對該視窗進行拖動到最大 maxWidth(600px) 和 maxHeight(450). 如下所示：
當然我們也可以進行拖動到最小視窗，比如最小高度為150px，和最小寬度 300px。
如上我們設置了默認視窗大小，當我們運行我們的運用的時候，該運用視窗默認居中顯示，當然我們可以設置該視窗的 x 軸 和 y軸顯示位置，比如如下代碼設置：
mainWindow = new BrowserWindow({ width: 400, height: 200, minWidth: 300, maxWidth: 600, minHeight: 150, maxHeight: 450, x: 10, y: 10 });
如上設置了 x: 10, y: 10 ， 因此當我們的視窗被打開的時候，我們的視窗默認位置在屏幕的最左上角。如下圖所示：
3. 全屏模式應用
Electron 也支持設置應用為全屏模式，我們可以在BrowserWindow 實列上添加全屏模式的參數 fullscreen 設置為true即可。如下代碼配置:
mainWindow = new BrowserWindow({ width: 400, height: 200, minWidth: 300, maxWidth: 600, minHeight: 150, maxHeight: 450, x: 10, y: 10, fullscreen: true });
如上代碼，我們設置了 fullscreen: true, 當我們在我們項目中運行 electron . 運行的時候就可以全屏打開我們的應用了。當然如果我們不需要全屏的話 把 fullscreen 設置為false即可，默認應該是false。
我們可以在我們的index.html頁面上加一個按鈕，我們點擊該按鈕的話就全屏，我們再點擊該按鈕的話，就退出全屏模式，因此我們在index.html代碼如下：
<html> <head> <title>window-electron</title> </head> <body> <h1>hello electron</h1> <button id="fullscreen" onclick="toggleFullScreen();">go full screen</button> <script type="text/javascript" src="./app.js"></script> </body> </html>
app.js 如下代碼：
'use strict'; // 使用 remote API 來獲取渲染頁面的當前視窗 const remote = require('electron').remote; function toggleFullScreen() { const button = document.getElementById('fullscreen'); const win = remote.getCurrentWindow(); // 判斷當前的視窗是否處於全屏 if (win.isFullScreen()) { win.setFullScreen(false); button.innerText = 'Go full screen'; } else { win.setFullScreen(true); button.innerText = 'Exit full screen'; } }
對於視頻播放應用，進行全屏模式切換是一個非常常見的需求。
electron通過提供了 remote API來讓前端代碼可以和后端代碼進行通信。
使用Electron創建無邊框應用
我們可以在 BrowserWindow 實列上添加一個配置項 frame: false 來設置一個無邊框應用，如下代碼：
mainWindow = new BrowserWindow({ frame: false }); 因此在main.js 配置代碼如下：
mainWindow = new BrowserWindow({ webPreferences: { nodeIntegration: true }, width: 400, height: 200, minWidth: 300, maxWidth: 600, minHeight: 150, maxHeight: 450, x: 10, y: 10, frame: false });
運行效果如下：
如上，當我們沒有邊框的時候，我們不能對視窗進行拖動，我們可以設置該值為true，transparent: true, 來讓窗口是透明的視窗, 如下代碼：
mainWindow = new BrowserWindow({ webPreferences: { nodeIntegration: true }, width: 400, height: 200, minWidth: 300, maxWidth: 600, minHeight: 150, maxHeight: 450, x: 10, y: 10, transparent: true });
效果如下所示：
4. 創建一個kiosk應用
在Electron 中支持在初始化 BrowserWindow 實列化的時候通過傳遞一個名為 kiosk 的屬性來設置應用進入kiosk模式，進入該模式后進行全屏狀態了，如下代碼所示：
mainWindow = new BrowserWindow({ webPreferences: { nodeIntegration: true }, width: 400, height: 200, minWidth: 300, maxWidth: 600, minHeight: 150, maxHeight: 450, x: 10, y: 10, kiosk: true });
如上設置了 kiosk: true， 通過該設置 我們的應用就會進入了全屏模式，如果我們要退出該應用的話，唯一的辦法我們可以通過快捷鍵(Mac OS X 上的快捷鍵的是 Command + Q， window/linux 是Alt + F4).
kiosk模式是屬於一種鎖定屏幕的模式。不過我們也可以在頁面上加一個按鈕，點擊該按鈕的時候進入 kiosk模式，再點擊該按鈕的時候，就退出全屏模式。
index.html 代碼如下：
<html> <head> <title>window-electron</title> </head> <body> <h1>hello electron</h1> <!-- <button id="fullscreen" onclick="toggleFullScreen();">go full screen</button> --> <button id="kiosk" onclick="toggleKiosk();">Enter Koisk</button> <script type="text/javascript" src="./app.js"></script> </body> </html>
app.js 代碼如下：
'use strict'; // 使用 remote API 來獲取渲染頁面的當前視窗 const remote = require('electron').remote; function toggleKiosk() { const button = document.getElementById('kiosk'); const win = remote.getCurrentWindow(); if (win.isKiosk()) { win.setKiosk(false); button.innerText = 'Enter kiosk mode'; } else { win.setKiosk(true); button.innerText = 'Exit koisk mode'; } }
koisk 模式非常有用的，我們第一次單擊該按鈕的時候，我們就會進入 koisk模式，進入該模式后，我們也可以點擊按鈕退出。