代码改变世界

electron自定义桌面应用的外观

2019-08-04 17:27 龙恩0707 阅读(...) 评论(...) 编辑 收藏

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模式,进入该模式后,我们也可以点击按钮退出。

github.com 源码查看和运行demo