electron 大致结构

一、Electron支持的平台：

OS X
Windows
Linux

二、一个标准的electron app包含的结构：

Windows 或是 Linux中：
electron/resources/app
|_package.json
|_main.js
|_index.html

三、electron程序打包：

通常使用asar来进行打包，electron中通常包含两种API：
Node.js和Chromium提供的Web API
Node API如fs.readFile

四、使用Native Node模块

安装Native模块的三种方式：
1)electron-rebuild
2)使用npm
3)使用node-gyp 

五、测试主进程

window下面的DevTools只能测试渲染进程，为了测试主进程可使用--debug或是--debug-brk分支也可使用node-inspector进行测试

六、electron简述

electron可让你使用javascript来建立桌面应用，能够将其理解为Node.js的一个变体，它提供了丰富的运行时访问Native的API接口。可是electron并非一个GUI库，相反的，electron使用web页面做为它的GUI，因此能够将它看作是一个小的Chromium浏览器。在Electron中运行package.json和main脚本的进程成为主进程，能够在主进程中经过建立Web页面来显示GUI。electron使用Chromium的多进程机制来渲染页面，每一个页面拥有一个本身的进程，该进程成为渲染进程。在electron中用户能够经过Node.js的API跨过网页运行的沙箱去访问更为底层的系统应用。
主进程经过使用BrowserWindow实例建立页面，每一个BrowserWindow都是在本身的渲染进程中运行。当一个BrowserWindow实例被销毁的时候对应的渲染进程也被销毁了。主进程管理着全部的网页和它们对应的渲染进程，每一个渲染进程只关心本身的网页。渲染进程如果想访问GUI操做，须要向主进程发出请求。在electron中主进程和渲染进程之间有几种交互方式：ipcRenderer和ipcMain来发送messages。

七、一个简单而完整的Electron app

package.json文件的格式和Node的模块是同样的，main.js是app启动脚本，将会运行在主进程中。若是main没有出如今package。json中，electron将会尝试装载index.js
main.js须要建立window界面并处理系统事件运行electron程序：
能够先用npm装上electron-prebuilt，进入app的root目录
执行electron .

八、桌面环境的整合

关于Notification通知：
HTML5的API只能是在渲染进程中使用，Windows，Linux和OS X中都支持通知机制。
其余的功能看具体的桌面环境进行相应的配置

九、在线和离线事件监测

electron主进程中并不能利用HTML5中的navigator对象进行事件探测，可是能够利用electron中的交互工具将事件监测结果反馈给主进程。使用ipcMain和ipcRender进行事件信息的传递
十、electron中API概要
electron支持全部的Node.js的内建模块，也支持第三方的node模块，包括native模块。electron同时提供了额外的native内建模块能够用于开发原生的桌面应用。一些模块只能在主进程中使用，一些模块只能是在渲染进程中使用，而有一些是通用的模块。规则为：若是模块是GUI或是和底层系统相关的就是只能在主进程中使用。
主进程就是main.js而渲染进程是在index.html中运行。

十一、进程对象

进程process对象和通常的node区别在于：
process.type 进程的类型能够是browser或是renderer
process.version['electron'] electron的版本
process.version['chome'] Chromium的版本
process.resourcesPath Javascript脚本文件的路径
process.mas 构建Mac应用商店时值为true，其余的为undefined。

十二、事件

当electron装载内部初始化脚本的时候，页面和主脚本文件就开始装载
此时会触发事件。

1三、electron支持的Chromium命令行开关

--client-certificate=path
--ignore-connections-limit=domains
--disable-http-cache
--remote-debugging-port=port
--js-flags=flags
--proxy-server=address:port
--proxy-bypass-list=hosts
--proxy-pac-url=url
--no-proxy-server
--host-rules=rules
--host-resolver-rules=runles
...

1四、环境变量：

export ELECTRON_ENABLE_LOGGING=true
ELECTRON_RUN_AS_NODE
ELECTRON_ENABLE_LOGGING
...

1五、定制DOM元素

File对象：
DOM的File接口经过HTML5的API提供了用户操做native文件的方法。electron增长了path属性接口能够直接访问文件的真实路径
标签：
webview标签在electron app中植入额外的内容，和iframe不一样的是webview运行在一个独立的进程中，它并不具备和你的页面相同的权限，全部app和它的交互都是异步进行的，这使得app在使用植入内容的时候更加安全。
window.open函数：
当调用window.open的时候会在页面中新建立一个窗口，默认状况下建立的BrowserWindow将会继承父类窗口的options。

1六、主进程的模块

1)app模块：
负责控制应用程序的生命周期如
const app = require('electron').app;
app.on('window-all-closed', function(){
app.quit();
});
app对象能够发出如下事件：
will-finish-launching
当程序完成基本的启动，相似于ready事件。启动crash事件监听或是自动更新。大多数状况下，须要在ready事件中处理更多的事情。
ready
electron完成初始化
window-all-closed
当全部的窗口都已经关闭的时候触发，只有在当程序将要推退出的时候触发。当用户调用app.quit()的时候，electron会关闭全部的窗口并
发出will-quit事件，此时便不会发出window-all-clised事件。
before-quit
当程序开始关闭窗口的时候发出,调用event.prevertDefault()将会阻止默认的行为。
will-quit
当窗口都已经关闭，程序即将退出的时候发出该事件。
quit
程序退出
...
2)autoUpdater模块
该模块提供了Squirrel自动更新框架一个接口
3)BrowserWindow模块
能够用于建立一个新的浏览器窗口
4)contentTracing模块
用来收集Chromium内容模块产生的跟踪信息。
5)dialog模块
用来显示原生系统对话框，好比打开文件对话框
6)globalShortcut模块
用来注册和注销全局的键盘快捷方式。
7)ipcMain模块
该模块是EventEmitter的一个实例对象，在主进程中使用，能够发送同步或是异步的message和渲染进程 进行交互。
8)Menu模块
用来建立一个原生的菜单，好比上下文菜单。
9)MenuItem模块
用来往菜单中添加菜单子项。
10)powerMonitor模块
用来显示电池电量变化，只能是在主进程中使用，并且只能是在ready事件已经发出的状况下。
11)powerSaveBlocker模块
用来阻止系统进入省电模式，休眠模式。
12)protocol模块
用来注册一个定制的协议或是声明使用一个已经存在的协议
13)session模块
用来建立新的Session对象，保存本地对象等操做。
14)webContents模块
这是一个EventEmitter，负责渲染和控制一个网页，是一个BrowserWindow的属性。
15)Tray模块
一个Tray表明着一个操做系统通知区域的一个icon，一般状况下是和一个上下文菜单绑定的。

