使用Electron开发Desktop App

Electron可以让你使用JavaScript开发桌面应用程序，它提供的JavaScript运行时和丰富的原生(操作系统)Api，你也可以查看Nodejs运行时，只需要关注桌面部分

July 04, 2019

4 min read

electron node.js javascript

Electron可以让你使用JavaScript开发桌面应用程序，它提供的JavaScript运行时和丰富的原生(操作系统)Api，你也可以查看Nodejs运行时，只需要关注桌面部分

这不意味着Electron是一个JavaScript绑定到用户界面库(GUI)，Electron使用Web页面作为GUI，你将会看到的一个通过JavaScript控制的最小化浏览器

Main Process主进程

有一个进程它将会运行package.json的main脚本，称它为主进程，脚本将会运行在主进程中运行，通过创建web页面展示GUI

Renderer Process渲染进程

Electron使用Chromium展示web页面，Chromium也是多进程架构，每个web页面在Electron运行着自己的进程，称他为渲染进程

主进程和渲染进程不同点

主进程通过创建BrowserWindow实例来创建web页面，每个BrowserWindow实例在它自己的渲染进程中运行web页面，当BrowserWindow撤销时，渲染进程也会被终止

主进程管理全部web页面和它相应的渲染进程，每个渲染进程是孤立的，仅在相应的web页面中运行

在web页面，调用原生GUI以及相关的Api是不允许的，因为在web页面中管理原生的GUI资源是非常危险并却很容易导致资源泄露，如果你想在web页面中进行GUI操作，web页面的渲染进程必须和主进程通讯，由主进程负责操作

在Electron，我们有几种方式让主进程和渲染进程进行通许，使用ipcRenderer和ipcMain模块可以发送消息，使用RPC方式通讯，这里说明怎么与web页面共享数据

编写你的第一个Electron App

通常， Electron app结构是这样的

your-app/
├── package.json
├── main.js
└── index.html

格式化后的package.json其实是Nodejs的模块，并且指定main字段脚本启动app，主进程将会运行

{
  "name"    : "your-app",
  "version" : "0.1.0",
  "main"    : "main.js"
}

注意:在package.json没有指定main字段，Electron 将会载入index.js

main.js将会创建Windows和处理系统事件

const electron = require('electron');
// 该模块控制应用生命周期
const {app} = electron;
// 该模块可以浏览器原生窗口
const {BrowserWindow} = electron;

// 保留window对象全局引用，如果你不需要它，
// 当JavaScript进行GC(garbage collected)时窗口将会自动关闭
let win;

function createWindow() {
  // 创建浏览器窗口
  win = new BrowserWindow({width: 800, height: 600});

  // 载入app的index.html
  win.loadURL(`file://${__dirname}/index.html`);

  // 打开开发者工具.
  win.webContents.openDevTools();

  // 当窗口关闭时触发该事件
  win.on('closed', () => {
   // 如果你的app支持多个窗口，你需要将windows保存一个数组中。
   // 这时，当你删除一个元素后就会删除对应的窗口
    win = null;
  });
}

// 当 Electron 完成初始化完成并且已经创建浏览器窗口，这个方法会被调用。
// 某些API仅在这个事件发生才可以调用
app.on('ready', createWindow);

// 当全部窗口关闭时即退出
app.on('window-all-closed', () => {
  // 在macOS应用会一直停留在菜单栏中直到用户按下Cmd + Q才会退出
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  // 当点击dock图标并且没有窗口被打开时，在App重新创建中窗口
  if (win === null) {
    createWindow();
  }
});

// 你可以在这个文件包含主进程剩余的代码，你也可以分离到其它文件中并通过require导入

最后index.html展示页面

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using node <script>document.write(process.versions.node)</script>,
    Chrome <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.
  </body>
</html>