Electron

Author Avatar
A Man Has No Name 4月 11, 2017
  • 在其它设备中阅读本文章

简单介绍一个Node 工具

Electron

简单介绍

这货很厉害。

开发组件 Devtron

安装 npm install devtron –save

在console中,加载安装模块 require(‘devtron’).install()

它可以监控,每一个组件等等

测试组件 Spectron

用来测试每一个窗口,以及webview

1
2
3
4
5
app.client.auditAccessibility().then(function (audit) {
if (audit.failed) {
console.error(audit.message)
}
})

应用的组成

  • Mac中

    1
    2
    3
    4
    electron/Electron.app/Contents/Resources/app/
    ├── package.json
    ├── main.js
    └── index.html
  • Windows 和 Linux

    1
    2
    3
    4
    electron/resources/app
    ├── package.json
    ├── main.js
    └── index.html

打包文件

使用asar, 进行文件打包, 这样文件目录就变成了

1
2
electron/Electron.app/Contents/Resources/app/
└── app.asar

  • Windows 和 Linux
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    electron/resources/app
    └── app.asar
    ### 使用到的打包工具
    - [electron-builder](https://github.com/electron-userland/electron-builder)
    - [electron-packager](https://github.com/electron-userland/electron-packager)
    ### 调试
    - 使用devtron工具调试
    - --debug=[port], 设置调试端口
    - --debug-brk=[port], 基本跟上面一样,但是它会暂停中断执行
    ## 程序结构
    ### 主进程
    入口主文件,负责创建界面,管理界面什么的。
    ### 渲染进程
    负责渲染界面,并且可以访问系统资源。
    ### 主进程 和 渲染进程 的区别
    `主进程`负责创建窗口`实例什么的,同时每一个`窗口`实例的都会有自己的`渲染进程`. 那么,当`窗口`实例被销毁,同时`渲染进程`同时被销毁。
    `主进程`负责管理上面的所有操作。
    TODO: 注意不允许管理原生资源的问题。
    ### 最简结构

playcrab/
├── package.json
├── main.js
└── index.html

1
2
3
4
5
6
7
- package.json, 不做多解释,不懂的也就别看这个文章了;建议如下进行配置
```javascript
{
"name": "playcrab",
"version": "0.1.0" # 一定要写当前版本
"main": "main.js" # 一定要写入口文件,如果没有这个,默认是index.js
}

  • main.js, 需要创建你需要的窗口,以及各种系统事件,比如:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    const {app, BrowserWindow} = require('electron');
    const path = require('path');
    const url = require('url');
    # 为了保持窗口不会被关闭掉,请让窗口变量变成全局的。
    let win;
    function createWindow() {
    //新建一个窗口,并且初始化窗口大小
    win = new BrowserWindow({
    width: 800,
    height: 600
    });
    // 加载系统的html
    win.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
    }));
    // 打开调试窗口
    win.webContent.openDevTools();
    // 绑定关闭事件
    win.on('close', () => {
    // 通常我们是会有很多窗口,也就是是一个数组,
    // 你应该把那个窗口删掉
    // !!!而不是把所有窗口关闭
    // !!!而不是把所有窗口关闭
    // !!!而不是把所有窗口关闭
    win = null;
    });
    }
    // 初始化之后,执行
    app.on('ready', createWindow);
    // 当所有窗口都关闭之后,程序退出
    app.on('window-all-closed', () => {
    // 在Mac中,之后执行 Cmd + Q 之后才算退出。
    if (process.platform !== 'darwin') {
    app.quit()
    }
    })
    app.on('activate', () => {
    # 在Mac中,如果应用还在活跃中,但是已经没有窗口了,那么就需要重新调用 创建窗口
    if (win === null) {
    createWindow()
    }
    });

最后,修改index.html

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
Electron版本: <script>document.write(process.versions.electron)</script>.
</body>
</html>

以上直接抄的官网的

暂时先这些,
未完,待续…..