简介：

Electron 可以让你使用纯 JavaScript 调用丰富的原生(操作系统) APIs 来创造桌面应用。 你可以把它看作一个 Node. js 的变体，它专注于桌面应用而不是 Web 服务器端。

这不意味着 Electron 是某个图形用户界面（GUI）库的 JavaScript 版本。 相反，Electron 使用 web 页面作为它的 GUI，所以你能把它看作成一个被 JavaScript 控制的，精简版的 Chromium 浏览器。

从开发的角度来看, Electron application 本质上是一个 Node. js 应用程序。 与 Node.js 模块相同，应用的入口是 package.json 文件。 一个最基本的 Electron 应用一般来说会有如下的目录结构：

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

package.json 如下：

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

安装 Electron:

npm install --save-dev electron

main.js

const { app, BrowserWindow } = require('electron')

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

 // 加载index.html文件
 win.loadFile('index.html')

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

 // 当 window 被关闭，这个事件会被触发。
 win.on('closed', () => {
  // 取消引用 window 对象，如果你的应用支持多窗口的话，
  // 通常会把多个 window 对象存放在一个数组里面，
  // 与此同时，你应该删除相应的元素。
  win = null;
 });
}

app.whenReady().then(createWindow)

主进程和渲染器进程

Electron 运行 package.json 的 main 脚本的进程被称为主进程。 在主进程中运行的脚本通过创建web页面来展示用户界面。 一个 Electron 应用总是有且只有一个主进程。

由于 Electron 使用了 Chromium 来展示 web 页面，所以 Chromium 的多进程架构也被使用到。 每个 Electron 中的 web 页面运行在它自己的渲染进程中。

在普通的浏览器中，web页面通常在沙盒环境中运行，并且无法访问操作系统的原生资源。 然而 Electron 的用户在 Node.js 的 API 支持下可以在页面中和操作系统进行一些底层交互。

参考：

https://www.electronjs.org/



真诚赞赏，手留余香

微信支付