1七、渲染进程的模块

1)desktopCapturer模块
用来获取可用的资源，能够用getUserMedia来获取。
2)ipcRenderer对象
是一个EventEmitter对象的实例，提供了一些方法能够用来和主进程之间进行message交互。
3)remote模块
提供了一个简单的跨进程之间通讯的方法。GUI相关的模块只能是在主进程中使用像是dialog和menu等，若是想要在渲染进程中使用就须要使用ipc机制向主进程申请。remote模块有点像是java中的RMI
4)webFrame模块
用来定制当前网页的渲染。

1八、两个进程共同的模块

1)clipboard模块
提供了执行复制和粘贴操做的方法。
2)crashReporter模块
发送程序的奔溃报告。
3)nativeImage模块
在electron中获取图片能够经过文件的路径或是使用nativeImage对象。
4)screen模块
这是一个EventEmitter，保存了关于屏幕的全部相关信息，像是大小，显示，指针位置等等。直到ready事件触发以后才能使用。
5)shell模块
同了和桌面整合相关的函数。

1九、开发electron相关知识

1)代码格式
能够经过运行npm run lint来显示利用cpplint或是eslint获取到的代码风格。
javascript中：
文件不要使用空行结尾
文件必须包含-而不是下划线_
const和let的使用
function中=>返回值的声明
字符串的模板使用，不在使用+，注意$的使用
API的名称中更倾向于使用setter和getter而不是JQuery中
的直接.text之类的用法。
2)源码目录结构
Electron
├── atom - C++ 源码.
| ├── app - 系统程序入口.
| ├── browser - 包含了主窗口，UI和全部主进程相关的东西
| | 
| | ├── ui - 为不一样的平台实现不用的UI界面.
| | | ├── cocoa - Cocoa指定源码.
| | | ├── gtk - GTK+ 指定源码.
| | | └── win - Windows GUI指定源码.
| | ├── api - 主进程API的实现.
| | ├── net - 网络相关代码.
| | ├── mac - Mac指定Objective-C源代码.
| | └── resources - icon，平台相关的文件等等.
| ├── renderer - 运行在渲染进程的代码.
| | └── api - 渲染进程中API的实现代码.
| └── common - 主进程和渲染进程共同使用的代码,包括一些函数工具，以及整合node的信息到Chromium的message loop中。
| └── api - 通用的API实现，以及electron内建模块的实现
| 
├── chromium_src - 从Chromium中拷贝的源代码.
├── default_app - electron默认显示的页面
| 
├── docs - 文档文件.
├── lib - JavaScript的源代码.
| ├── browser - Javascript主进程初始化代码.
| | └── api - Javascript API实现代码.
| ├── common - JavaScript通用的代码
| | └── api - Javascript通用API实现代码.
| └── renderer - Javascript渲染进程初始化代码.
| └── api - Javascript渲染进程API实现代码.
├── spec - 自动化测试.
├── atom.gyp - electron的构建规则.
└── common.gypi - 其余的设置和像是node组件或是breakpad组件的构建规则.

其余的文件夹：
script - 构建，打包，测试相关的脚本文件
tools - gyp文件的帮助脚本，不能被用户直接调用的.
vendor - 第三方依赖库源码.
node_modules - 构建的时候须要使用的第三方node模块.
out - ninja输出的临时文件目录.
dist - 在建立distribution的时候生成的临时目录.
external_binaries - 下载的第三方不支持gyp的二进制框架.

20、构建系统

1)electron利用gyp来生成项目，利用ninja来构建项目。项目的配置信息是在.gyp或是.gypi文件中。
gyp文件包含electron项目的构建规则：
atom.gyp定义了electron自己如何构建
common.gyp调整Node的构建配置以适应Chromium
vendor/brightray/brightray.gyp定义了brightray如何建立包含了连接Chromium的默认配置
vendor/brightray/brightray.gypi包含了通用的构建配置
2)组件的构建
因为Chromium是一个大工程，连接的时候须要很长的事件，因此Chromium引进了组件构建：将每一个组件做为一个独立的共享库，使得连接的时候文件大小和执行速度获得提高。
在electron中若是是Debug构建的话，二进制文件会连接到Chromium的共享库版本以提高连接速度。若是是Release构建的话，二进制文件会连接到静态共享库中以得到最佳文件大小和执行效率。
3)项目的两个阶段生成方式
Release和Debug构建，能够连接不一样的库。electron使用的是R和D做为对应的标示。

 

以上只是本身调研electron时候的一些简要的笔记，没法做为详细文档存储。具体的electron说明文档见：http://electron.atom.io/docs/v0.37.5/

原文连接：http://www.2cto.com/kf/201604/499352.html