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({ 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({ 400, height: 200, minWidth: 300, maxWidth: 600, minHeight: 150, maxHeight: 450 });
如上，我们的视窗的默认宽度和高度分别为400 * 200; 我们打开的时候，就是默认的宽度和高度，当然我们也可以对该视窗进行拖动到最大 maxWidth(600px) 和 maxHeight(450). 如下所示：
当然我们也可以进行拖动到最小视窗，比如最小高度为150px，和最小宽度 300px。
如上我们设置了默认视窗大小，当我们运行我们的运用的时候，该运用视窗默认居中显示，当然我们可以设置该视窗的 x 轴 和 y轴显示位置，比如如下代码设置：
mainWindow = new BrowserWindow({ 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({ 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 }, 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 }, 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 }, 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模式，进入该模式后，我们也可以点击按钮退出。