electron自定义桌面应用的外观

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

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

刷新页面返回顶部

龙恩0707 ..........

electron自定义桌面应用的外观

About