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';
  }
}