zoukankan      html  css  js  c++  java
  • electron 大体结构

    1、Electron支持的平台:

    OS X
    Windows
    Linux

    2、一个标准的electron app包含的结构:

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

    3、electron程序打包:

    一般使用asar来进行打包,electron中一般包含两种API:
    Node.js和Chromium提供的Web API
    Node API如fs.readFile

    4、使用Native Node模块

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

    5、测试主进程

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

    6、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。

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

    package.json文件的格式和Node的模块是一样的,main.js是app启动脚本,将会运行在主进程中。如果main没有出现在package。json中,electron将会尝试装载index.js
    main.js需要创建window界面并处理系统事件运行electron程序:
    可以先用npm装上electron-prebuilt,进入app的root目录
    执行electron .

    8、桌面环境的整合

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

    9、在线和离线事件监测

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

    11、进程对象

    进程process对象和一般的node区别在于:
    process.type 进程的类型可以是browser或是renderer
    process.version['electron'] electron的版本
    process.version['chome'] Chromium的版本
    process.resourcesPath Javascript脚本文件的路径
    process.mas 构建Mac应用商店时值为true,其他的为undefined。

    12、事件

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

    13、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
    ...

    14、环境变量:

    export ELECTRON_ENABLE_LOGGING=true
    ELECTRON_RUN_AS_NODE
    ELECTRON_ENABLE_LOGGING
    ...

    15、定制DOM元素

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

    16、主进程的模块

    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,通常情况下是和一个上下文菜单绑定的。

    17、渲染进程的模块

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

    18、两个进程共同的模块

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

    19、开发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

  • 相关阅读:
    统计nginx日志里访问次数最多的前十个IP
    while 格式化输出 运算符 字符编码
    Python 软件安装
    Python 基础
    Typora 基础的使用方法
    Django ORM (四) annotate,F,Q 查询
    Django 惰性机制
    Django ORM (三) 查询,删除,更新操作
    Django ORM (二) 增加操作
    Django ORM (一) 创建数据库和模型常用的字段类型参数及Field 重要参数介绍
  • 原文地址:https://www.cnblogs.com/cbugs/p/6492044.html
Copyright © 2011-2022 走看看