Electron学习入门

一、安装electron，不建议全局安装，这样每一个app可使用不一样的electron版本了

二、配置package.json中的script下的start属性的值为electron .

Electron应用结构

主进程

Package.json的main脚本的进程称为主进程。主进程中的脚本经过建立web页面来展现用户界面，一个应用有且只有一个主进程

渲染进程

因为 Electron 使用了 Chromium 来展现 web 页面，因此 Chromium 的多进程架构也被使用到。 每一个 Electron 中的 web 页面运行在它本身的渲染进程中。 Electron 的用户在 Node.js 的 API 支持下能够在页面中和操做系统进行一些底层交互。

主进程和渲染进程之间的区别

主进程使用 BrowserWindow 实例建立页面。 每一个 BrowserWindow 实例都在本身的渲染进程里运行页面。 当一个 BrowserWindow 实例被销毁后，相应的渲染进程也会被终止。

 

主进程管理全部的web页面和它们对应的渲染进程。 每一个渲染进程都是独立的，它只关心它所运行的 web 页面。

 

在页面中调用与 GUI 相关的原生 API 是不被容许的，由于在 web 页面里操做原生的 GUI 资源是很是危险的，并且容易形成资源泄露。 若是你想在 web 页面里使用 GUI 操做，其对应的渲染进程必须与主进程进行通信，请求主进程进行相关的 GUI 操做。

使用Electron的API

许多API只能被用于主进程中，有些API又只能被用于渲染进程，又有一些主进程和渲染进程中均可以使用

经过require的方式将其包含在模块中以此，获取Electron的API

由于进程之间的通讯是被容许的, 因此渲染进程能够调用主进程来执行任务。 Electron经过remote模块暴露一些一般只能在主进程中获取到的API。 为了在渲染进程中建立一个BrowserWindow的实例，咱们一般使用remote模块为中间件

使用 Node.js 的 API

Electron同时在主进程和渲染进程中对Node.js 暴露了全部的接口。 这里有两个重要的定义：

 

1) 全部在Node.js可使用的API，在Electron中一样可使用。 在Electron中调用以下代码是有用的

2) 你能够在你的应用程序中使用Node.js的模块。 选择您最喜欢的 npm 模块。 npm 提供了目前世界上最大的开源代码库，那里包含良好的维护、通过测试的代码，提供给服务器应用程序的特点功能也提供给Electron

调试应用

1、渲染进程

最普遍使用来调试指定渲染进程的工具是Chromium的开发者工具集。 它能够获取到全部的渲染进程，包括BrowserWindow的实例，BrowserView以及WebView。 您能够经过编程的方式在BrowserWindow的webContents中调用openDevTool()API来打开它们：

const { BrowserWindow } = require('electron')

let win = new BrowserWindow()

win.webContents.openDevTools()Copy

2、主进程

调试主进程有点棘手, 由于您不能简单地打开开发者工具来调试它们。 多亏了谷歌和Node.js的紧密合做，Chromium开发者工具能够被用来调试Electron的主进程，不然你也许会遇到许多怪事就像require不能再控制台中显示。

打包

安装打包工具npm install electron-packager -g

配置打包命令

"scripts": {

    "start": "electron .",

    "pack": "electron-packager . myClient --win --out ../myClient --arch=x64 --app-version=0.0.1 --electron-version=2.0.0"

  }

打包的时候能够规定目标文件的名称