Electron入门引见

2019年8月30日 233次阅读 来源: 王下邀月熊_Chevalier

Github 系列文章地点
笔者前两天心血来潮做了个MACOS下能够举行OCR图文辨认的小东西，发明Electron 在1.x以后API发生了挺大的变化，预计也是我好久没碰了，所以盘算把这些系列整顿下扔出来，有兴致的也能够关注笔者的ElectronOCR这个实践项目，自认为照样有点用的，不过貌似没啥人喜好。

Introduction

Electron 能够让你运用纯 JavaScript 挪用雄厚的原生 APIs 来制造桌面运用。你能够把它看做是专注于桌面运用而不是 Web 服务器的io.js 的一个变体。这不意味着 Electron 是绑定了 GUI 库的 JavaScript。相反，Electron 运用 Web 页面作为它的 GUI，所以你能把它看做成一个被 JavaScript 掌握的，精简版的 Chromium 浏览器。

Process(历程)

主历程

在 Electron 里，运转 package.json 里 main 剧本的历程被称为主历程。在主历程运转的剧本能够以建立 web 页面的情势展现 GUI。

衬着历程

由于 Electron 运用 Chromium 来展现页面，所以 Chromium 的多历程构造也被充分利用。每一个 Electron 的页面都在运转着本身的历程，如许的历程我们称之为衬着历程。在平常浏览器中，网页一般会在沙盒环境下运转，而且不许可接见原生资本。然则，Electron 用户具有在网页中挪用 io.js 的 APIs 的才能，能够与底层操纵系统直接交互。

主历程与衬着历程的区分

主历程运用 BroswerWindow 实例建立网页。每一个 BroswerWindow 实例都在本身的衬着历程里运转着一个网页。当一个 BroswerWindow 实例被烧毁后，响应的衬着历程也会被停止。主历程治理一切页面和与之对应的衬着历程。每一个衬着历程都是互相自力的，而且只体贴他们本身的网页。由于在网页里治理原生 GUI 资本是异常风险而且轻易形成资本泄漏，所以在网页面挪用 GUI 相干的 APIs 是不被许可的。假如你想在网页里运用 GUI 操纵，其对应的衬着历程必需与主历程举行通信，要求主历程举行相干的 GUI 操纵。
在 Electron，我们供应用于在主历程与衬着历程之间通信的 ipc 模块。而且也有一个长途历程挪用作风的通信模块 remote。

Reference

Tutorials & Docs

Boilerplate

Practice

Quick Start

Installation

  • electron-prebuild

npm install -g electron-prebuilt

假如你已用 npm 全局装置了 electron-prebuilt，你只须要根据以下体式格局直接运转你的运用：

electron .

假如你是部分装置，那运转：

./node_modules/.bin/electron .

  • 手工下载 Electron 二进制文件

假如你手工下载了 Electron 的二进制文件，你也能够直接运用个中的二进制文件直接运转你的运用。

（1）Windows

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

（2）Linux

$ ./electron/electron your-app/

（3）OS X

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

Electron.app 内里是 Electron 宣布包，你能够在这里下载到。

Webpack

DevTools

《Electron入门引见》


npm install --save-dev devtron
require('devtron').install()

HelloWorld

大体上，一个 Electron 运用的目次构造以下：

your-app/
├── package.json //通用的node项目的声明文件
├── main.js //主历程衬着文件

├── renderer.js //衬着历程文件

└── index.html //主进口文件

package.json的花样和 Node 的完全一致，而且谁人被 main 字段声明的剧本文件是你的运用的启动剧本，它运转在主历程上。你运用里的 package.json 看起来应当像：

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

注重：假如 main 字段没有在 package.json 声明，Electron会优先加载 index.js。

主历程

main.js 应当用于建立窗口和处理系统时候，一个典范的例子以下：

/**
 * Created by apple on 16/6/3.
 */
const electron = require('electron');
// 用于掌握运用生命周期
const {app} = electron;
// 用于建立当地窗口
const {BrowserWindow} = electron;

//为Window对象建立一个全局的援用,不然能够被JavaScript的渣滓接纳机制自动接纳
let win;

/**
 * @function 建立窗口
 */
function createWindow() {
    // 建立类似于浏览器的窗口
    win = new BrowserWindow({width: 800, height: 600});

    // 加载运用进口文件,本文件为测试文件,因而加载的是测试
    win.loadURL(`file://${__dirname}/dist/app.html`);

    // 启动调试东西,假如是开辟环境下则不须要开启
    win.webContents.openDevTools();

    // 设置窗口封闭事宜
    win.on('closed', () => {
        //由于上面是设置了一个全局援用,因而这里须要对该对象消除援用
        //假如你的运用支撑翻开多窗口,能够把一切的援用存入一个数组中,然后在这里动态删除
        win = null;
    });
}

// 在基础环境准备好以后的回调
app.on('ready', createWindow);

// 一切窗口都封闭以后的回调
app.on('window-all-closed', () => {
    //在OSX中经常是用户虽然封闭了主窗口,然则依然愿望运用Menu Bar,因而这里不举行强行封闭
    // On OS X it is common for applications and their menu bar
    // to stay active until the user quits explicitly with Cmd + Q
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

// 运用被从新激活以后的回调
app.on('activate', () => {
    // 在Dock中的Menu Bar被点击以后从新激活运用
    if (win === null) {
        createWindow();
    }
});

进口文件

末了，你想展现的 index.html ：

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8">

    <title>Hello World!</title>

  </head>

  <body>

    <h1>Hello World!</h1>

    <!-- All of the Node.js APIs are available in this renderer process. -->

    We are using node <script>document.write(process.versions.node)</script>,

    Chromium <script>document.write(process.versions.chrome)</script>,

    and Electron <script>document.write(process.versions.electron)</script>.

  </body>



  <script>

    // You can also require other files to run in this process

    require('./renderer.js')

  </script>

</html>

衬着历程

实际上，在Electron项目中，关于Hot-Reload等等设置都和笔者在我的Webpack套装中说起的一系列设置计划。关于这方面的详细实践能够参考笔者ElectronOCR这个实战项目。

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