electron自定义桌面应用的外观

合集下载

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

electron⾃定义桌⾯应⽤的外观
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 . 即可看到如下弹窗：
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="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模式，进⼊该模式后，我们也可以点击按钮退出。