3.Electron学习01
来源:互联网 发布:单片机stc89c52rc 编辑:程序博客网 时间:2024/06/06 11:47
- 目标
- 基础框架
- 笔记
- 主进程
- 渲染进程
- 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文件:
<!DOCTYPE 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.electron
Electron的版本号。process.versions.chrome
Chrome的版本号。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 LinuxmaxDescriptors
Integer - 设置文件描述符软限制于maxDescriptors
或硬限制于OS, 无论它是否低于当前进程。
process.getProcessMemoryInfo()
返回Object
:workingSetSize
Integer - 当前固定到实际物理内存的内存量。peakWorkingSetSize
Integer - 被固定在实际物理内存上的最大内存量。privateBytes
Integer - 不被其他进程共享的内存量,如JS堆或HTML内容。sharedBytes
Integer - 进程之间共享的内存量,通常是 Electron 代码本身所消耗的内存。
返回当前进程的内存使用统计信息的对象。请注意,所有数据的单位都是KB。
process.getSystemMemoryInfo()
返回Object
:total
Integer - 系统的物理内存总量。free
Integer - 未被应用程序或磁盘缓存使用的物理内存总量。swapTotal
Integer - 系统 swap 分区(虚拟内存)总量。 Windows LinuxswapFree
Integer - 系统剩余可用的 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', '<local>;*.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!
- 3.Electron学习01
- electron的入门学习
- Electron
- electron
- Electron框架学习笔记一
- Electron初体验,学习笔记
- Electron学习笔记Part2-HelloWorld
- Electron学习笔记Part3-利用Electron builder应用打包EXE
- electron框架学习之浅析IPC使用
- Electron学习笔记Part1-安装与配置
- Electron学习笔记:quickstart, 结合Editor.md
- 使用electron+deeplearnjs构建深度学习环境
- 【Electron】Electron开发入门
- Electron 编译
- generator-electron
- 杂谈:Electron
- Electron安装
- Electron-文档
- 查找谁在破解你linux服务器的密码?
- 2.Electron配置环境
- Python零基础,该如何掌握爬虫技术
- yum安装PHP7.0
- kaldi中改写sre10/v1用timit dataset做说话人识别总结
- 3.Electron学习01
- 如何在Linux下配置socks5代理
- LightOJ-1220
- Android进程保活--我也想乖,但用户就是要这样
- utf-8,utf-16,unicode等编码的关系与深入说明
- Sublime Text3 一些功能,插件,设置
- 关于刷微信投票的js代码
- 新手建站免费空间及其使用体验
- HDU 5673 Robot