Electron学习入门

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

2、配置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"

}

打包的时候可以规定目标文件的名称