3.Electron学习01
- 目标
- 基础框架
- 笔记
- 主进程
- 渲染进程
- API文档
- 进程对象
- 事件
- 属性
- 方法
- Chrome命令行开关
- client-certificatepath
- ignore-connections-limitdomains
- disable-http-cache
- remote-debugging-portport
- js-flagsflags
- proxy-serveraddressport
- proxy-bypass-listhosts
- proxy-pac-urlurl
- no-proxy-server
- host-rulesrules
- host-resolver-rulesrules
- ignore-certificate-errors
- ppapi-flash-pathpath
- ppapi-flash-versionversion
- log-net-logpath
- disable-renderer-backgrounding
- enable-logging
- vlog_level
- vmodulepattern
- 内置模块
- 自定义的 DOM 元素
- 在主进程内可用的模块
- 在渲染进程网页内可用的模块
- 在两种进程中都可用的模块
- 特殊模块
- 总结
目标
Electron 框架推荐使用Javascript SE6标准。
- 理解主进程和渲染线程的职责，学会一般编程套路。
- 对所有Electron拥有的模块进行梳理。
基础框架
package.json文件：
// 通过 npm --init -y 生成模板，然后修改
{
"name": "myApp",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"start": "electron ."
},
"keywords": [],
"author": "xin.zhang",
"license": "ISC",
"description": "hello world"
}index.js文件：
// 手工编写，最基本的是生成一个窗口
const {app, BrowserWindow} = require('electron');
let mainWindow = null; // 防止被回收
app.on('window-all-closed', function() {
if (process.platform != 'darwin') {
app.quit();
}
});
app.on('ready', function() {
mainWindow = new BrowserWindow({width: 800, height: 600});
mainWindow.loadURL('file://' + __dirname + '/index.html');
mainWindow.on('closed', function() {
mainWindow = null;
});
});index.html文件:
<html>
<head>
<title>Hello World!title>
head>
<body>
<h1>Hello World!h1>
We are using io.js <script>document.write(process.version)script>
and Electron <script>document.write(process.versions['electron'])script>.
body>
html>笔记
1. 主进程
package.json中的main指定的index.js文件运行在主进程中，在主进程中的脚本可以创建Web页面，以便展示GUI。
一般，一个App只有一个主进程。 框架Demo中，指index.js。
2. 渲染进程
在主进程中创建的BrowserWindow通过Chromium来展示HTML页面，它也利用了Chromium的多进程结构，每个Electron中的页面都运行在自己的进程中，即渲染进程。
故，一个App中的渲染进程可以有多个。
渲染进程一般通过与主进程通信，然后操作Node.js中的APIs可以与底层操作系统直接交互。
渲染进程通过
ipcRender和ipcMain模块发送消息，remote模块进行RPC通信。
框架Demo中，指index.html所在进程。
3. API文档
脚本语言程序最大的问题就是，没有Api文档几乎无法写代码。
Electron中文入门文档：Url
Node.js API文档: Url
所有的Node.js’s built-in modules在 Electron 中都可用，并且所有的 node 的第三方组件也可以放心使用（包括自身的模块）。
Electron 也提供了一些额外的内置组件来开发传统桌面应用。一些组件只可以在主进程中使用，一些只可以在渲染进程中使用（ web 页面），但是也有部分可以在这2种进程中都可使用。
基本规则：GUI模块或者系统底层的模块只可以在主进程中使用。要使用这些模块，你应当很熟悉主进程vs渲染进程脚本的概念。
4. 进程对象
Electron的进程分为Main和Renderer两种。它们都是Node.js Process对象的扩展，添加了以下事件、属性和方法。
事件
- Load。在Electron已经加载了其内部预置脚本和它准备加载网页或者主进程的时候触发。
属性
process.noAsar设置它为true可以使asar文件在node的内置模块中失效。process.type当前process的类型，值为"browser"(即主进程) 或"renderer"。process.versions.electronElectron的版本号。process.versions.chromeChrome的版本号。process.resourcesPath资源文件夹的路径。process.mas在 Mac App Store 的构建中，该属性为true, 其他平台的构建均为undefined。process.windowsStore如果 app 是运行在 Windows Store app (appx) 中，该属性为true, 其他情况均为undefined。process.defaultApp当 app 在启动时，被作为参数传递给默认应用程序，在主进程中该属性为true, 其他情况均为undefined。
方法
process 对象有如下方法：
process.crash()使当前进程的主线程崩溃。process.hang()使当前进程的主线程挂起。process.setFdLimit(maxDescriptors)macOS LinuxmaxDescriptorsInteger - 设置文件描述符软限制于maxDescriptors或硬限制于OS, 无论它是否低于当前进程。
process.getProcessMemoryInfo()返回Object：workingSetSizeInteger - 当前固定到实际物理内存的内存量。peakWorkingSetSizeInteger - 被固定在实际物理内存上的最大内存量。privateBytesInteger - 不被其他进程共享的内存量，如JS堆或HTML内容。sharedBytesInteger - 进程之间共享的内存量，通常是 Electron 代码本身所消耗的内存。
返回当前进程的内存使用统计信息的对象。请注意，所有数据的单位都是KB。
process.getSystemMemoryInfo()返回Object：totalInteger - 系统的物理内存总量。freeInteger - 未被应用程序或磁盘缓存使用的物理内存总量。swapTotalInteger - 系统 swap 分区(虚拟内存)总量。 Windows LinuxswapFreeInteger - 系统剩余可用的 swap 分区(虚拟内存)量。 Windows Linux
返回系统的内存使用统计信息的对象。请注意，所有数据的单位都是KB。
5. Chrome命令行开关
你可以在 app 模块的 ready 事件发出之前使用 app.commandLine.appendSwitch 来添加它们到你应用的 main 脚本里面：
const {app} = require('electron')
app.commandLine.appendSwitch('remote-debugging-port', '8315')
app.commandLine.appendSwitch('host-rules', 'MAP * 127.0.0.1')
app.on('ready', () => {
// Your code here
})–client-certificate=path
设置客户端的证书文件 path .
–ignore-connections-limit=domains
忽略用 , 分隔的 domains 列表的连接限制.
–disable-http-cache
禁止请求 HTTP 时使用磁盘缓存.
–remote-debugging-port=port
在指定的 端口 通过 HTTP 开启远程调试.
–js-flags=flags
指定引擎过渡到 JS 引擎.
在启动Electron时，如果你想在主进程中激活 flags ，它将被转换.
$ electron --js-flags="--harmony_proxies --harmony_collections" your-app–proxy-server=address:port
使用一个特定的代理服务器，它将比系统设置的优先级更高.这个开关只有在使用 HTTP 协议时有效，它包含 HTTPS 和 WebSocket 请求. 值得注意的是，不是所有的代理服务器都支持 HTTPS 和 WebSocket 请求.
–proxy-bypass-list=hosts
让 Electron 使用(原文:bypass) 提供的以 semi-colon 分隔的hosts列表的代理服务器.这个开关只有在使用 --proxy-server 时有效.
例如:
app.commandLine.appendSwitch('proxy-bypass-list', ';*.google.com;*foo.com;1.2.3.4:5678' )将会为所有的hosts使用代理服务器，除了本地地址 (localhost, 127.0.0.1 etc.), google.com 子域, 以 foo.com 结尾的hosts，和所有类似 1.2.3.4:5678的.
–proxy-pac-url=url
在指定的 url 上使用 PAC 脚本.
–no-proxy-server
不使用代理服务并且总是使用直接连接.忽略所有的合理代理标志.
–host-rules=rules
一个逗号分隔的 rule 列表来控制主机名如何映射.
例如:
MAP * 127.0.0.1强制所有主机名映射到 127.0.0.1MAP *.google.com proxy强制所有 google.com 子域 使用 “proxy”.MAP test.com [::1]:77强制 “test.com” 使用 IPv6 回环地址. 也强制使用端口 77.MAP * baz, EXCLUDE www.google.com重新全部映射到 “baz”, 除了 “www.google.com“.
这些映射适用于终端网络请求 (TCP 连接 和 主机解析 以直接连接的方式, 和 CONNECT 以代理连接, 还有 终端 host 使用 SOCKS代理连接).
–host-resolver-rules=rules
类似 --host-rules ，但是 rules 只适合主机解析.
–ignore-certificate-errors
忽略与证书相关的错误.
–ppapi-flash-path=path
设置Pepper Flash插件的路径 path .
–ppapi-flash-version=version
设置Pepper Flash插件版本号.
–log-net-log=path
使网络日志事件能够被读写到 path.
–disable-renderer-backgrounding
防止 Chromium 降低隐藏的渲染进程优先级.
这个标志对所有渲染进程全局有效，如果你只想在一个窗口中禁止使用，你可以采用 hack 方法playing silent audio.
–enable-logging
打印 Chromium 信息输出到控制台.
如果在用户应用加载完成之前解析app.commandLine.appendSwitch ，这个开关将实效，但是你可以设置 ELECTRON_ENABLE_LOGGING 环境变量来达到相同的效果.
–v=log_level
设置默认最大活跃 V-logging 标准; 默认为 0.通常 V-logging 标准值为肯定值.
这个开关只有在 --enable-logging 开启时有效.
–vmodule=pattern
赋予每个模块最大的 V-logging levels 来覆盖 --v 给的值.E.g. my_module=2,foo*=3 会改变所有源文件 my_module.* and foo*.* 的代码中的 logging level .
任何包含向前的(forward slash)或者向后的(backward slash)模式将被测试用于阻止整个路径名，并且不仅是E.g模块.*/foo/bar/*=2 将会改变所有在 foo/bar 下的源文件代码中的 logging level .
这个开关只有在 --enable-logging 开启时有效.
6. 内置模块
1. 自定义的 DOM 元素:
File对象 Electron 在 File 接口中增加了一个 path 属性，它是文件在系统中的真实路径。webview标签 与iframe不同，webview和你的应用运行的是不同的进程。它不拥有渲染进程的权限，并且应用和嵌入内容之间的交互全部都是异步的。window.open函数 当在界面中使用window.open来创建一个新的窗口时候，将会创建一个BrowserWindow的实例，并且将返回一个标识，这个界面通过标识来对这个新的窗口进行有限的控制。
2. 在主进程内可用的模块:
- app 整个程序的实例
- autoUpdater 提供了来自 Squirrel 框架的一个接口。
- BrowserWindow GUI渲染窗口。
- contentTracing 从 Chromium 的 content 模块收集跟踪数据，以查找性能 瓶颈和运行缓慢的原因。
- dialog 显示用于打开和保存文件，alert框等的原生的系统对话框。
- globalShortcut 当应用程序没有键盘焦点时检测键盘事件。
- ipcMain 从主进程到渲染器进程异步通信。
- Menu 创建原生的应用菜单和 context 菜单。
- MenuItem 向原生的应用菜单和 context 菜单添加菜单项。
- net 使用原生 Chromium 的 networking 库来解决 HTTP/HTTPS 请求问题。
- powerMonitor 监视电源状态更改。（使用电源or挂起）
- powerSaveBlocker 阻止系统进入低功耗（睡眠）模式。
- protocol 注册一个自定义协议，或者使用一个已经存在的协议。
- session 管理浏览器会话，Cookie，缓存，代理设置等。
- systemPreferences 获取系统偏好设置。
- Tray 将图标和上下文菜单添加到系统的通知区域。
- webContents 渲染和控制网页。
3. 在渲染进程（网页）内可用的模块:
- desktopCapturer 用来获取可用资源，这个资源可通过
getUserMedia捕获得到. - ipcRenderer 从渲染进程向主进程发送同步或异步消息. 也可以收到主进程的相应.
- remote 提供了一种在渲染进程（网页）和主进程之间进行进程间通讯（IPC）的简便途径。使用
remote模块，可以调用主进程对象的方法，而无需显式地发送进程间消息。 - webFrame 允许你自定义如何渲染当前网页 .
4. 在两种进程中都可用的模块:
- clipboard 提供复制和粘贴操作。
- crashReporter 发送应用崩溃报告。
- nativeImage 对所有创建 images 的 api 来说, 你可以使用文件路径或
nativeImage实例. - screen 检索屏幕的 size，显示，鼠标位置等的信息.
- shell 使用系统默认应用管理文件和 URL .
5. 特殊模块
- Frameless Window 不包含除页面本身以外任何其它可视部分的窗口(chrome)。
- 离屏渲染 GPU or CPU
- 使用 Pepper Flash 插件 Flash插件问题
- 打包应用 打包
- 与 NW.js的差异 演变
总结
有了以上（特别是最后一章）的梳理，整个Electron的思路清晰了太多了，下一步是寻找一个Demo案例，把它实现了。（项目练手才是最好的学习方法）
see you!