electron-环境搭建

安装
npm install -g electron
创建项目
1. 通过git创建
  git clone https://github.com/electron/electron-quick-start.git
  cd electron-quick-start
  npm install && npm start

运行

#到应用根目录下
npm start
#或者
electron .

项目架构说明

2019/06/04  20:43               603 index.html
2019/06/04  20:43             1,808 main.js
2019/06/04  20:43               456 package.json
2019/06/04  20:43               174 renderer.js

总共四个文件组成

mian.js 是程序入口文件

renderer.js: index.html文件需要此文件，并将在该窗口的渲染器进程中执行。此过程中提供了所有Node.js API。

index.html 视图文件

主进程

在 Electron 里，运行 package.json 里 main 脚本的进程被称为主进程。在主进程运行的脚本可以以创建 web 页面的形式展示 GUI。

渲染进程

由于 Electron 使用 Chromium 来展示页面，所以 Chromium 的多进程结构也被充分利用。每个 Electron 的页面都在运行着自己的进程，这样的进程我们称之为渲染进程。

在一般浏览器中，网页通常会在沙盒环境下运行，并且不允许访问原生资源。然而，Electron 用户拥有在网页中调用 io.js 的 APIs 的能力，可以与底层操作系统直接交互。

主进程与渲染进程的区别

主进程使用 BrowserWindow 实例创建网页。每个 BrowserWindow 实例都在自己的渲染进程里运行着一个网页。当一个 BrowserWindow 实例被销毁后，相应的渲染进程也会被终止。

主进程管理所有页面和与之对应的渲染进程。每个渲染进程都是相互独立的，并且只关心他们自己的网页。

由于在网页里管理原生 GUI 资源是非常危险而且容易造成资源泄露，所以在网页面调用 GUI 相关的 APIs 是不被允许的。如果你想在网页里使用 GUI 操作，其对应的渲染进程必须与主进程进行通讯，请求主进程进行相关的 GUI 操作。

在 Electron，我们提供用于在主进程与渲染进程之间通讯的 ipc 模块。并且也有一个远程进程调用风格的通讯模块 remote。

使用热加载插件

npm install --save-dev electron-reload

如何安装原生模块

最简单方式

最简单的方式就是通过 electron-rebuild 包重新编译原生模块，它帮你自动完成了下载 headers、编译原生模块等步骤：

npm install --save-dev electron-rebuild

# 每次运行"npm install"时，也运行这条命令
./node_modules/.bin/electron-rebuild

# 在windows下如果上述命令遇到了问题，尝试这个：
.\node_modules\.bin\electron-rebuild.cmd

使用devtron debug

Install Devtron

$ npm install --save-dev devtron

// 从应用程序的DevTools的控制台选项卡中运行以下命令
require('devtron').install()
// 您现在应该看到Devtron选项卡添加到DevTools

suveng