electron自定义桌面应用的外观

时间 2019-11-05

标签 electron 自定义桌面应用外观繁體版

原文原文链接

1. 控制应用视窗大小javascript

构建桌面应用时，咱们要考虑咱们的应用程序须要如何让用户来使用，那么咱们须要提供一个视窗，那么该视窗能够最大化展现，也能够最小化展现，固然咱们也但愿能够全屏运行。html

在electron中，咱们能够配置咱们的视窗的尺寸大小。首先仍是来看下咱们的demo的项目结构以下：前端

|---- electron-demo
| |--- node_modules         # 依赖包
| |--- index.html           # html文件
| |--- main.js              # 入口文件
| |--- package.json
| |--- app.js

package.json 以下：java

{
  "name": "window-electron",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    
  },
  "author": "kongzhi",
  "license": "ISC",
  "dependencies": {
    "electron": "^6.0.0"
  }
}

如上，入口的文件是 main.jsnode

index.html 代码以下：linux

<html>
  <head>
    <title>window-electron</title>
  </head>
  <body>
    <h1>hello electron</h1>
  </body>
</html>

main.js 代码以下：ios

'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 . 便可看到以下弹窗：
git

更多的参数请看具体API（https://electronjs.org/docs/api/browser-window）github

2. 设置应用视窗的尺寸web

如上咱们经过在 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