Electron指南 - 疾速入门

2024年3月8日 256次阅读 来源: min

疾速入门

Electron供应了雄厚的当地（操纵体系）的API，使你能够运用纯JavaScript来建立桌面运用程序。与别的种种的Node.js运转时差别的是Electron专注于桌面运用程序而不是Web服务器。

这并不意味着Electron是一个绑定图形用户界面（GUI）的JavaScript库。取而代之的是，Electron运用Web页面作为它的图形界面，所以你也能够将它看做是一个由JavaScript掌握的迷你的Chrominum浏览器。

主历程

在Electron里，运转package.json里的main剧本的历程被称为 主历程 ，运转在主历程里的剧本能够经由过程建立Web页面来显现GUI。

衬着历程

由于Electron运用Chrominum来显现Web页面，所以Chrominum的多历程架构也一样被运用。每一个页面在Electron里是运转在本身的历程里，这些历程被称为 衬着历程 。
在浏览器里，Web页面一般运转在一个沙盒环境里，它不能接见当地的资本。但在Electron里，在Web页面中经由过程运用Node.js API能够举行底层的操纵体系交互。

主历程与衬着历程的差别

主历程经由过程组织 BrowserWindow 实例来建立Web页面。每一个 BrowserWindow 实例在本身的衬着历程里运转Web页面。当一个 BrowserWindow 被烧毁后，响应的衬着历程也一样被停止。

主历程治理一切的Web页面以及相干的衬着历程。每一个衬着历程都是相互断绝的，而且只知道运转在该历程里的Web页面。

在Web页面里，挪用当地GUI是不允许的，由于在Web页面里治理当地GUI资本是异常风险的而且异常轻易致使资本泄漏。假如你想在Web页面举行GUI操纵，该Web页面的衬着历程必需经由过程和主历程通讯来要求主历程处置惩罚这些操纵。

在Electron里，主历程和衬着历程有许多通讯的要领。比方 ipcRanderer 和 ipcMain 模块是用来发送音讯的，remote 模块支撑RPC作风的通讯。能够参考FAQ里的如安在差别的Web页面里同享数据

编写第一个Electron运用

一般，一个Electron运用的构造相似下面：

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

package.json 的花样与Node的模块花样是一致的，个中 main 字段指定的剧本就是你运用的启动剧本，该剧本将运转在主历程中。你的 package.json 或许看上去像下面这个例子：

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

注重 假如在package.json 中的 main 字段没有指定，那末Electron将尝试装载一个名为 index.js 的剧本。

main.js 应该建立窗口而且处置惩罚体系事宜，一个典范的例子以下：

const electron = require('electron');
// 掌握运用生命周期的模块
const {app} = electron;
// 建立当地浏览器窗口的模块
const {BrowserWindow} = electron;

// 指向窗口对象的一个全局援用，假如没有这个援用，那末当该javascript对象被渣滓接纳的
// 时刻该窗口将会自动封闭
let win;

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

  // 而且装载运用的index.html页面
  win.loadURL(`file://${__dirname}/index.html`);

  // 翻开开辟工具页面
  win.webContents.openDevTools();

  // 当窗口封闭时挪用的要领
  win.on('closed', () => {
    // 消除窗口对象的援用，一般而言假如运用支撑多个窗口的话，你会在一个数组里
    // 寄存窗口对象，在窗口封闭的时刻应该删除响应的元素。
    win = null;
  });
}

// 当Electron完成初始化而且已建立了浏览器窗口，则该要领将会被挪用。
// 有些API只能在该事宜发生后才被运用。
app.on('ready', createWindow);

// 当一切的窗口被封闭后退出运用
app.on('window-all-closed', () => {
  // 关于OS X体系，运用和响应的菜单栏会一向激活直到用户经由过程Cmd + Q显式退出
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  // 关于OS X体系，当dock图标被点击后会从新建立一个app窗口，而且不会有其他
  // 窗口翻开
  if (win === null) {
    createWindow();
  }
});

// 在这个文件背面你能够直接包括你运用特定的由主历程运转的代码。
// 也能够把这些代码放在另一个文件中然后在这里导入。

末了 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>

运转你的运用

一旦你建立了你的 main.js, index.html, 以及 package.json 文件，你或许会想要尝试在当地运转运用来测试它，确保运用是根据你预期的体式格局事情。

electron-prebuilt

electron-prebuilt 是一个 npm 的模块，它包括了一个预编译的Electron版本。

假如你已经由过程 npm 将该模块全局装置了，那末你只须要在你运用的源代码目次西下运转下面的敕令：

electron .

假如你只是在当地装置了该模块，那末运转：

./node_modules/.bin/electron .

手动下载Electron二进制包

假如手动下载了Electron二进制包，你能够经由过程实行个中包括的二进制文件来直接实行你的运用。

Windows

$ .\electron\electron.exe your-app\

Linux

$ ./electron/electron your-app/

OS X

$ ./Electron.app/Contents/MacOS/Electron your-app/

这里的 Electron.app 是Electron宣布包的一部分，你能够在这里下载。

运转宣布

在完成运用开辟以后，你能够根据运用宣布指点建立一个宣布，然后实行打包的运用。

尝试例子

经由过程运用 atom/electron-quick-start 来克隆而且运转教程的代码。

注重 运转该例子须要在你的体系中装置Git以及Node.js（它也包括了npm)。

# 克隆堆栈
$ git clone https://github.com/electron/electron-quick-start
# 进入克隆的堆栈
$ cd electron-quick-start
# 装置依靠然后运转运用
$ npm install && npm start

翻译自这里

    原文作者：min
    原文地址: https://segmentfault.com/a/1190000005363765
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