Fork me on GitHub

electron 基础知识

字数统计: 26.9k字   |   阅读时长≈ 110分

基础应用

此笔记参考 刘晓伦著作的 ELectron实战：入门、进阶与性能优化

1、安装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
- npm i electron -D

// 在安装步骤执行到 > node install.js 时，按ctrl+c中断过程
// 应为下载太慢了

- 手动下载 所需zip包

https://www.electronjs.org/fiddle

- 本地缓存目录为  ~/.electron/electron-v1.4.5-darwin-x64.zip

- 手动下载的zip包放到缓存目录所在位置。

- 重新执行 npm install -g electron 即可


上面的下载地址和缓存目录是通过阅读install.js脚本，尝试执行并打印部分变量得到的。
对于很多其它的使用npm安装的功能模块，都可以通过这个方法，解决下载问题。

安装成功后可以在项目 运行 ./node_modules/.bin/electron 测试

2、生态

1
2
3
4
5
6
7
8
9
10
11
12
13
14
1、electron-builder
	是一个Electron的构建工具，它提供了自动下载、自动构建、自动打包、自动升级等能力，是Electron生态中的基础支持工具，大部分流行的Electron应用都使用它进行构建和分发。
   
2、Vue CLI Plugin Electron Builder和electron-vue
	是两个非常不错的工具，开发者可以基于它们轻松地在Electron应用内使用Vue及其组件
    
3、electron-react-boilerplat
	是一个项目模板，它把Electron、React、Redux、React Router、Webpack和React Hot Loader组合在一起。开发者基于此模板可以快速构建React技术体系的Electron应用。
    
4、angular-electron
	是一个项目模板，开发者可以基于它快速构建基于Angular和Electron的应用。
    
5、如果不希望使用上述前端框架，仅希望使用webpack与传统Web前端开发技术开发Electron应用，可以考虑使用electron-webpack组件完成工作。
另外，awesome-electron项目记录了大量与Electron有关的有趣的项目和组件。

3、优势

1
2
3
4
5
6
7
8
9
1、相较于基于C++库开发桌面软件来说，基于Electron开发更容易上手且开发效率更高

2、Node.js本身也可以很方便地调用C++扩展，Electron应用内又包含Node.js环境，对于一些音视频编解码或图形图像处理需求，可以使用Node.js的C++扩展来完成。

3、Electron可以使用几乎所有的Web前端生态领域及Node.js生态领域的组件和技术方案。

4、Electron内置了Chromium浏览器，该浏览器对标准支持非常好，甚至支持一些尚未通过的标准，所以基于Electron开发应用不会遇到兼容问题。你可以在Electron中使用几乎所有HTML5、CSS3、ES6标准中定义的API。

5、Web前端受限访问的文件系统、系统托盘、系统通知等，在Electron技术体系下均有API供开发者自由使用。

4、不足

1
2
3
4
5
6
7
8
9
10
11
1、·打包后的应用体积巨大 (至少40M)

2、开发复杂度较大，进阶曲线较陡：跨进程通信是基于Electron开发应用必须要了解的知识点

3、版本发布过快：为了跟上Chromium的版本发布节奏，Electron也有非常频繁的版本发布机制，每次Chromium改动，都可能导致Electron出现很多新问题，甚至稳定版本都有很多未解决的问题。幸好Electron的关键核心功能一直以来都是稳定的。

4、安全性问题：Electron把一些有安全隐患的模块和API都设置为默认不可用的状态，但这些模块和API都是非常常用的，因此有时开发者不得不打开这些开关。但是，一旦处理不当，就可能导致开发的应用存在安全隐患，给开发者乃至终端用户带来伤害

5、资源消耗较大：Electron底层基于的Chromium浏览器一直以来都因资源占用较多被人诟病，目前来看这个问题还没有很好的解决办法，只能依赖Chromium团队的优化工作。

6、Electron还不支持老版本的Windows操作系统，比如Windows XP

5、未来的竞争者 PWA

1
2
3
4
5
6
7
PWA（Progressive Web App），即渐进式Web应用。MDN上的定义为：运用现代的Web开发技术以及传统的渐进式增强策略来创建跨平台Web应用程序。

各浏览器厂商遵循一定的标准来为PWA应用赋能，只要用户系统内安装了任何一款现代浏览器，那么用户就可以下载、安装PWA应用，这使得PWA应用体积足够小巧，而不用像Electron或NW.js应用那样需要下载一个巨大的安装包。
利用浏览器提供的能力，PWA可以访问用户操作系统API，用户需要的话也可以在自己的桌面创建一个PWA应用的快捷方式。PWA应用还很容易被搜索引擎发现，并被分类、排名。用户断网的时候，也可以使用PWA提供的功能。即使用户没有打开PWA应用，只要宿主浏览器进程在，它也可以收到消息推送通知。


目前来看，PWA还不足以给Electron造成太大的竞争压力，即使未来会有，我认为也不必担心，毕竟两项技术所面向的场景有非常大的不同：PWA是传统Web应用向桌面端的延伸，它的本质还是一个Web应用；而Electron应用则是一个实实在在的传统桌面GUI应用

6、搭建环境

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
1、安装nodejs
	https://nodejs.org/en
2、yarn
	由Facebook的工程师开发，相对于Node.js自带的npm包管理工具来说，它具有速度更快、使用更简捷、操作更安全的特点，建议安装使用，安装命令如下：
> npm install -g yarn

3、初始化项目
	yarn init 

   // 生成 package.json文件
   {
        "name": "chapter1",
        "version": "1.0.0",
        "main": "index.js",
        "license": "MIT"
    }

	安装Electron依赖包，它大概有50～70MB（实际上是一个精简版的Chromium浏览器）默认在github下载，奇慢无比
    https://github.com/electron/electron/releases
	对于中国用户来说，下载速度很慢，大部分时候无法安装成功。
    
4、好在阿里巴巴的工程师在国内搭建了Electron的镜像网站：
	https://npm.taobao.org/mirrors/electron/（注意，此地址与下方命令行中的地址不同）。我们可通过如下指令配置Electron的镜像网站：
	> yarn config set ELECTRON_MIRROR https://cdn.npm.taobao.org/dist/electron/

	// 重新下载依赖
    yarn add electron --dev --platform=win64

	--platform=win64标记着我们只安装了64位版本的Electron

如果yarn提示安装成功，但稍后执行启动程序的命令时收到如下错误提示：
Electron failed to install correctly, please delete node_modules/electron 
and try installing again
这说明Electron还是没有安装成功，
	这时你可以打开[your_project_path]\node_modules\electron目录，
    创建一个path.txt文本文件，输入以下内容：electron.exe

	Mac系统下，同样也是创建path.txt，但其中的内容为：
		Electron.app/Contents/MacOS/Electron

	然后自己手动从阿里巴巴的镜像网站下载相应版本的Electron的压缩包，解压到此目录：[your_project_path]\node_modules\electron\dist，再执行命令即可正常运行了。
    
    
    
【拓展】
	扩展　Node.js有三种模块。
第一种是核心模块，其存在于Node.js环境内，比如fs或net等。
第二种是项目模块，其存在于当前项目中，一般都是项目开发者手动提供的。require这类模块，一般以./path/fileName这种相对路径寻址。
第三种是第三方模块，这种模块一般都是项目开发者通过yarn或npm工具手动安装到项目内的。require此类模块一般传入模块名即可，Node.js环境会为我们到当前node_modules目录下寻找模块。


5、在package.json 中配置运行脚本
"scripts": { "start": "electron ./index.js" }

6、运行

yarn start

[拓展] 运行脚本前自动搭建一个命令环境， 然后将当前目录下的 node_modules/.bin加入系统环境变量，接着执行脚本内容，执行完再将 node_modules/.bin 从系统变量中删除

7、辅助工具 nodemon
	避免每次修改main.js 配置 重新手动启动
    
    npm i nodemon -S -D
	
	// 修改 package.json 文件的 script
	{
        "start": "nodemon --watch main.js --exec 'electron .'"
    }
	// 上面单引号报错可使用 \" electron . \"

7、创建窗口界面

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
// 新建一个 index.html 文件
<html>
    <head>
        <title>窗口标题</title>
    </head>
    <body>
        <div >
            hello
        </div>
    </body>
</html>
    
    
// 网页的title会被设置为 Electron 窗口的标题

启动窗口

// 新建 index.js

<script>
	var electron = require('electron');
    /*
    	app代表整个应用，可以通过它获取应用程序各种生命周期的事件
    */
    var app = electron.app;
    var BrowserWindow = electron.BrowserWindow;
    var win = null;
    app.on('ready', function(){
        win = new BrowserWindow({
            /*nodeIntegration 是否需要为页面集成nodejs环境， 并赋予页面js访问nodejs环境的能力
              倘若页面加载的是互联网页面且无法验证内容是否可靠，则关闭此设置
              
              引入 jQuery
              	设置nodeIntegration配置后 无法通过<script>标签引入jQuery。应为新版jQuery内部对 require变量进行判断，导致与nodejs的require指令冲突，所以不能引入。
              解决方式： window.$ = window.jQuery = require('./jquery-3.4.1min');
            */
            webPreferences: { nodeIntegration: true }
        });
        win.loadFile('index.html');
        win.on('closed', function(){
        win = null
        });
    })
    app.on('window-all-closed',function(){
        app.quit();
    });
	
</script>

[拓展]
	nodejs 模块化机制。一个模块被导入至另一个模块时，就会被缓存，当下次再尝试导入时就会先读取缓存。

8、Electron API演示工具

API演示地址

9、试验工具Electron Fiddle

试验工具Electron Fiddle

10、主进程与渲染进程

Electron应用程序开发人员不用关心线程的问题，但要关心进程的问题。Electron应用程序区分主进程和渲染进程，而且主进程和渲染进程互访存在着很多误区，因此开发人员一不小心就会犯错。

1
2
3
4
5
6
7
8
9
10
11
1、区分主进程与渲染进程
yarn start 命令行实际是 electron ./index.js , 该指令执行了index.js 中的代码，即运行在electron的主进程中
其主要负责 创建窗口并加载 index.html

在第七点栗子中，主进程负责完成监听应用程序的生命周期事件、启动第一个窗口、加载index.html页面、应用程序关闭后回收资源、退出程序等工作。渲染进程负责完成渲染界面、接收用户输入、响应用户的交互等工作。每个渲染进程都是独立的，它只关心所运行的Web页面。

一个electron应用只有一个主进程，但可以有多个渲染进程。一个BrowserWindow实例就代表着一个渲染进程。当BrowserWindow实例被销毁后，渲染进程也跟着终结。

【重点来了】：在Electron中，GUI相关的模块仅在主进程中可用。如果想在渲染进程中完成创建窗口、创建菜单等操作，可以让渲染进程给主进程发送消息，主进程接到消息后再完成相应的操作；也可以通过渲染进程的remote模块来完成相应操作


electorn_api

11、进程调试

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
1、主进程调试 vscode
	》点击 vscode左边菜单的小甲壳虫 》 show all automatic debug 》 选择 nodejs 》 选择运行的命令
	
	// VSCode会为你在项目根目录下创建.vscode/launch.json配置文件，用如下配置代码替换原有的配置代码。
	{
        "version": "0.2.0",
        "configurations": [
            {
                "name": "调试主进程",
                "type": "node",// 调试环境 node
                "request": "launch",
                "cwd": "${workspaceRoot}",
                // runtimeExecutable指向的是批处理文件，该批处理文件用于启动Electron
                // workspaceRoot 正在进行调试的程序的工作目录的绝对路径
                 "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
                 "windows": {
                  "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
                },
                // args是启动参数,此处简写（./index.js）
                "args": ["."],
                "outputCapture": "std"
            }
        ]
    }
	
2、渲染进程调试
	程序运行后，保持窗口处于激活状态，同时按下Ctrl+Shift+I快捷键（Mac系统下快捷键为Alt+Command+I）即可打开渲染进程的调试窗口，
	点点点方式：
	View->Toggle Developer Tools
    
    因为默认的窗口菜单对于用户意义不大，开发者往往需要禁用掉Electron提供的窗口菜单，此时如果开发者没有记住快捷键将非常麻烦
    
    如果你希望项目启动时即打开开发者工具： win.webContents.openDevTools();

3、页面重载
	Ctrl+R快捷键刷新页面（Mac系统下快捷键为Command+R）

12、进程互访

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
remote 模块
	remote模块通知主进程完成相应操作的
    
// 旧版

    // 主进程开启
    win = new BrowserWindow({
        webPreferences: {
            enableRemoteModule: true
        }
    })
    // 渲染进程
    const remote = require('electron').remote


// 新版

    // 主进程:
    require('@electron/remote/main').initialize()

    // 渲染进程
    const remote = require('@electron/remote')
    
    
    // 渲染进程获取主进程窗口引用
    1、remote.getCurrentWindow().webContents

    2、remote.getCurrentWebContents()

【为啥将remote模块从electron中移出去？】
    - 性能损耗大。跨进程操作在性能上的损耗可能是进程内操作的几百倍甚至上千倍
    - 制造混乱。跨进程实际是通过主线程来联通个个子线程的
    - 制造假象。
		remote模块使用了主进程的某个对象，得到的是这个对象的映射。首先，这个对象原型链上的属性不会被映射到渲染进程的代理对象上。其次，类似NaN、Infinity这样的值不会被正确地映射到渲染进程
	- 存在安全问题
		因为remote模块底层是通过IPC管道与主进程通信的，那么假设你的应用需要加载第三方网页，即使这些网页运行在安全沙箱内，恶意代码仍可能通过原型污染攻击来模拟remote模块的远程消息以获取访问主进程模块的权力，从而逃离沙箱的控制，导致安全问题出现。

渲染进程访问主进程内容

//新建 mainModel.js 导出创建窗口函数
    let { BrowserWindow } = require('electron')
    exports.makeWin = function() {
        let win = new BrowserWindow({
            webPreferences: { nodeIntegration: true }
        });
        return win;
    }
// index.js 引入

    let mainModel = remote.require('./mainModel');
    let win2 = null;
    document.querySelector("#makeNewWindow2").addEventListener('click', () => {
        win2 = mainModel.makeWin();
        win2.loadFile('index.html');
    });

【注意】在渲染进程中使用require， 需使用remote.require。
	否者报错BrowserWindow is not a constructor

	因为此时虽然可以正确地加载mainModel.js，但是此操作是在渲染进程中进行的，然而渲染进程是不能直接访问BrowserWindow类型的，因此窗口无法创建，并给出了报错。



主进程访问渲染进程对象

	因为渲染进程是由主进程创建的，所以主进程可以很方便地访问渲染进程的对象与类型，比如创建一个窗口之后，马上控制这个窗口加载一个URL路径winObj.webContents.loadURL('...')。
	除此之外，主进程还可以访问渲染进程的刷新网页接口、打印网页内容接口等。

13、进程间消息传递

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
54
55
56
57
58
59
60
61
1、渲染进程向主进程发送消息

// index.html
let { ipcRenderer } = require('electron');
document.querySelector("#sendMsg1").addEventListener('click', () => {
    ipcRenderer.send('msg_render2main', { name: 'param1' }, { name: 'param2' });
});

-ipcRenderer.send(消息管道名称, 传递的数据对象[任意个])
-ipcRenderer.sendSync(消息管道名称, 传递的数据对象[任意个])

// 主进程
通过ipMian接收消息
let { ipcMain } = require('electron')
ipcMain.on('msg_render2main', (event, param1, param2) => {
    console.log(param1);
    console.log(param2);
    // 是渲染进程的webContents对象实例
    console.log(event.sender);
    // 通过渲染进程实例可以返回消息
    event.sender.send('msg_main2render','收到')
    // 同上效果
    event.reply('msg_main2render','收到')
    // 如果是同步方法发送的消息，可直接设置 event.returnValue的值
    event.returnValue = '收到'
});

-ipMain.on(消息管道名称, 接收消息的方法（发送者相关,参数一,参数二...）)

[注意]
    -如果在主进程中设置了多处监听同一管道的代码，当该管道有消息发来时，则多处监听事件都会被触发。
    -其中传递的参数对象会被序列化或反序列化，其原型上的东西无法传递
	-当前页面无论增加多少个消息监听函数，一旦主进程发来消息，这些消息监听函数都会被触发。然而如果我们打开新窗口，并让新窗口加载同样的页面，设置同样的消息监听函数，当主进程再发送的消息时，新窗口却不会触发监听事件，这是因为我们在向渲染进程发送消息时，使用的是win.webContents.send。这就明确地告诉Electron只给win所代表的渲染进程发送消息。

// 如果是同步消息
let { ipcRenderer } = require('electron');
document.querySelector("#sendMsg1").addEventListener('click', () => {
    // 变量 rt 即主进程通过设置event.returnValue发送的消息
    let rt = ipcRenderer.sendSync('msg_render2main', { name: 'param1' }, { name: 'param2' });
});

2、渲染进程之间消息传递
	A -> B
		- 可以通过主进程中转，即窗口A先把消息发送给主进程，主进程再把这个消息发送给窗口B，
		- ipcRenderer.sendTo(win2.webContents.id, 'msg_render2render', { name: 'param1' })
		（A的渲染进程中知道窗口B的webContents的id）
    ipcRenderer.sendTo(目标窗口的webContetns.id, 管道名称, 其他消息1, 其他消息2...)



如果通过 ipcMain 和 ipcRenderer ，渲染进程有三种方式给主进程发送消息，即:

「ipcRenderer.send(channel, ...args)」

「ipcRenderer.invoke(channel, ...args)」

「ipcRenderer.sendSync(channel, ...args)」

通过上面三种方式，主进程都可以有相应的方法给予渲染进程答应，只是答应的方法不同；

同步请求建议用 sendSync，异步请求建议用 invoke；

引入现代前端框架

webpack,vue,react,jquery…

引入 webpack

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
通过以下命令安装webpack和electron-webpack模块：
> yarn add webpack --dev
> yarn add electron-webpack --dev

// 都是开发依赖

修改入口
	electron-webpack默认入口  ./src/main
project/
├─ dist/ 放置webpack打包后输出的内容
├─ src/
│  ├─ main/   放置主进程相关的代码，此目录下需要有主进程的入口文件，默认为index.js。
│  │  └─ index.js
│  ├─ renderer/  放置渲染进程相关的代码，此目录下需要有渲染进程的入口文件
│  │  └─ index.js
│  └─ common/
└─ static/ 放置不希望被webpack打包的内容，程序可以通过__static全局变量访问到这个目录的绝对路径
    
修改指令
"scripts": {
    "start": "electron-webpack dev",
    "build": "electron-webpack build"
}


// 修改默认 webpack配置
package.json

"electronWebpack": {
    "main": {
      "sourceDirectory": "src/main" // 主线程路径
    },
    "renderer": {
      "sourceDirectory": "src/renderer",// 渲染进程函数
      "template": "src/renderer/index.html"// 渲染模板
    }
  },
      
// 这玩意两年没维护了，老是报神奇的错。。。

引入 react

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
为了快速引入React，我们使用electron-react-			boilerplate（https://github.com/electron-react-boilerplate/electron-react-boilerplate）
	项目模板。该模板把Electron、React、Redux、React Router、webpack和React Hot Loader都结合了起来，可谓是集齐了“React家族”的所有常见成员。


今天一天居然6年没维护了。。。


React + Electron 

1、安装 electron
	-直接先全局安装electron 
		npm i electron -g

2、安装 create-react-app
	npm i -g create-react-app

	修改默认webpack配置 
    npm run eject // 生成配置文件
3、创建react项目
	create-react-app react-electron

4、 项目局部安装（全局安装后会快很多）
	npm i electron -D

5、在最外层新增 main.js
    const {app, BrowserWindow} = require('electron');
    var win = null;
    let path = require('path');
    let URL = require('url');
    app.on('ready', function(){
        win = new BrowserWindow({
            webPreferences: { 
                nodeIntegration: true,
                contextIsolation: false
            }
        });
        // win.loadFile('index.html');

        let url = '';
        // 开发时加载
        if (process.env.NODE_ENV !== 'production') {
            url = 'http://localhost:3000/' ;//+  process.env.ELECTRON_WEBPACK_WDS_PORT
        } else {
            // 打包时加载
            url = URL.format({
                pathname: path.join(__dirname, './build/index.html'),
                protocol: 'file',
                slashes: true
            });
        }
        win.loadURL(url);
        win.webContents.openDevTools();
        console.log('url:', process.env.NODE_ENV);

        win.on('closed', function(){
            win = null
        });
    })
    app.on('window-all-closed',function(){
        app.quit();
    });

6、修改package.json script

"start": "react-scripts start | electron .",
    
 // 上边方法有个小问题，electron 加载时 react 未启动完成，会先出现白屏现象
    小工具： wait-on
    修改命令
    "react-scripts start \"wait-on http://localhost:3000 && electron .\" "
 // cross-env  跨平台 变量， 设置启动时不在浏览器自动打开
	修改命令
    "react-scripts start cross-env BROWSER=none \"wait-on http://localhost:3000 && electron .\" "

7、确保react打包后正常访问
	默认情况下，homepage 是 http://localhost:3000，build 后，所有资源文件路径都是 /static，而 Electron 调用的入口是 file :协议，/static 就会定位到根目录去，所以找不到静态文件。在 package.json 文件中添加 homepage 字段并设置为"."后，静态文件的路径就变成了相对路径，就能正确地找到了添加如下配置：

// package.json
  "homepage": ".",
8、打包electron
	常用打包插件
      -electron-builder
      -electron-packager

// 这里使用 electron-packager

	-npm i electron-packager -S-D
	-npm i electron-packager -g

// 命令介绍
	electron-packager <location of project> <name of project> <platform> <architecture> <electron version> <optional options>
        
    -location of project: 项目的本地地址，此处我这边是 ~/knownsec-fed
    -location of project: 项目名称，此处是 knownsec-fed
    -platform: 打包成的平台
    -architecture: 使用 x86 还是 x64 还是两个架构都用
    -electron version: electron 的版本
    
// 新增 命令脚本
    package.json
	{
        "package":"electron-packager /home/react-electron react-electron --all --out ~/ --electron-version 2.0.6"
    }

// 打包完成后会在～/目录下生成对应平台的包，在上述命令的--out后面可见

8.1、electron-builder ^21.2.0
	// 添加依赖
	npm i electron-builder -D
	// 区分开发生产环境
	let urlLocation = isDev ? 'http://localhost:3000' : `file://${path.join(__dirname, './build/index.html')}`
    // 打包配置，在 package.json 第一层
    {
        "author": {
          "name": "Wang",
          "email": "wang@qq.com"
        },
        "repository": "https://git.imooc.com/coding-384/cloud-doc",
        "build": {
            "appId": "cloudsDoc",
            "productName": "",
            "copyright": "Copyright 2019 ${author}",
            "extends": null,// 防止篡改入口文件
            
        },
        "script": {
            "build": "react-scripts start",
            "pack": "electron-builder --dir",// 安装完后的文件
            "dist": "electron-builder",// 生成安装程序
            "prepack": "npm run build",// 钩子命令pre 前缀，执行pack 时 先执行 prepack 脚本命令
        }
    }

9、项目文件加密
	在每个包下的resources文件夹里的app文件夹 就是我们写的程序，这样我们的代码就是暴露在用户电脑上的，这非常的不安全，还好electron 自带了加密功能。
	-安装asar
   	
		npm i -g asar
	
 接下来在生成的应用的resources文件夹下执行下面命令：
 	
 	npm pack ./app app.asar

执行完毕后在resources文件夹下可以看见生成的app.asar文件，此时可以把resources目录下的app文件夹删除。

至此完成源代码文件的加密。

【】
1、在electron里面可以调用nodejs几乎所有的功能，当然前提是需要require nodejs的包；
2、在react的js页面或者公司项目用到的Ant Design的一些js页面需要用到electron时候，通过官方的
const electron = require('electron')
语句并不能成功引入，此时需要通过
const electron = window.require('electron')
引入；

3、还有，最最最重要的一点！！！！开发时候一般都是在main中通过react项目的URL去热调试应用，BUT！！此时请在electron生成的窗口中进行调试！！如果只在浏览器的页面查看效果，会提示electron的模块无法导入，无论你用啥方法！

4、使用nodejs的fs包和electron的dialog、app类能够首先调用不同平台的文件选择器和一些特殊文件夹的的功能，比如说桌面、用户默认数据文件夹的修改

10、打包 app
	新版的 electron-package 命令可以直接配置 --asar,不需要额外安装
	
	1、下载 electron 时新建app目录
    project/
        ├─ build/ react打包后输出的内容
        ├─ dist/ electron-packger打包后输出的内容
        ├─ app/
        │  ├─ assets  
        │  ├─ build  把外边的 react打包文件丢进来
        │  ├─ package.json 安装electron-packger前将外边的package文件拷进来管理依赖
        │  ├─ main.js 主进程
        ├─ src/
        │  ├─ react 项目内容 
        ├─ main.js
        ├─ package.json	打包app命令再此处
        └─ static/ 
     // 内部package.json
         -main配置 需要与 主进程入口一致
         -name配置 就是项目名称
            
     //外部package.json新增命令
	{
        "packageWin": "electron-packager ./app react-electron --platform=win32  --arch=x64 --out=./dist --asar --app-version=1.0.0",
    }
	// 运行 npm run packageWin

	打包app文件（react-electron-win32-x64） 会在 新建的 dist 文件夹中

窗口

大部分桌面GUI应用都是由一个或多个窗口组成的，在前面的章节中我们已经创建了很多Electron窗口（也就是BrowserWindow），但窗口的属性只用到了webPreferences:{nodeIntegration:true}。其实，Electron的BrowserWindow还有很多种可用属性

属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
1、位置属性
    -x,y
        通过x,y可以控制窗口在屏幕的位置，默认显示在屏幕正中间
    -center
    -movable 是否可拖拽
2、大小属性
	-width,minWidth,maxWidth
	-height,minHeight,maxHeight
	-resizable 是否可调整窗口大小
    -minimizable,maximizable
3、边框，菜单，标题属性
    -title 标题
    -icon 图标
    -frame 设置成false才能屏蔽系统标题栏
    -autoHideMenuBar 隐藏菜单栏
    -titleBarStyle
4、控制nodejs环境属性, 控制加载网页是否集成node环境
	-nodeIntegration
	-nodeIntegrationInWorker
	-nodeIntegrationInSubFrames
5、增强渲染进程能力属性
	-preload 可以给渲染进程加载的页面注入脚本（脚本可访问nodejs）
	-webSecurity 控制网页的同源策略，关闭后可调用第三方服务接口不跨域
	-contextIsolation

方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 使用 remote
let win = remote.getCurrentWindow(); // 获取当前窗口实例

win.close(); // 关闭
win.minimize(); // 最小化
win.maximize(); // 最大化
win.restore(); // 恢复
win.setState(); // 是记录窗口的状态信息，把窗口的大小、位置和是否最大化等信息保存在LocalStorage内
win.getBounds();// 返回一个Rectangle对象，包含窗口在屏幕上的坐标和大小信息
win.isMaximized; // 返回当前窗口是否处于最大化状态
win.on('ready-to-show', fn) // 当页面已经渲染完成(但是还没有显示) 并且窗口可以被现实时触发
win.show();// 将窗口设置为显示状态， win.maximize()也有相同作用

【注意】Electron官方文档推荐开发者监听BrowserWindow的ready-to-show事件，这不见得是一个好主意，因为此事件是在“当页面已经渲染完成（但是还没有显示）并且窗口可以被显示时”触发，但此时页面中的JavaScript代码可能还没完成工作。因此，你应该根据业务需求来适时地显示窗口，而不是把这个权力交给ready-to-show事件。

设置不规则窗口

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
eg: // 设置圆形窗口
1、将窗口的width、height设置为 形同的值
2、设置透明属性（transparent）设置为true
3、虽然窗口是正方形，但是只要控制好内容区域Dom形状，就可以让窗口形状看起来是不规则的
4、不规则弹窗往往是自定义边框与标题的，所以 frame 为 false
5、透明窗口 不可调整大小 resizable 为 false
6、防止最大化 maximizable

win = new BrowserWindow({
    width: 380,
    height: 380,
    transparent: true,
    frame: false,
    resizable: false,
    maximizable: false,

})

问题：当设置圆形窗口时，我们是通过边缘透明实现的。但是如果用户点击透明区域下面的桌面文件时，却点击不中。会显得很诡异

窗口对象的 setIgnoreMouseEvents方法
	-该方法可以使窗口忽略窗口内的所有鼠标事件，并且在此窗口中发生的所有鼠标事件都将被传递到此窗口背后的内容上
	-如果调用该方法时传递了forward参数，如setIgnoreMouseEvents(true,{forward:true})，则只有点击事件会穿透窗口，鼠标移动事件仍会正常触发。

vue 中：
	mounted() {
        const remote = require("electron").remote;
        let win = remote.getCurrentWindow();
        window.addEventListener("mousemove", event => {
            let flag = event.target === document.documentElement;
            if (flag){
            win.setIgnoreMouseEvents(true, { forward: true });
            } 
            else {
                win.setIgnoreMouseEvents(false);
            }
        });
        win.setIgnoreMouseEvents(true, { forward: true });
    }

接着，我们为html、body元素增加样式pointer-events:none，
为#app元素增加样式pointer-events:auto

阻止窗口关闭

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 开发网页时 会弹出一个警告提示，但在 electron应用中不会关闭，但没有提示
window.onbeforeunload = function(){
    return false
}


1、开发者可以在onbeforeunload事件中操作DOM，比如创建一个浮动的div来提示用户，当用户做出关闭窗口的选择后，再关闭窗口，代码如下：

//当用户做出关闭窗口的选择后，执行以下代码关闭窗口
    const remote = require("electron").remote;
    let win = remote.getCurrentWindow();
    win.destroy();// 这里不使用 win.close(); 应为close()会触发 onbeforeunload，导致始终无法关闭

2、监听窗口 close 事件
    win.on('close', function(event){
        win = null;
        event.preventDefault();
    });

记录与恢复窗口状态

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 改变窗口状态时，记录
setState() {
    let win = remote.getCurrentWindow();
    let rect = win.getBounds();
    let isMaxSize = win.isMaximized();
    let obj = { rect, isMaxSize };
    localStorage.setItem('winState', JSON.stringify(obj));
}
// 初始化，获取设置窗口
getState() {
    let win = remote.getCurrentWindow();
    let winState = localStorage.getItem('winState');
    if (winState) {
        winState = JSON.parse(winState);
        if (winState.isMaxSize) win.maximize();
        else win.setBounds(winState.rect);
    }
}

多窗口竞争资源

Electron应用中一个窗口就代表着一个渲染进程，此场景下，两个渲染进程可能会同时读写一个本地文件。这可能会出现异常或表现不符预期的问题。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
	JavaScript是单线程执行的事件驱动型语言，如果我们在同一个窗口（渲染进程）同时发起多个请求，操作同一个文件，就不会出现任何问题（须使用Node.js的fs.writeFileSync同步方法或者控制好异步回调的执行顺序）

1、第一种方案是两个窗口通过渲染进程间的消息通信来保证读写操作有序执行
	也就是说，当某一个渲染进程准备写某文件时，先广播消息给其他渲染进程，禁止其他渲染进程访问该文件；当此渲染进程完成文件写操作后，再广播消息给其他渲染进程，说明自己已经释放了该文件，其他窗口就有写此文件的权力了。
2、【推荐】Node.js提供的fs.watch来监视文件的变化，一旦文件发生改变，则加载最新的文件，这样无论哪个窗口都能保证当前的内容是最新的，而文件的写操作则交由主进程执行。当窗口需要保存文件时，渲染进程发送消息给主进程（消息体内包含文件的内容），再由主进程完成写文件操作。无论多少个窗口给主进程发送写文件的消息，都由主进程来保证文件写操作排队依次执行
3、主进程中设置一个令牌：
	global.fileLock = false;

	渲染进程读取：
    	let remote = require("electron").remote;
        let fileLock = remote.getGlobal('fileLock');
	通过令牌的方式来控制文件读写的权力，当某一个渲染进程需要写文件时，会先判断令牌是否已经被其他渲染进程“拿走”了（此例中判断令牌变量是否为true）。如果没有，那么此渲染进程“占有”令牌（把令牌变量设置为true），然后完成写文件操作，再“释放”令牌（把令牌变量设置为false）
	无法直接修改主进程令牌的值，只能发送消息让主进程修改。
    
    
【扩展】　Node.js提供了两个监控文件变化的API——fs.watch和fs.watchFile。使用fs.watch比使用fs.watchFile更高效，因此我们应尽可能使用fs.watch代替fs.watchFile。

模态窗口与父子窗口

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
模态框： 用户在窗口A业务操作，打开窗口B。完成操作后关闭窗口B才能返回窗口A。那么窗口B就是模态框

// 打开模态框， 
const remote = require("electron").remote;
this.win = new remote.BrowserWindow({
    parent: remote.getCurrentWindow(),// 父窗口为当前窗口
    modal: true,// 开启模态框
    webPreferences: {
        nodeIntegration: true
    }
});

// 如果不设置modal: true; 则创建一个父子窗口，子窗口不会禁用父窗口

【注意】mac电脑用应用程序关闭所有窗口后不会退出，而是继续保留在Dock栏，以便用户再想使用应用时，可以直接通过Dock栏快速打开应用窗口
app.on('window-all-closed', () => {
    // require('os').platform()方法获取，在同一个环境下使用这两种方法返回的值是一样的
    if (process.platform !== 'darwin') {
        app.quit()
    }
})

界面

如果把一个GUI应用比作一个房屋的话，窗口、标题栏和边框就是房屋的墙、房顶和地板，界面就是房屋内各类生活用品，比如桌椅板凳、电视电话等。要想建设一个功能复杂且用户体验优秀的GUI应用，开发者势必会在界面上花费大量的时间和精力

页面内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
1、获取 webContents 实例
	webContents是一个EventEmitter. 负责渲染和控制网页, 是 BrowserWindow 对象的一个属性
    -通过窗口对象获取
		let webContent = win.webContents;
	-获得当前处于激活状态下的窗口的webContents实例, 没有激活态窗口返回null
        const { webContents } = require('electron');
        let webContent = webContents.getFocusedWebContents();
	    // 在A进程中调用此方法获取到的不一定是A窗口 webContents 实例
	-渲染进程中获取当前 webContents实例
    	const { remote } = require('electron');
        let webContent = remote.getCurrentWebContents();
		// 创建一个窗口时，electron会为窗口设置一个整形id属性（只读）
	-通过 窗口 id 属性获取 webContents 实例
    	const { webContents } = require('electron');
        let webContent = webContents.fromId(yourId);
	-获取所有 webContents 对象 实例
    	webContents.getAllWebContents();


窗口类型也拥有类似的方法，比如通过
	BrowserWindow.getFocusedWindow() //获取当前激活状态的窗口
    remote.getCurrentWindow() //获取当前渲染进程关联的窗口；
    BrowserWindow.fromId(id) //根据窗口ID获取窗口实例；
    BrowserWindow.getAllWindows() //获取所有窗口。

页面加载事件及触发顺序

1
2
3
4
5
6
7
1、did-start-loading // 页面加载过程第一个事件
2、page-title-updated // 页面标题更新
3、dom.ready // 页面dom加载完成时触发
4、did-frame-finish-load // 框架加载完成时触发【页面可能有多个iframe】
5、did-finish-load // 当页面加载完成时触发
6、page-favicon-updated // 页面icon图标更新时触发
7、did-stop-loading // 所有内容加载完成时触发

页面跳转事件

1
2
3
4
5
凡是以navigate命名的事件，一般都是由客户端控制的跳转，比如用户点击了某个链接或者JavaScript设置了window.location属性；
凡是以redirect命名的事件，一般都是由服务端控制的跳转，比如服务端响应了302跳转命令。

301跳转代表永久性转移，即你请求的地址已经被永久性地转移到了一个新地址；
302代表临时性转移，即你请求的地址被临时性地转移到了一个新地址。

1
2
3
4
1、单页应用中的页内跳转
-history

-hsah

页面缩放

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
1、webContents的setZoomFactor方法来设置页面的缩放比例，此方法接收一个缩放比例的参数

const { remote } = require("electron");
let webContents = remote.getCurrentWebContents();
webContents.setZoomFactor(0.3)
let factor = webContents.getZoomFactor();
console.log(factor);  //输出0.3


2、webContents的setZoomLevel方法来设置网页缩放等级

const { remote } = require("electron");
let webContents = remote.getCurrentWebContents();
webContents.setZoomLevel(-6)
let level = webContents.getZoomLevel();
console.log(level);  //输出-6
默认情况下用户可以通过Ctrl+Shift+=快捷键来放大网页，Ctrl+-快捷键来缩小网页。

渲染海量数据元素

1
2
3
4
5
6
7
8
9
1、canvas
	适合在较小的画布上绘制大量的元素，且有着较强的频繁重绘能力。
	大面积画布，canvas拒绝工作
2、PixiJS库（https://github.com/pixijs/pixi.js）
	对WebGL API进行了二次封装，并与Canvas技术完美兼容。因其拥有强大的硬件加速能力，所以性能表现优异，诸如谷歌、YouTube、Adobe等国际巨头都是这个开源项目的用户。
	
	
3、cheetah-grid（https://github.com/TonyGermaneri/canvas-datagrid）
	这个开源项目来完成类似的需求，这个项目除了是使用Canvas技术渲染首屏数据之外，其他逻辑与本文介绍的基本一致。

页面容器

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
1、webFrame
	在Electron应用中，每有一个 iframe 就对应着一个 webFrame 实例。即使一个页面中如果没有任何子页面，它本身也是一个webFrame实例，即主webFrame，也就是 mainFrame。
    const { webFrame } = require('electron');// 主实例
	// 获取子 webFrame实例 
	-webFrame.findFrameByName(name)方法
    -webFrame.findFrameByRoutingId(routingId)方法
    -webFrame.firstChild属性、webFrame.nextSibling属性
【注意】Electron有一个BUG：只有相同域下的iframe才可以用findFrameByName或firstChild之类的方法获取到。
// nodeIntegrationInSubFrames属性设置为true，这个属性的含义是：是否允许在子页面或子窗口中集成Node.js
let win = new BrowserWindow({
    webPreferences: {
        nodeIntegration: true,
        nodeIntegrationInSubFrames: true
    }
});

2、webview 【不推荐】
	开发者可以通过标签在网页中嵌入另外一个网页的内容（被嵌入的网页可以是自己的网页，也可以是任意第三方网页），代码如下：
<webview id="foo" src="https://www.github.com/" style="width:640px; height:480px">
</webview>


// 专有属性
·nodeintegration：使webview具有使用Node.js访问系统资源的能力。
·nodeintegrationinsubframes：使webview内的子页面（iframe）也具有使用Node.js访问系统资源的能力。
·plugins：使webview内的页面可以使用浏览器插件。
·httpreferrer：设置请求webview页面时使用怎样的httpreferrer头。
·useragent：设置请求webview页面时使用怎样的useragent头。


webview标签默认是不可用的，如果需要使用此标签，那么在创建窗口时，需要设置webviewTag属性：
let win = new BrowserWindow({
width: 800,
height: 600,
    webPreferences: {
        webviewTag: true,  //启用webView标签
        nodeIntegration: true
    }
});

3、BrowserView 【推荐】
	BrowserView被设计成一个子窗口的形式，它依托于BrowserWindow存在，可以绑定到BrowserWindow的一个具体的区域，可以随BrowserWindow的放大缩小而放大缩小，随BrowserWindow的移动而移动。BrowserView看起来就像是BrowserWindow里的一个元素一样。
    let view = new BrowserView({
        webPreferences: { preload } 
    });
	// win 为 BrowserWindow 对象
    win.setBrowserView(view);
    let size = win.getSize();
	// 绑定到这个窗口的具体区域
    view.setBounds({ 
        x: 0,
        y: 80, 
        width: size[0], 
        height: size[1] - 80 
    });
	// 宽度和高度上自适应父窗口的宽度和高度的变化
    view.setAutoResize({ 
        width: true, 
        height: true 
    });
	// BrowserView容器对象通过其webContents属性加载了一个URL地址
    view.webContents.loadURL(url);

// 在实现多个tab切换时应使用 win.addBrowserView。
	BrowserView对象并不像BrowserWindow对象那样拥有hide和show的实例方法。如果需要隐藏一个BrowserView，可以利用win.removeBrowserView(view)显式地把它从窗口中移除掉，需要显示的时候，再利用win.addBrowserView(view)把它加回来。此操作并不会造成BrowserView重新渲染，可以放心使用。
    
css 方式：
	CSS代码显示和隐藏BrowserView：
    view.webContents.insertCSS('html{display: block}'); //显示
    view.webContents.insertCSS('html{display: none}'); //隐藏

脚本注入

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
	
1、proload 注入脚本
	它允许开发者把一段JavaScript代码注入到目标网页中，而这段JavaScript代码看起来就好像是那个网页开发者自己开发的一样。
    这段代码除了可以访问此网页的任意内容，比如Dom、Cookie（包括标记了HttpOnly属性的Cookie）、服务端资源（包括HTTP API）之外，更让人惊喜的是，这段代码还有能力通过Node.js访问系统资源。

	创建窗口时，只要给窗口的webPreferences.preload参数设置具体的脚本路径，即可把这个脚本注入到目标网页中，代码如下：
let win = new BrowserWindow({
    webPreferences: { 
        preload: 'xxx/xxx.js',// yourJsPath 绝对路径
        nodeIntegration: true 
    }
});
// 由于开发者不能事先确定应用程序被用户安装到了哪个路径下，所以程序必须在程序运行时动态地获取注入脚本的绝对路径
const { app } = require('electron');
let path = require('path');
let appPath = app.getAppPath();
let yourJsPath = path.join(appPath, 'yourPreload.js');

	同样，如果你使用BrowserView或者webview标签来嵌入第三方页面，它们都能通过类似的机制来给第三方页注入脚本。
    
 【重点】　无论页面是否开启了webPreferences.nodeIntegration，注入的脚本都有能力访问Node.js的API，但此开关开启与否有较大的差异。
	开启状态时：
    	注入的脚本可以访问Node.js的API，第三方网页也具有了这个权力。
		（如果第三方网站开发者知道，那他完全可以通过nodejs 操纵你的用户的电脑）
	
    关闭状态时：
    	你注入的脚本仍有访问Node.js的API的能力，第三方网页却没有这个能力了


与nodeIntegration属性类似的还有
-nodeIntegrationInWorker // 表示是否允许应用内的Web Worker线程访问Node.js API
-nodeIntegrationInSubFrames //表示是否允许子页面访问Node.js API。
// 所以我们一般 不给第三方页面开启 这个权限




Web Worker技术出现后，允许开发者在浏览器内创建一个新的脚本线程了

/页面JavaScript
//创建Web Worker
let worker = new Worker("testWorker.js");
//向Web Worker发送消息 
worker.postMessage({msg:'hello'});
//接收Web Worker的消息
worker.onmessage = (event) => {console.log(event.data);}
//杀死worker的线程，页面关闭时它也会自动终结
worker.terminate();

//testWorker.js 文件的内容
//接收消息
this.onmessage = function (event) {
    //发送消息
    this.postMessage("Hi " + event.data.msg);
};

【注意】：它们之间发送消息时传递的不是数据的引用，而是数据的复制。

// 当我们使用 Electron 访问第三方网站时。 他们可以通过监视用户请求头里的 User-Agent信息。
当用Electron请求某网站时，默认的User-Agent值是：
	Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, 
like Gecko) chapter5/0.1.0 Chrome/76.0.3809.146 Electron/6.1.2 Safari/537.36

你会发现这个字符串里有Electron字样，第三方网站的运维者也是以此来判断请求是否来自Electron应用的。
// 如果我们不想让他知道; 加载URL时更改User-Agent的值

win.webContents.loadURL('https://www.baidu.com/',{
    userAgent:'Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:68.0) Gecko/
20100101 Firefox/68.0'
})

 如果你的应用程序中有非常多的页面加载请求需要设置User-Agent，那么你可以直接设置app.user Agent Fallback属性的值，设置此值后，应用中所有的页面加载请求都会使用此User-Agent（早期怕版本没有）


2、　通过executeJavaScript注入脚本
	preload参数注入脚本适用于需要注入大量业务逻辑到第三方网站中的需求，而且有时可能不止注入了一个脚本文件，你可以在注入的脚本中通过require加载其他脚本，以控制注入脚本内容的可维护性。
    但如果只需要注入一两句js代码，则可以调用webContents的executeJavaScript即可
    
    // 获取网站的第一个img标签的src属性
	win.once('did-finish-load', async () => {
        // webContents 的 executeJavaScript 方法返回的是一个 Promise 对象
        // 内容稍多，可以写成 自执行函数
        let result = await win.webContents.executeJavaScript("document.querySelector('img').src");
        console.log(result);
    })
3、禁用窗口的beforeunload事件、

	网页可以通过注册beforeunload事件来阻止窗口关闭，当用户关闭窗口时，浏览器会给出警告提示。但如果你用Electron加载了一个注册了beforeunload事件的第三方网页，你会发现这个窗口无法关闭，而且不会收到任何提示。
    
    // webContents的will-prevent-unload事件，通过event.preventDefault()；来取消该事件，这样就可以自由地关闭窗口了。
    win.webContents.on('will-prevent-unload', event => {
        event.preventDefault();
    });

页面效果

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
1、css 控制动画
// 帧动画
@keyframes dropDown {
    0% {
        transform: translate(0px, -120px);
        opacity: 0;
    }
    100% {
        transform: translate(0px, 0px);
        opacity: 1;
    }
}
.appTip {
    animation-name: dropDown;// 动画名称
    animation-duration: 800ms;// 800毫秒内执行完成
    animation-delay: 0ms;// 切换延迟时间 0
    animation-timing-function: ease;// 动画曲线
    animation-iteration-count: 1;// 动画执行一次即可
    animation-fill-mode: forwards;// 执行完成后元素停留在最后一帧的状态
}

2、使用JavaScript控制动画 【推荐】

    JavaScript其实也有自己的动画API——Web Animations API，只不过这个API在很多浏览器内没有被很好地支持，所以其接受度没有CSS Animations高。幸好Chrome浏览器支持Web Animations API
    
    let keyframes = [{
            transform: "translate(0px, -120px)",
            opacity: 0
        },{
            transform: "translate(0px, 0px)",
            opacity: 1
        }];
    let options = {
        iterations: 1,
        delay: 0,
        duration: 800,
        easing: "ease"
    };
    let myAnimation = document.querySelector(".appTip").animate(keyframes, options);
    myAnimation.pause() // 方法暂停动画的执行
    myAnimation.play() // 方法恢复暂停的动画或开始
    myAnimation.reverse() // 方法把动画倒着播放一遍
    myAnimation.onfinish = fn // 动画执行完成后的回调

数据

使用本地文件持久化数据

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
54
55
1、用户数据目录
	操作系统为应用程序提供了一个专有目录来存储应用程序的用户个性化数据：
    
Windows操作系统：C:\Users\[your user name]\AppData\Roaming
Mac操作系统：/Users/[your user name]/Library/Application Support/
Linux操作系统：/home/[your user name]/.config/xiangxuema

// Electron为我们提供了一个便捷的API来获取此路径：
app.getPath("userData");
    此方法执行时会先判断当前应用正运行在什么操作系统上，然后根据操作系统返回具体的路径地址。
    
[扩展]：
// app.getPath()
用户根目录对应的参数为home。desktop、documents、downloads、pictures、music、video都可以当作参数传入，获取用户根目录下相应的文件夹。另外还有一些特殊的路径：
·temp对应系统临时文件夹路径。
·exe对应当前执行程序的路径。
·appData对应应用程序用户个性化数据的目录。
·userData是appData路径后再加上应用名的路径，是appData的子路径。这里说的应用名是开发者在package.json中定义的name属性的值。

// nodejs
·require('os').homedir();//返回当前用户的主目录，如："C:\Users\allen"。
·require('os').tmpdir();//返回默认临时文件目录，如："C:\Users\allen\AppData\Local\Temp"。

Electron为我们提供了相应的API来重置用户数据目录，代码如下：
let appDataPath = app.getPath('appData');
console.log(appDataPath);
//如何让用户选择路径我们将在后续章节讲解
setPath(要重置的路径的名称, 具体的路径)
app.setPath('appData', 'D:\\project\\electron_in_action\\chapter8\\public')
appDataPath = app.getPath('appData');
console.log(appDataPath);
【注意】：
	这个重置只对本应用程序有效，其他应用程序不受影响。
    
2、读写本地文件

// 把yourUserData变量里的数据保存到[userData]/a.data文件内
let fs = require("fs-extra");
let path = require("path");
let dataPath = app.getPath("userData");
dataPath = path.join(dataPath, "a.data");
fs.writeFileSync(dataPath, yourUserData, { encoding: 'utf8' })

// 读取文件
let fs = require("fs-extra");
let path = require("path");
let dataPath = app.getPath("userData");
dataPath = path.join(dataPath, "a.data");
let yourUserData = fs.readFileSync(dataPath,{ encoding: 'utf8' });

// 使用了第三方库 fs-extra，why?
(1)、因为原生fs库对一些常见的文件操作支持不足。
eg: 删除一个目录，如果有子目录的话也删除其子目录。如果使用原生fs库需要开发者写代码递归删除，但使用fs-extra库就只要使用removeSync方法即可

fs-extra 库是对原生fs库的一层包装，它除了原封不动地暴露出fs库的所有API外，还额外增加了很多非常实用的API

使用浏览器技术持久化数

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
Local Storage和Cookies

1、Cookie用于存储少量的数据，最多不能超过4KB，用来服务于客户端和服务端间的数据传输，一般情况下浏览器发起的每次请求都会携带同域下的Cookie数据，大多数时候服务端程序和客户端脚本都有访问Cookie的权力。开发者可以设置数据保存的有效期，当Cookie数据超过有效期后将被浏览器自动删除。

2、Local Storage可以存储的数据量也不大，各浏览器限额不同，但都不会超过10MB。它只能被客户端脚本访问，不会自动随浏览器请求被发送给服务端，服务端也无权设置Local Storage的数据。它存储的数据没有过期时间，除非手动删除，不然数据会一直保存在客户端。

3、Session Storage的特性大多与Local Storage相同，唯一不同的是浏览器关闭后Session Storage里的数据将被自动清空，因此Electron应用在需要保存程序运行期的临时数据时常常会用到它。

4、Web SQL是一种为浏览器提供的数据库技术，它最大的特点就是使用SQL指令来操作数据。目前此技术已经被W3C委员会否决了，在此不多做介绍，也不推荐使用。

5、IndexedDB是一个基于JavaScript的面向对象的数据库，开发者可以用它存储大量的数据，在Electron应用内它的存储容量限制与用户的磁盘容量有关。IndexedDB也只能被客户端脚本访问，不随浏览器请求被发送到服务端，服务端也无权利访问IndexedDB内的数据，它存储的数据亦无过期时间。

【注意】推荐大家使用Cookie和IndexedDB来存储数据。虽然使用Local Storage相较于IndexedDB更简单，但它的容量限制是其最大的硬伤，而且使用第三方工具库也可以简化IndexedDB的使用。

// 使用第三方库访问IndexedDB

Idb（https://github.com/jakearchibald/idb
Dexie.js（https://github.com/dfahlander/Dexie.js）
pouchdb（https://pouchdb.com/）【但学习成本略高】
rxdb
    它是一个可以运行在各大浏览器和Electron内的实时数据库。它最大的特点就是支持订阅数据变更事件，当你在一个窗口更改了某个数据后，你无需再发消息通知另一个窗口，另一个窗口就能通过数据变更事件获悉变更的内容。对于需要向用户显示实时数据的客户端应用程序来说，这非常有用。它是一个开源项目，开源地址为：https://github.com/pubkey/rxdb。



// 第一行创建一个名为testDb的IndexedDB数据库
let db = new Dexie("testDb");

// db.version(1)获得当前版本的实例，然后调用实例方法stores，并传入数据结构对象
db.version(1).stores({articles: "id",settings: "id"});

IndexedDB在这方面提供了版本号支持。假设现有应用的数据库版本号为1（默认值也为1），新版本应用希望更新数据结构，可以把数据库版本号设置为2。当用户打开应用访问数据时，会触发IndexedDB的upgradeneeded事件，我们可以在此事件中完成数据迁移的工作

/增加数据
await db.articles.add({ id: 0, title: 'test'});
//查询数据
await db.articles.filter(article=> article.title === "test");
//修改数据
await db.articles.put({ id: 0, title:'testtest'});
//删除数据
await db.articles.delete(id);
//排序数据
await db.articles.orderBy('title');



读写受限访问的Cookie

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
// 读取Cookie
let getCookie = function(name){
    let filter = new RegExp(name + "=([^;]*)(;|$)");
    let matches = document.cookie.match(filter);
    return matches ? matches[1] : null;
}
// 设置Cookie
// 浏览器发现存在同名Cookie时，会用新Cookie的值替换原有Cookie的值。
let setCookie = function (name,value,days) { 
    var exp = new Date(); 
    exp.setTime(exp.getTime() + days*24*60*60*1000); 
    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString(); 
}

Electron 中 无法读写HttpOnly标记的Cookie和其他域下的Cookie。
Electron为开发者提供了专门用来读取Cookie的API，可以读取受限访问的Cookie

const { remote } = require("electron");
//获取Cookie
let getCookie = async function(name) {
    let cookies = await remote.session.defaultSession.cookies.get({name});
    if(cookies.length>0) return cookies[0].value;
    else return '';
}
//设置Cookie
let setCookie = async function(cookie) {
    await remote.session.defaultSession.cookies.set(cookie);
}

let sess = win.webContents.session;
session实例的Cookie属性用于管理浏览器Cookie
	-get方法接收一个过滤器对象，该对象的关键配置包含name、domain等可选属性，为查找指定的Cookie提供支持。如果你传递一个空对象给get方法，将返回当前会话下的所有Cookie。

	-set方法接收一个Cookie对象，该对象除包含常见的Cookie属性外，还包含HttpOnly和secure属性，也就是说你可以在Electron客户端中用JavaScript代码为浏览器设置HttpOnly的Cookie。通常情况下这类Cookie是在服务端设置的，虽然它保存在浏览器客户端，但JavaScript不具有读写这类Cookie的能力。现在这个限制被Electron打破了，这对于需要访问第三方网站执行一些极客工作的程序员来说帮助巨大。


[拓展]
    在开发Web应用的过程中，我们经常会把Cookie标记上secure属性和HttpOnly属性，这两个属性都用于保护Cookie信息的安全。
为了防止用户的Cookie被恶意第三方嗅探获取，你可以给Cookie设置secure属性，这样标记的Cookie只允许经由HTTPS安全连接传输。
    为了防止XSS跨站脚本攻击，你可以给Cookie设置HttpOnly属性，这样标记的Cookie不允许JavaScript访问。

清空浏览器缓存

1
2
3
4
5
6

await remote.session.defaultSession.clearStorageData({ 
    storages: 'cookies,localstorage' 
})

storages 参数有：appcache,cookies,filesystem,indexdb,localstorage,shadercache,websql,serviceworkers,cachestorage

系统

系统对话框

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
const { dialog,app } = require("electron").remote;
let filePath = await dialog.showOpenDialog({
    title: "我需要打开一个文件",
    buttonLabel: "按此打开文件",
    defaultPath: app.getPath('pictures'),
    properties:"multiSelections",
    filters: [
        { name: "图片", extensions: ["jpg", "png", "gif"] },
        { name: "视频", extensions: ["mkv", "avi", "mp4"] }
  ]
});

1、showOpenDialog方法接受一个配置对象，返回一个Promise对象
let options = {
    title: '对话框标题',
    defaultPath: '对话框默认路径',
    filters: '许打开的文件类型',
    buttonLabel: '认按钮显示的文本',
 	properties: 'multiSelections', //多选，是否可选文件夹，单选等
}
let rs = dialog.showOpenDialog(options)

rs·canceled	表示用户是否点击了此对话框的取消按钮
rs·filePaths 里面的值是用户选择的文件的路径,数组格式

使用 showOpenDialogSync(同步方法) 方法打开对话框后，如果用户迟迟没有选择文件，那么JavaScript执行线程将一直处于阻塞状态。因此，一般情况下不推荐使用此方法

2、保存文件对话框dialog.showSaveDialog
3、显示消息对话框dialog.showMessageBox
4、"关于" 对话框 app.showAboutPanel();
// 开发者可以通过如下代码指定此对话框的内容, 不指定则系统生成默认的
app.setAboutPanelOptions({
   applicationName:'redredstar',
   applicationVersion:app.getVersion(),
   copyright:''
})

菜单

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
1、默认菜单， 自定义菜单
    Electron默认提供程序、编辑、视图、窗口、帮助等五个主菜单以及主菜单下的若干子菜单。
    
    开发者可以在创建Windows窗口时通过设置autoHideMenuBar属性来隐藏菜单，代码如下所示：
let win = new BrowserWindow({
    webPreferences: { nodeIntegration: true },
    autoHideMenuBar:true        // 隐藏窗口的系统菜单
});

// 但用户打开窗口后，按一下Alt键菜单就又回来了（但在Mac系统下这项设置是没有用的，因为Mac系统下的菜单根本就不是显示在窗口内的）。

发者一般还是会创建自己的系统菜单来覆盖Electron自带的菜单，代码如下所示：

let Menu = require('electron').Menu;
let templateArr = [{
        label: "菜单1",// 菜单显示文本
        submenu: [{ label: "菜单1-1" }, { label: "菜单1-2" }]// 子菜单
    },{
        label: "菜单2",
        click() {
            console.log('hello menu')
        },
    },{ label: "菜单3" },
    { label: "菜单4" }];
let menu = Menu.buildFromTemplate(templateArr);
Menu.setApplicationMenu(menu);

- role属性
	系统默认的相关行为
	role属性的可选值还可以是undo、redo、cut、copy、delete、selectAll、reload、minimize、close、quit等，一个菜单项只能设置一个role值
    
- type:'separator'
	菜单和菜单之间出现一个分隔条。还可以把菜单项的type属性设置为checkbox或radio，使其成为可被选中的菜单项
	
// 另外在Mac操作系统下，第一个菜单的位置要留出来，因为Mac操作系统会自动帮应用设置第一个菜单
if(process.platform === 'darwin'){
    templateArr.unshift({label:''})
}


2、HTML右键菜单
	在web端实现需要;
	
<div id="menu">
    <div class="menu">功能1</div>
    <div class="menu">功能2</div>
    <div class="menu">功能3</div>
    <div class="menu">功能4</div>
    <div class="menu">功能5</div>
    <div class="menu">功能6</div>
</div>

window.oncontextmenu = function(e) {
    e.preventDefault();
    var menu = document.querySelector("#menu");
    menu.style.left = e.clientX + "px";
    menu.style.top = e.clientY + "px";
    menu.style.display = "block";
};
window.onclick = function(e) {
    document.querySelector("#menu").style.display = 'none';
};

// 这种方式在electron 中有个弊端。
	这里创建的菜单只能显示在窗口页面内部，不能浮于窗口之上
    
    
3、系统右键菜单
let {Menu} = require('electron').remote;
let menu = Menu.buildFromTemplate([
    { label: "菜单1",
        click() {
            alert("测试测试");
        } 
    },
    { label: "菜单2" },
    { label: "菜单3" },
    { label: "菜单4" }
]);
window.oncontextmenu = function(e) {
    e.preventDefault();
    // popup方法规定菜单默认显示在当前窗口的鼠标所在位置
    menu.popup();
};

4、　自定义系统右键菜单
	
    注意，不应该使用oncontextmenu事件内的e.clientX和e.clientY来获取鼠标位置，因为以这种方式获得的位置是相对于窗口的鼠标位置，而不是相对于屏幕的。如果我们打算在点鼠标右键时显示一个窗口，那么此窗口的坐标应是相对于屏幕的，而不是相对于当前窗口的。

// 正确获取鼠标相对于屏幕位置
window.oncontextmenu = function(e) {
    const { screen } = require("electron").remote;
    let point = screen.getCursorScreenPoint();// 此为鼠标相对于屏幕的位置
    console.log(point);
    console.log(e.clientX + "," + e.clientY);
}
运行以上代码，你会发现打印出来的两个位置是有差异的。

// 注意窗口失活时自动关闭弹窗
win.on('blur', () => {
    menuWin.hide();
})


last:
    HTML5提供了<menu>标签，根据MDN文档描述，它是可以显示在窗口之外的。然而遗憾的是，此标签尚处于实验状态，目前几乎所有的浏览器都还不支持此特性。

快捷键

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
    使用快捷键来操作应用程序往往比使用鼠标更快捷，比如按下Ctrl+S快捷键保存文档，按下Ctrl+F快捷键打开“查找”对话框等。

监听Ctrl+S快捷键的代码如下：
window.onkeydown = function() {
    // event.ctrlKey代表Ctrl键，event.metaKey代表Mac键盘的（花键）都是83
    if ((event.ctrlKey || event.metaKey) && event.keyCode == 83) {
        alert("按键监听");
    }
};


1、监听全局按键事件
	如果希望在窗口处于非激活状态时也能监听到用户的按键，应该使用Electron的globalShortcut模块
    
    const { globalShortcut } = require('electron')
    // globalShortcut.register必须在app ready事件触发后再执行，不然快捷键事件无法注册成功。
    globalShortcut.register('CommandOrControl+K', () => {
        console.log('按键监听')
    })

	// 注销快捷键
	globalShortcut.unregister

	[注意]：
    1、globalShortcut.isRegistered 方法来判断一下该快捷键是否已经被别的应用注册过了。已注册则无法再次注册。
    2、渲染进程有可能重复注册事件的问题（页面刷新），这将导致主进程异常，进而监听不到按键事件

托盘图标

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
电脑下面工具条左下角有个小三角，开打里面有很多应用图表

Electron应用在系统托盘处注册一个图标十分简单，代码如下：
let { app, BrowserWindow, Tray } = require('electron');
let path = require('path');
let tray;
app.on('ready', () => {
    let iconPath = path.join(__dirname, 'icon.png');
    // 新建了一个Tray实例,并把图标文件的路径传递给了这个实例,该实例被赋值给一个全局对象（避免被垃圾收集），此时就可以在系统托盘显示应用程序的图标
    tray = new Tray(iconPath)
}
       
QQ有一个有趣的特性，即有新消息时，QQ的托盘图标会闪烁。此特性的实现原理就是不断切换托盘图标
       
    let iconPath2 = path.join(__dirname, 'icon2.png');
    let flag = true;
    setInterval(() => {
        if (flag) {
            tray.setImage(iconPath2);
            flag = false;
        } else {
            tray.setImage(iconPath);
            flag = true;
        }
    }, 600)


// 通过托盘图表菜单打开应用
tray.on('click', function() {
    win.show();
})
// 在Windows或Mac系统中，还可以注册鼠标双击事件（'double-click'）或鼠标右键点击事件（'right-click'）
[注意]：
	1、双击托盘图标，除了会触发'double-click'事件，也会触发'click'事件
	2、鼠标右键单击托盘图标，则只会触发'right-click'事件不会触发'click'事件。
    
    
给托盘图标注册菜单
// 【注意】注册菜单后托盘图标将不在响应 'right-click'事件。
let { Tray,Menu  } = require('electron');
let menu = Menu.buildFromTemplate([{
click() { win.show();  },
    label: '显示窗口',
    type: 'normal'
}, {
    click() { app.quit();  },
    label: '退出应用',
    type: 'normal'
}]);
// 绑定到托盘图标实例
tray.setContextMenu(menu);

剪切板

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
1、剪切文本

let { clipboard } = require("electron");
clipboard.writeText("你好Text");  // 向剪切板写入文本
clipboard.writeHTML("<b>你好HTML</b>"); // 向剪切板写入HTML

按Ctrl+V快捷键，就可以把剪切板里的内容输出出来

2、剪切图片
    要借助Electron提供的nativeImage模块才能实现，代码如下：
let path = require("path");
let { clipboard, nativeImage } = require("electron");
let imgPath = path.join(__static, "icon.png");
// 创建了一个nativeImage对象
let img = nativeImage.createFromPath(imgPath);
clipboard.writeImage(img);

3、清除剪切板内容
    如果需要清除剪切板里的数据，可以使用如下代码：
clipboard.clear();

4、读取剪切板中内容
let { clipboard } = require("electron");
clipboard.readText();        // 读取剪切板的文本
clipboard.readHTML();        // 读取剪切板的HTML

读取并显示剪切板的图片，也要借助Electron的nativeImage模块，代码如下所示：
let { clipboard } = require("electron");
let img = clipboard.readImage();
// toDataURL方法返回图像的base64编码的数据字符串
let dataUrl = img.toDataURL();
let imgDom = document.createElement('img')
imgDom.src = dataUrl;
document.body.appendChild(imgDom);

[注意]：
	-使用截图工具，没有问题
    -在系统文件夹里复制，图片加载失败
因为此时剪切板里是一个文件而不是真正的图像数据（可以通过nativeImage实例的isEmpty方法来判断nativeImage实例中是否包含图像数据）

// Windows操作系统下
let filePath = clipboard.readBuffer('FileNameW').toString('ucs2')
filePath = filePath.replace(RegExp(String.fromCharCode(0), 'g'), '');
// Mac操作系统下
var filePath = clipboard.read('public.file-url').replace('file:// ', '');

使用clipboard-files这个Node.js模块

可以通过如下代码获取剪切板内的文件路径：
const clipboard = require('clipboard-files');
let fileNames = clipboard.readFiles();


截图

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
在electron中提供了desktopCapturer模块，该模块只能在渲染进程使用。
该模块只提供了一个方法：desktopCapturer.getSources(options, callback)：

options是一个对象，其中包含两个参数
-types： 一个 String 数组，列出了可以捕获的桌面资源类型, 可用类型为 screen 和 window.
-thumbnailSize (可选) ：建议缩略可被缩放的 size, 默认为 {width: 150, height: 150}.
-callback(error, sources)是一个回调函数，其中会传递两个参数：
-error： 获取截图失败时的错误信息
-sources: 是一个 Source 对象数组, 每个 Source 表示了一个捕获的屏幕或单独窗口，并且有如下属性
-id: 在 navigator.webkitGetUserMedia中使用的捕获窗口或屏幕的id，格式为 window:XX或者screen:XX，XX是一个随机数
-name：捕获窗口或屏幕的描述名，如果资源为屏幕，名字为Entire Screen或Screen <index>; 如果资源为窗口, 名字为窗口的标题
-thumbnail： 屏幕缩略图

// 主进程
const {
  globalShortcut,
  ipcMain,
  BrowserWindow,
  clipboard,
  nativeImage
} = require('electron')

// 保证函数只执行一次
let isRuned = false
// 截图时会出现截图界面，如下就是保存截图窗口的数组
const $windows = []
// 判断是否为快捷键退出，其他的退出方式都不被允许
let isClose = false
module.exports = mainWindow => {
  if (isRuned) {
    return
  }
  isRuned = true

  // 注册全局快捷键
  globalShortcut.register('ctrl+alt+a', function () {
    mainWindow.webContents.send('shortcut-capture')
  })

  // 抓取截图之后显示窗口
  ipcMain.on('shortcut-capture', (e, sources) => {
    // 如果有以前的窗口就关闭以前的窗口
    // 然后根据截图资源于屏幕数据生成窗口
    closeWindow()
    sources.forEach(source => {
      createWindow(source)
    })
  })
  // 有一个窗口关闭就关闭所有的窗口
  ipcMain.on('cancel-shortcut-capture', closeWindow)

  // 截图窗口确认截图时把数据传递到主进程
  // 然后把数据写入到剪切板，并关闭窗口
  // 没有直接在渲染进程把数据写入剪切板是因为在Linux上会报错
  // 所以就把这一步改到主进程完成
  ipcMain.on('set-shortcut-capture', (e, dataURL) => {
    clipboard.writeImage(nativeImage.createFromDataURL(dataURL))
    closeWindow()
  })
}

// 创建窗口
function createWindow (source) {
  // display为屏幕相关信息
  // 特别再多屏幕的时候要定位各个窗口到对应的屏幕
  const { display } = source
  const $win = new BrowserWindow({
    title: '截图',
    width: display.size.width,
    height: display.size.height,
    x: display.bounds.x,
    y: display.bounds.y,
    frame: false,
    show: false,
    transparent: true,
    resizable: false,
    alwaysOnTop: true,
    fullscreen: true,
    skipTaskbar: true,
    closable: true,
    minimizable: false,
    maximizable: false
  })
  // 全屏窗口
  setFullScreen($win, display)
  // 只能通过cancel-shortcut-capture的方式关闭窗口
  $win.on('close', e => {
    if (!isClose) {
      e.preventDefault()
    }
  })
  // 页面初始化完成之后再显示窗口
  // 并检测是否有版本更新
  $win.once('ready-to-show', () => {
    $win.show()
    $win.focus()
    // 重新调整窗口位置和大小
    setFullScreen($win, display)
  })

  // 当页面加载完成时通知截图窗口开始程序的执行
  $win.webContents.on('dom-ready', () => {
    $win.webContents.executeJavaScript(`window.source = ${JSON.stringify(source)}`)
    $win.webContents.send('dom-ready')
    $win.focus()
  })
  // 加载地址
  $win.loadURL(`file://${__dirname}/window/shortcut-capture.html`)
  $windows.push($win)
}

// 让窗口全屏
function setFullScreen ($win, display) {
  $win.setBounds({
    width: display.size.width,
    height: display.size.height,
    x: display.bounds.x,
    y: display.bounds.y
  })
  $win.setAlwaysOnTop(true)
  $win.setFullScreen(true)
}

// 关闭窗口
function closeWindow () {
  isClose = true
  while ($windows.length) {
    const $winItem = $windows.pop()
    $winItem.close()
  }
  isClose = false
}


// 渲染进程
// 主进程捕获到截图快捷键就让渲染进程截图
ipcRenderer.on('shortcut-capture', () => {
  // 获取屏幕数量
  // screen为electron的模块
  const displays = screen.getAllDisplays()
  // 每个屏幕都截图一个
  // desktopCapturer.getSources可以一次获取所有桌面的截图
  // 但由于thumbnailSize不一样所以就采用了每个桌面尺寸都捕获一张
  const getDesktopCapturer = displays.map((display, i) => {
    return new Promise((resolve, reject) => {
      desktopCapturer.getSources({
        types: ['screen'],
        thumbnailSize: display.size
      }, (error, sources) => {
        if (!error) {
          return resolve({
            display,
            thumbnail: sources[i].thumbnail.toDataURL()
          })
        }
        return reject(error)
      })
    })
  })
  Promise.all(getDesktopCapturer)
    .then(sources => {
      // 把数据传递到主进程
      ipcRenderer.send('shortcut-capture', sources)
    })
    .catch(error => console.log(error))
})

系统通知

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
1、使用HTML API发送系统通知
// 在开发网页时，就要先获得用户授权 才能弹出通知。而在electron中则不需要用户授权
Notification.requestPermission(function (status) {
    if (status === "granted") {
        // electron 中可直接创建 Notification 对象
        let notification = new Notification('您收到新的消息', {
            body: '此为消息的正文'
        });
    } else {
        // 用户拒绝授权
    }
});

2、点击通知click 事件
notification.onclick = function(){
    alert('用户点击了系统消息');
}


渲染进程可以使用 HTML5 的系统通知，主进程咋个办？
3、通过remote模块访问主进程中Notification的类型

const { Notification } = require("electron").remote;
let notification = new Notification({
    title:"您收到新的消息",
    body: "此为消息的正文，点击查看消息",
});
// 调用show方法才会显示系统通知
notification.show();
notification.on("click", function() {
    alert("用户点击了系统消息");
});

其他

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
1、使用系统默认应用打开文件
	shell模块，它的主要职责就是启动系统的默认应用。
    
const { shell } = require("electron");
// 系统会使用默认浏览器打开百度主页。但无法判断浏览器是否成功打开了URL地址
let promiseObj = shell.openExternal('https:// www.baidu.com');

// 使用默认应用打开一个Word文档。openItem是一个同步方法，它返回一个布尔值，标记文件是否被成功打开了。
let openFlag = shell.openItem("D:\\ 工作\\ Electron一线手记.docx")

// 把一个文件移入垃圾箱.moveItemToTrash也是同步方法，返回布尔值，标记方法是否成功执行
let delFlag = shell.moveItemToTrash("D:\\ 工作\\ Electron一线手记.docx");

另外shell模块还有
	-创建和读取系统快捷方式（该API仅支持Windows平台）
	-使系统发出哔哔声等功能

2、接收拖拽到窗口中的文件
	H5接收拖拽文件写法：
    // 用户把文件拖拽到目标元素上时触发'dragover'事件，此时可以显示一些提示性文字，比如“请在此处放置文件”。
	document.addEventListener('dragover', ev => {
        ev.preventDefault();
    })
	// 当用户在目标元素上释放鼠标时，触发'drop'事件，此时得到的ev.dataTransfer.files是一个File数组
    document.addEventListener('drop', ev => {
        console.log(ev.dataTransfer.files);
        // file 文件 path 属性具有文件绝对路径，可通过nodejs 对其操作
        ev.preventDefault();
    })
	【注意】
    -要想"drop"事件被正确触发，必须在'dragover'事件中通过preventDefault屏蔽掉浏览器的默认行为。这里阻止的默认行为是开启可编辑模式，具体就是document.designMode属性， 该属性默认是off关闭的，当开启之后就可以对网页进行编辑，开启的方式就是document.designMode = "on"; 开启之后就不用在监听dragover事件中阻止默认了。
        
	H5 FileReader 读取数组中的文件：
    let fr = new FileReader();
    fr.onload = () => {
        var buffer = new Buffer.from(fr.result);
        fs.writeFile( newFilePath, buffer, err => { 
            // 文件保存完成
        });
    };
    fr.readAsArrayBuffer(fileObj);
	// FileReader读取文件对象的方法说明
    -readAsText	以文本方式读取文件，fr.result即为文本内容
    -readAsDataURL	base64 方式读取文件，多用于读取图片，fr.result 为 base64字符串
    -readAsBinaryString	以二进制字符串方式读取文件
    
    
3、使用系统字体
	开发桌面GUI应用，大部分时候我们都希望应用看起来就像系统原生的应用一样，最好在什么操作系统下运行就使用什么操作系统的默认字体。但是不同模块如菜单，对话框，状态栏等使用字体不一样。咋个整？
    
    CSS3提供的系统字体支持来完成这项工作，代码如下：
    <div style="font:caption">这是我的标题</div>
    <div style="font:menu">菜单中的字体</div>
    <div style="font:message-box">对话框中的字体</div>
    <div style="font:status-bar">状态栏中的字体</div>


    Electron使用系统字体示例
    -font:caption代表系统标题的字体
    -font:menu代表菜单栏和菜单项的字体
    -font:message-box代表消息提示的字体
    -font:status-bar代表状态栏的字体
    更多系统字体设置请参阅：https://developer.mozilla.org/zh-CN/docs/Web/CSS/font。


4、最近打开的文件

Electron应用也有API支持实现此功能，如下代码所示：
    // 可以给应用增加一个最近打开的文件，此方法接收一个文件路径字符串参数。
	app.addRecentDocument('C:\Users\Administrator\Desktop\1.jpg');
	// 清空最近打开的文件列表
	app.clearRecentDocuments();
	// 两个方法都只对Mac或Windows操作系统有效，Linux系统没有这方面的能力。

	在Windows系统中，需要做一些额外的操作才能让addRecentDocument有效
    	需要把应用注册为某类文件的处理程序，否则应用不会显示最近打开的文件列表。
        把应用注册为某类文件的处理程序的方法请参阅微软的官方文档
        （https://docs.microsoft.com/zh-cn/windows/win32/shell/fa-intro?redirectedfrom=MSDN）

通信

现代桌面GUI应用很少有孤立存在的，它们往往都需要和其他应用通信，比如和Web服务器上的服务进行通信、和系统内其他应用进行通信等。

与Web服务器通信

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
1、禁用同源策略以实现跨域

用HTTP协议与Web服务进行通信：
    -使用Node.js提供的http或https模块
	
	let https = require("https");
    let url = "https:// www.cnblogs.com/aggsite/AggStats";
    https.get(url, res => {
        let html = "";
        res.on("data", data => (html += data));
        res.on("end", () => console.log(html));
    });

	-禁用同源策略
	let win = new BrowserWindow({
        width: 800,height: 600,
        webPreferences: {
            nodeIntegration: true,
            webSecurity: false, // 此参数禁用当前窗口的同源策略，此时 allowRunningInsecureContent 自动设为true
            allowRunningInsecureContent: true,// 此时，在一个HTTPS页面内访问HTTP协议提供的服务
        }
    })
    
 2、Nodejs 访问HTTP服务不足
 	// 根据不同协议引入不同模块 ，开发人员可能还要考虑封装判断逻辑，这就比较麻烦了
 	let flag = url.startsWith("https:");
    let http = flag ? require("https") : require("http");

    -Electron为我们提供了一个net模块，允许我们使用Chromium的原生网络库发出HTTP或HTTPS请求，它内部会自动判断请求地址是基于什么协议的，代码如下：
    const { net } = require("electron");
    const request = net.request("https:// www.cnblogs.com/aggsite/AggStats");
    request.on("response", response => {
        let html = "";
        response.on("data", data => (html += data));
        response.on("end", () => console.log(html));
    });
    request.end();

	// 这是主进程模块，部分时候都不应该在渲染进程中通过remote使用net模块
	// 当主进程发起请求后，会异步地通知渲染进程的response回调函数，很有可能你的end事件还没注册，主进程的response回调函数就已经执行完了。

    -第三方库
        superagent（https://github.com/visionmedia/superagent
        axios（https://github.com/axios/axios）

    -Fetch
        let res = await fetch(your_url);
        let json = await res.json();
        console.log(json);


3、使用WebSocket通信

	Nodejs调试背后的原理就是通过socket.
    当开发者启动一个Node服务时，Node环境会为开发者启动一个相应的WebSocket监听服务，用以调试这个Node服务的代码. 当代码运行到一个断点时，Node会通过这个WebSocket服务给监听此服务的客户端（也就是调试工具）发送一个消息.同样开发者操作调试工具单步跳过、单步进入，甚至增加、删除一个断点都会以消息的形式发送给这个WebSocket服务，由此服务来控制Node.js程序的运行。
	
	著名的开发工具Visual Studio Code也是基于这套协议开发其Node.js调试器的

4、截获并修改网络请求
	-注入第三方脚本，修改页面ajax 返回的数据	
	
    let open = window.XMLHttpRequest.prototype.open;
	// 重写 ajax open 方法，实现在不影响第三方网页原有逻辑的前提下，精准截获AJAX响应数据的目的
    window.XMLHttpRequest.prototype.open = function (method, url, async, user, pass) {
        this.addEventListener("readystatechange", function () {
            if (this.readyState === 4 && this.status === 200) {
                console.log(this.responseText);  //这是服务端响应的数据
            }
        }, false);
        open.apply(this, arguments);
    }

  	// 这种方法虽然可以正确截获AJAX请求的响应数据，但对截获静态文件请求及修改响应数据无能为力。

	-Electron 提供的 webRequest 对象的方法
    
    // 
    参数1：过滤器对象，此处我们过滤了所有HTTPS的请求
    参数2：
    	监听器方法，该方法的第一个参数details拥有url、method、referrer等请求信息
        第二个参数是一个回调函数，监听到具体的请求后，
        -如果需要转发请求，则给这个回调方法传递一个包含redirectURL属性的对象；
        -如果需要终止请求，可以给这个方法传递一个包含cancel属性的对象；
        -如果不需要做任何额外操作，继续执行现有请求，那么只要给这个方法传递一个空对象即可。
    
    this.win.webContents.session.webRequest.onBeforeRequest({
        urls: ["https://*/*"]}, 
        (details, cb) => {
            if (details.url === 'https://targetDomain.com/vendors.js') {
                cb({
                    redirectURL: 'http://yourDomain.com/vendors.js'
                });
            } else {
                cb({ })
            }
        }
    );

	// 除此之外，Electron还提供了onBeforeSendHeaders、onHeadersReceived、onCompleted和onErrorOccurred等方法供开发者使用，但这些方法除了能获得响应的头的信息外，都无法得到或修改具体的响应数据，相对来说onBeforeRequest方法的价值更大。

与系统内其他应用通信

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
1、Electron应用与其他应用通信
	系统内进程间通信一般会使用IPC命名管道技术来实现（此技术在类UNIX系统下被称为域套接字），Electron并没有提供相应的API，我们是通过Electron内置的Node.js使用此技术的

	-UNIX Domain Socket
UNIX Domain Socket是通过创建一个文件描述符，不同进程之间的通信通过读写这个文件描述符进行通信(可以分为创建进程和其他进程，其他进程之间的相互通信可以通过创建进程作为中转)
	// 创建进程
    const net = require('net')
    const unixSocketServer = net.createServer(server => {
      server.on('data', data => {
        console.log(`receive data: ${data}`)
      })
    })

    unixSocketServer.listen('/tmp/test', () => {
      console.log('listening...')
    })

    // 其他进程
    const net = require('net')
    const socket = net.createConnection({path: '/tmp/test'})
    socket.on('data', data => {
      console.log(data.toString())
    })
    socket.write('my name is vb')
    // 输出结果
    // listening...
    // receive data: my name is vb
    
    -管道
	命名管道是通过固定的文件描述符进行通信:  "\\\\.\\pipe\\" + PIPE_NAME;
	假设有一个第三方程序，需要发送数据给我们的程序，我们可以在Electron应用中创建一个命名管道服务以接收数据，代码如下：
let net = require('net');
let PIPE_PATH = "\\\\.\\ pipe\\ mypipe";
// 通过Node.js的net模块创建了一个命名管道服务对象.
// 当有客户端连接此命名管道服务时，将触发createServer的回调函数
let server = net.createServer(function(conn) {
    conn.on('data', d => console.log(`接收到数据：${d.toString()}`));
    conn.on('end', () => console.log("客户端已关闭连接"));
    conn.write('当客户端建立连接后，发送此字符串数据给客户端');
});
server.on('close', () => console.log('服务关闭'));
server.listen(PIPE_PATH, () => console.log('服务启动，正在监听'));

server.close() // 服务关闭后server对象会收到'close'事件。


// 假设一个第三方程序已经开启了命名管道服务，需要我们的程序给它发送数据，那么可以在我们的应用中创建一个命名管道客户端，代码如下：
let net = require("net");
let PIPE_PATH = '\\\\.\\ pipe\\mypipe';
let client = net.connect(PIPE_PATH, () => {
    console.log("连接建立成功");
    client.write("这是我发送的一个第一个数据包");
});
client.on("data", d => {
    console.log('接收到的数据：${d.toString()}');
    client.end("这是我发送的第二个数据包，发送完之后我将关闭");
});
client.on("end", () => console.log("服务端关闭了连接"));



2、网页与Electron应用通信
	使用 http 模块
	相当于起一个node服务，页面调用接口访问

自定义协议（protocol）

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
使用HTTP协议（http://）加载界面内容，这要在本地创建一个HTTP服务
通过File协议（file://）加载界面内容，它不能很好地支持路径查找，比如，你没办法通过“/logo.png”这样的路径查找根目录下的图片

electron 允许自定义协议：
	
	自定义用户协议之前，我们一般会先告诉Electron框架我打算声明一个怎样的协议。这个协议具备一定的特权，这里的特权是指该协议下的内容不受CSP（Content-Security-Policy内容安全策略）限制，可以使用内置的Fetch API等
    
    
    let { protocol } = require('electron');
    let option = [{ scheme: 'app', privileges: { secure: true, standard: true } }];
    protocol.registerSchemesAsPrivileged(option);

    // 此代码务必在程序启动之初，app的ready事件触发之前执行，且只能执行一次

通过scheme属性指定了协议名称为app，与“http://”类似，接下来我们使用“app://”请求我们应用内的资源。下面我们来真正地注册这个自定义协议：

let { protocol } = require('electron');
let path = require('path');
let { readFile } = require('fs');
let { URL } = require('url');
// 注册了一个基于缓冲区的协议,registerBufferProtocol方法接收一个回调函数，当用户发起基于“app://”协议的请求时，此回调函数会截获用户的请求
protocol.registerBufferProtocol('app', (request, respond) => {
        let pathName = new URL(request.url).pathname;
        pathName = decodeURI(pathName);
        let fullName = path.join(__dirname, pathName);
        readFile(fullName, (error, data) => {
            if (error) { console.log(error); }
            let extension = path.extname(pathName).toLowerCase()
            let mimeType = ''
            if (extension === '.js') mimeType = 'text/javascript' 
            else if (extension === '.html')  mimeType = 'text/html' 
            else if (extension === '.css')   mimeType = 'text/css'
            else if (extension === '.json')  mimeType  = 'application/json'
            respond({ mimeType, data })
        })
    },
    error => { if (error) { console.log(error); } }
)

自定义协议注册完成之后，就可以通过如下方式使用此自定义协议了：
    win.loadURL('app:// ./index.html');

在使用自定义协议访问某页面时，你还是可以在此页面中使用HTTP协议引用外部资源的，它们之间是兼容的

<link rel="stylesheet" type="text/css" href="https:// at.alicdn.com/t/font.css">
<img src="https:// www.cnblogs.com/images/logo_small.gif" alt="">
    
// 自定义所得到的协议都只适用于当前应用程序内部，系统中的其他应用无法使用该协议。

使用socks5代理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
    当你的电脑A无权访问Internet，而另一台电脑B可以访问时，此时就可以让电脑A先连接电脑B，然后通过电脑B来访问Internet。那么电脑B就是电脑A的代理服务器。
常见的代理服务器有HTTP代理、HTTPS代理和socks代理，socks代理隐蔽性更强，效率更高，速度更快。

// 给单个渲染进程设置代理
let result = await win.webContents.session.setProxy({ 
    proxyRules: 'socks5:// 58.218.200.249:2071' 
});
// 加载查询IP网页，显示IP为代理的IP即成功
win.loadURL('https:// www.ipip.net');



// 给整个应用设置代理
app.commandLine.appendSwitch('proxy-server', 'socks5:// 58.218.200.249:2071');

硬件

​ 以前，Web前端技术是没办法访问客户机内的硬件设备的，比如音视频设备、电源设备等。后来HTML5提供了一系列的技术来弥补这项不足，但安全限制颇多，一旦网页尝试使用这些硬件设备，则弹出用户授权窗口，用户授权后网页才有能力访问这些设备。Electron可以自由地使用这些技术，而且默认拥有这些硬件的访问权限，Electron内部甚至还提供了额外的支持以帮助开发者使用更多的硬件能力。

屏幕

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
1、获取扩展屏幕

	电脑可以连接多个显示器。Elecron内置了API以支持获取主显示器及外接显示器的信息。
   -获取外界显示器信息
    let remote = require("electron").remote;
    let mainScreen = remote.screen.getPrimaryDisplay();
    console.log(mainScreen);
	// mainScreen 是一个显示器信息对象
	{
        ·id：显示器ID。
        ·rotation：显示器是否旋转，值可能是0、90、180、270。
        ·touchSupport：是否为触屏。
        ·bounds：绑定区域，可以根据此来判断是否为外接显示器。
        ·size：显示器大小，与显示器分辨率有关，但并不一定是显示器分辨率
    }

   -控制窗口显示在外接显示器上：

    let { screen } = require('electron');
	// 获取所有显示器信息
    let displays = screen.getAllDisplays();
	// 通过显示器信息的bounds对象来判断是否为外接显示器
    let externalDisplay = displays.find((display) => {
        return display.bounds.x !== 0 || display.bounds.y !== 0
    })
    if (externalDisplay) {
        // 着把窗口显示在外接显示器屏幕的左上角
        win = new BrowserWindow({
            x: externalDisplay.bounds.x + 50,
            y: externalDisplay.bounds.y + 50,
            webPreferences: { nodeIntegration: true }
        })
        win.loadURL('https:// www.baidu.com')
    }

	[注意]：
    	1、虽然显示器信息对象包含internal属性，官方说明此属性值为true是内置显示器，值为false为外接显示器。但实验证明，无论是内置显示器还是外接显示器，此值都为false。因此通过display.bounds来确定是否为外接显示器更准确。
		2、screen模块只有在app.ready事件发生之后才能使用


	2、在自助服务机中使用Electron
    
    	目前国内大多数自助服务机同时也是一台PC机，内部安装的是Windows或者Linux操作系统，近年来才逐渐有安卓系统的自助服务机。如果一个自助服务机内安装的是Windows或者Linux操作系统，那么它就可以使用基于Electron开发的应用作为其提供服务的载体。
        
        自助服务机内的应用与传统PC端桌面应用的不同之处在于以下两点：
        ·它们大部分不允许用户主动退出应用。
        ·它们大部分都是支持触屏的应用。
        
        
     ▪防止用户主动退出应用了，代码如下：
    let win = new BrowserWindow({
        kiosk: true,// 窗口打开后将自动处于全屏状态，系统桌面的任务栏和窗口的默认标题栏都不会显示（开发者自定义的标题栏除外）
        webPreferences: {
            nodeIntegration: true,
        }
    });


    ▪Electron应用默认支持触屏设备，无需做额外的设置。触屏应用一般不会显示鼠标指针
    -开发者可以通过如下样式隐藏界面的鼠标指针：
        body{ cursor: none; }
	-通过API把鼠标锁定在窗口可见区域内：
        document.body.requestPointerLock();
	-取消鼠标锁定，可以使用如下API：
        document.exitPointerLock();

	▪在自助服务机上打开系统的软键盘
    	const exec = require("child_process").exec;
        exec("osk.exe");

音视频设备

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
54
55
56
57
58
59
60
	在开发Web网页时，如果要使用用户的音视频设备，浏览器为了安全，会向用户发出提示
    
 一、Electron不必获得用户授权，直接具有访问用户音视频设备的能力，代码示例如下：
 	// 只希望获取两者之一，那么只要把另外一项设置为false即可
 	let option = {
        audio: true,
        video: true
    };
	// 
    // 设置视频的大小
    video: { width: 1280, height: 720 }
    // 取设备前置摄像头
    video: { facingMode: "user" } 
    // 取设备后置摄像头
    video: { facingMode: "environment"  }
	// 指定设备, id设备不可用时返回随机可用设备
	video: { deviceId: myPreferredCameraDeviceId }
	// 指定设备，不愿意随机。 设备不可用时抛出异常
	video: { deviceId: { exact: myExactCameraOrBustDeviceId } }

    1、使用navigator.mediaDevices.getUserMedia来获取用户的音视频流
    let mediaStream = await navigator.mediaDevices.getUserMedia(option);
    let video = document.querySelector("video");
let mst = typeof mediaStream.stop === 'function'? mediaStream:mediaStream.getTracks()[1];
    video.srcObject = mediaStream;
    video.onloadedmetadata = function(e) {
        video.play();
    };
    
	2、获取多个摄像头
    // 返回数组，包括音视频设备
    let devices = await navigator.mediaDevices.enumerateDevices();
	

	3、录屏
    
    	Electron的desktopCapturer模块提供的API获取桌面应用的屏幕视频流：
        	const { desktopCapturer } = require("electron");
		   // 获取所有显示在桌面上的应用信息
            let sources = await desktopCapturer.getSources({
                types: ["window", "screen"]
            });
		   // 获取指定应用
            let target = sources.find(v => v.name == "微信");
		   // 把应用的ID传递给video.mandatory.chromeMediaSourceId，同时设置了video.mandatory.chromeMediaSource 的值为 desktop。
            let mediaStream = await navigator.mediaDevices.getUserMedia({
                audio: false,
                video: {
                    mandatory: {
                        chromeMediaSource: "desktop",
                        chromeMediaSourceId: target.id
                    }
                }
            });
		   // 此后我们得到的视频流对象就与从摄像头里得到的视频流对象基本一致了
            var video = document.querySelector("video");
            video.srcObject = mediaStream;
            video.onloadedmetadata = function(e) {
                video.play();
            };

电源

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
54
55
56
57
58
59
1、电源的基本状态和事件
	
	可以通过如下代码获取到电源管理器（BatteryManager）的实例：
    let batteryManager  = await navigator.getBattery();

	状态：
    - charging	是否正在充电 是-true
    - chargingTime	距离充满还有 XXX s(秒)， 0表示当前满电
    - dischargingTime	电池耗电完还有 XXX s(秒)， 充电时值为 infinity
    - level		代表充电水平， 0-1

	事件：
    - onchargingchange	接入、断开交流电时触发
    - onchargingtimechange	chargingTime 改变时触发
    - ondischargingtimechange dischargingTime 改变时触发
    - onlevelchange		level 改变时触发
    
    
2、监控系统挂起与锁屏事
	Electron应用除了可以使用HTML5 API的能力外，自己也封装了关于电源的powerMonitor模块
    
    const { powerMonitor } = require("electron").remote;
	// 监听系统挂起
    powerMonitor.on("suspend", () => {
        console.log("The system is going to sleep");
    });
    // 监听系统恢复
    powerMonitor.on("resume", () => {
        console.log("The system is going to sleep");
    });
	
	// 监听系统锁屏
	powerMonitor.on("lock-screen", () => {
        console.log("The system is lock screen");
    });

	// 监听系统开锁
    powerMonitor.on("unlock-screen", () => {
        console.log("The system is unlock screen");
    });

3、阻止系统锁屏

	操作系统在长时间没有收到用户鼠标或键盘事件时，会进入省电模式：关闭用户的显示器，把内存中的内容转储到磁盘，进入睡眠模式。
    操作系统为应用程序提供了阻止系统息屏、睡眠的API，Electron也有访问这个API的能力
    
    系统挂起后，系统内一些应用会切换到挂起状态，不再提供服务。（应用程序在下载文件或播放音乐时需要阻止应用挂起）
    
    // 阻止挂起行为
    const { powerSaveBlocker } = require("electron");
    const id = powerSaveBlocker.start("prevent-display-sleep");
	// 应用程序在下载文件或播放音乐时需要阻止应用挂起
    prevent-display-sleep 阻止系统息屏
    prevent-app-suspension 阻止应用程序挂起

	// 来取消阻止行为
	powerSaveBlocker.stop(id) 
    // 来判断阻止行为是否已经启动 
    powerSaveBlocker.isStarted(id)

打印机

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
54
55
56
57
58
59
60
61
1、控制打印行为	
Electron支持把webContents内的内容发送至打印机进行打印，下面是打印webContents内容的代码：

    let { remote } = require("electron");
    let webContents = remote.getCurrentWebContents();
    webContents.print( {
            silent: false,
            printBackground: true,
            deviceName:'',
        }, (success, errorType) => {
            if (!success) console.log(errorType);
        }
    );

	// 执行上面的代码，系统提示你选择打印机

	程序指定打印机：
    
    let { remote } = require("electron");
    let webContents = remote.getCurrentWebContents();
	// 获取所有打印机
    let printers = webContents.getPrinters();
    printers.forEach(element => {
        console.log(element.name);// 输出打印机名称
        webContents.print({
            silent: false,
            printBackground: true,
            deviceName: element.name,
            }, (success, errorType) => {
            	// 成功 success 返回 true, 取消或失败返回 false
                if (!success) console.log(errorType);
            }
        )
    });

2、导出 PDF

let { remote } = require("electron");
let path = require("path");
let fs = require("fs");
let webContents = remote.getCurrentWebContents();
// 其参数与 print 类似，返回 promise,其内容是PDF的Buffer缓存
let data = await webContents.printToPDF({});

// 保存指定路径
let filePath = path.join(__static, "allen.pdf");
// 用户选择路径
let pathObj = await remote.dialog.showSaveDialog({
    title: "保存成PDF",
    filters: [{ name: "pdf", extensions: ["pdf"] }] // 此处设置了保存类型
});
if (pathObj.canceled) return; // 如果用户取消选择，则不保存PDF文件
filePath = pathObj.filePath


// 文件写入方式保存
fs.writeFile(filePath, data, error => {
    if (error) throw error;
    console.log("保存成功");
});

硬件信息

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
1、　获取目标平台硬件信息

	// 如获取内存的使用情况
    let memoryUseage = process.getSystemMemoryInfo()
    console.log(memoryUseage);
	// {total: 16601588, free: 8345352, swapTotal: 19091956, swapFree: 7324224}

	total为当前系统可用的物理内存总量；
    free为应用程序或磁盘缓存未使用的内存总量；
    swapTotal为系统交换内存总量；
    swapFree为系统可用交换内存总量。
    单位均为KB。

    
	// 获取CPU的使用情况
    返回一个CPUUsage对象:
		-percentCPUUsage代表着某个时间段内的CPU使用率
		-idleWakeupsPerSecond代表着某个时间段内每秒唤醒空闲CPU的平均次数.window下一直为0
            
    let cupUseage = process.getCPUUsage();
    setInterval(()=>{
        cupUseage = process.getCPUUsage();
        console.log(cupUseage);
    },1600)



第三方库
    systeminformation（https://github.com/sebhildebrandt/systeminformation）

	let si = require('systeminformation');
    (async function () {
        let cpuInfo = await si.cpu();                                //获取CPU信息
        console.log(cpuInfo);
        let memInfo = await si.mem();                                //获取内存信息
        console.log(memInfo);
        let networkInterfaces = await si.networkInterfaces();        //获取网卡信息
        console.log(networkInterfaces);
        let diskLayout = await si.diskLayout();                      //获取磁盘信息
        console.log(diskLayout)
    })()


拓展： HTML5还提供了蓝牙、VR设备的API，Electron也可以使用




2、使用硬件串号控制应用分发

	开发一个商业桌面GUI应用，有的时候需要控制应用分发的范围，比如用户购买某软件的使用权后，应用开发商只允许用户在某一台固定的物理设备上使用该软件，不允许用户随意地在其他设备上安装并使用。如果用户希望在另一台设备上也可以使用，则需要另外购买使用权。开发者常用的WebStorm或Visual Studio Ultimate等软件都有类似的限制。
    简答说就是把自己的应用搞成付费版

调试

调试

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
	
1、开发啊调试工具
	Electron官方团队为开发者提供了一个调试工具——Devtron，这个工具以浏览器插件的形式为开发者服务，安装方式如下：
    先为项目安装Devtron包：
    > yarn add devtron --dev
    
    接着启动窗口后，在开发者工具的命令行内执行如下指令，安装插件：
    > require('devtron').install();


    安装完成后，开发者工具将会增加一个Devtron的面板	
    
    
2、生产调试工具
	Debugtron（https://github.com/bytedance/debugtron）
	可以帮助开发者完成这项工作。Debugtron是一个基于Electron开发的客户端桌面GUI程序，它就是为调试生产环境下的Electron应用而生的。
    
    Debugtron会自动读取asar当中的源码，界面源码已经全部显示在Debugtron调试工具内了。建议开发者在发布应用程序前对源码做好防护措施，避免被恶意第三方调试。

日志

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
	业务足够复杂的应用程序时，往往会在关键业务执行时记录日志。这些日志在排查问题、跟踪调用流程时非常有用。
    
    些烦琐的工作对于Web服务端开发人员来说不是问题，因为他们可以用Log4j（一个Java的日志记录工具）、winston（Node.js的日志记录工具）

1、业务日志
	Elecron社区有人专门为Electron应用开发了electron-log日志记录工具，以解决这方面的问题

2、网络日志
	
	Electron为我们提供了netLog模块，允许开发人员通过编程的方式记录网络请求数据。代码如下：
    let { remote } = require("electron");

	// 开始记录日志
	// 第一个参数: 是日志文件记录的路径
	// 第二个参数: 是一个配置对象
    await remote.netLog.startLogging("E:\\net.log");

    let ses = remote.getCurrentWebContents().session;
    let xhr = new XMLHttpRequest();
    xhr.open("GET", "https:// www.baidu.com");
    xhr.onload = async () => {
        console.log(xhr.responseText);
        // 结束记录日志
        await remote.netLog.stopLogging()
    };
    xhr.send();
3、崩溃报告
	...

安全

代码运行在浏览器的安全沙箱中，可获得的权限十分有限，开发代码时对安全的考虑也主要集中在XSS（跨站脚本攻击）和CSRF（跨站请求攻击）等问题上。

1
2
3
4
5
6
// 跨站脚本攻击（XSS，Cross Site Scripting）：
	一旦网站允许用户提交内容，并且会在网站的某些页面上显示用户提交的内容，比如留言或者博客等，那么如果不做防范，就有可能受到跨站脚本攻击。
恶意用户会在提交内容时在内容中夹带一些恶意JavaScript脚本。当其他用户访问页面时，浏览器会运行这些恶意脚本，恶意脚本有可能会窃取用户的Cookie、页面上的用户隐私信息等，并发送到恶意用户的服务器。他们可以通过这些窃取来的信息模拟用户身份完成非法操作。这就是跨站脚本攻击。

// 跨站请求攻击（CSRF，Cross Site Request Forgery）：
	当用户登录了自己信赖的网站后，用户身份信息（token）会被保存在用户的浏览器上。后来用户又不小心打开了一个恶意网站，这个恶意网站可能会要求浏览器请求用户信赖的网站（通过iframe等形式），如果用户信赖的网站没有做安全防范就有可能被恶意网站获取到用户的敏感信息，从而给用户带来伤害。

保护源码

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
1、立即执行函数
	立即执行函数有两个优势：
    第一是不必为函数命名，避免了污染全局变量；
    第二是函数内部形成了一个单独的作用域，外部代码无法访问内部的对象或方法，这可以有效地避免业务变量或方法被恶意脚本引用。
    
    
2、禁用开发者调试工具
	传统的Web页面禁用开发者工具，需要用到一系列的trick。

    -比如禁用F12按键（F12的键码是123）：
    window.onkeydown = event => { if (event.keyCode === 123) event.preventDefault(); }
    
    -禁用右键菜单：
    window.oncontextmenu = event => event.preventDefault();

    -禁用Ctrl（Command）+Shift+I按键（I的键码是73）：
    window.onkeydown = event => { 
        if ((event.ctrlKey || event.metaKey) && event.keyCode == 73) {
            event.preventDefault()
        }; 
    }

此外，还有一个有趣的在Web页面上禁用调试工具的方法：
	// 先创建一个Image对象
    var element = new Image();
	// 劫持这个对象的id 属性
    Object.defineProperty(element, "id", {
        get() {
            window.location.href = "https:// www.baidu.com";
        }
    });
	// 当调试者打开控制台的时候，控制台马上就会输出这个Image的Dom对象。而输出此对象的同时就会访问此对象的id属性。 get方法执行 浏览器 URL 被重定向到了百度
    console.log(element);



但在Electron里就不必这么麻烦了，开发者在创建窗口时直接设置webPreferences.devTools参数即可禁用调试工具，代码如下：
let win = new BrowserWindow({
    height: 768,
    width: 1024,
    webPreferences: {
        devTools: false// 禁用开发者调试工具
    } 
});
    通过以上方式打开的窗口，无论是通过菜单的View->Toggle Developer Tools还是使用Ctrl（Command）+Shift+I快捷键都无法打开开发者工具。

3、　源码压缩与混淆
  主要完成了以下五项工作：
    ·去掉不必要的注释、空行、空格。
    ·将变量命名替换成更短的形式（一般都是一两个字符）。
    ·尽可能地将方括号表示法替换成点表示法，比如把obj["param"]替换为obj.param，这不仅能压缩体积，还能提升JavaScript的执行效率。
    ·尽可能地去掉直接量属性名的引号，比如把{"param":"value"}替换为{param:"value"}。
    ·尽可能地合并常量，比如把let str="str1"+"str2"替换为let str="str1str2"。

这个领域最常用的工具就是uglify-js，开源地址为：https://github.com/mishoo/UglifyJS2。

但压缩过的代码不利于调试，所以webpack为开发人员生成了.js.map文件，以支持开发者调试代码。有了此文件，开发者就可以在开发者工具中像调试未压缩的代码一样，准确地定位哪一行出错，在哪一行下断点等。此文件不应该出现在你分发给客户的应用中，恶意用户拿到了此文件就像拿到了你的源码一样。


4、使用asar保护源码
	除了避免其他人看懂、调试你的代码外，最好的源码保护手段就是不让其他人找到你的代码
    Electron为我们提供了这样一个工具：asar。此工具的价值之一就是保护开发者的前端源码。
    
    开发者可以手动安装asar库，然后调用asar库完成打包工作：
    > yarn add -g asar
    > asar pack your-app app.asar

	asar除保护开发者的前端源码外，还可以缓解Windows系统下路径名过长的问题，同时也能略微增加require加载模块的速度。
    
    
5、使用V8字节码保护源码

	V8引擎的一项重要职责就是将JavaScript编译成字节码，字节码是机器代码的抽象，它表述程序逻辑的方式与物理CPU计算模型相似，因此相比于JavaScript代码，将字节码编译为机器码更容易，这也是Chromium和Node.js下执行JavaScript的效率比其他同类竞品好很多的原因。

	这给开发者带来一种可能，那就是我们可以事先把JavaScript代码编译为V8字节码，发布应用时仅发布V8字节码文件
    
    推荐使用 bytenode（https://github.com/OsamaAbbas/bytenode）工具库来编译JavaScript代码。

	// licence.js
	const {app} = require('electron');
    app.on('ready', function(){
        //程序启动时检验授权是否合法,如果不合法，可以启动权限购买页面或禁止程序运行
        console.log('licence accept')
    })
    app.on('window-all-closed',function(){
        //程序退出时检验授权是否合法，如果不合法，可以记录用户信息上报日志或删除程序安装包
        console.log('licence accept')
    });
    module.exports = {
        flag:true
    }

	// 准备编译
	let bytenode = require('bytenode');
    let compiledFilename = bytenode.compileFile({
        filename: `D:\\project\\test\\v8\\licence.js`,
        output: `D:\\project\\test\\v8\\licence.jsc`,
        compileAsModule: true // 代表着你编译的是一个符合CommonJs规范的模块
    });

	// 使用
	let bytenode = require('bytenode');
    let licence = require('./licence.jsc');
    console.log(licence);





【重点】　开发者应该清楚，安全工作是有边界的，当恶意用户攻破你的系统所付出的成本远大于他们能获得的收益时，我们就认为这个系统是安全的。计算机世界自诞生那一刻起攻防之战就在无休止的进行。我们可以认为这世界上没有一个“绝对”安全的应用系统。开发者能做的就是清晰地认知系统的安全边界，尽可能地完成安全工作，让自己开发的系统“足够”安全即可。

保护客户

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
1、禁用Node.js集成
	如果你在webContent中加载的是不受控的内容，一定要禁用Node集成。
    
    ·nodeIntegration：是否在当前窗口或当前BrowserView中集成Node.js环境。
    ·nodeIntegrationInWorker：是否在当前窗口或当前BrowserView的webworker中集成Node.js环境。
    ·nodeIntegrationInSubFrames：是否在当前窗口或当前BrowserView的子页面中集成Node.js环境。

	如果当前窗口或当前 BrowserView 加载了第三方不受控的内容，应保持以上三个配置为默认值false的状态。
    不推荐使用以下代码。
    <webview nodeIntegration src="page.html"></webview>

2、启用同源策略
	// webPreferences 的 webSecurity属性应保持默认为true的状态。
    同理，当我们加载第三方不受控资源的同时也应保持
    // webPreferences.allowRunningInsecureContent的默认值为false。
	一旦禁用了webSecurity属性，allowRunningInsecureContent属性也会被自动的设置为true。
    
3、启用沙箱隔离
	
    let win = new BrowserWindow({
        webPreferences: {
            sandbox: true
        }
    })
    
    Chromium主要的安全特征之一便是所有的blink渲染和JavaScript代码都在沙箱环境内运行。此环境可以保障运行在渲染器内的进程不会损害系统。一旦启用沙箱环境渲染进程，应用程序就像一个浏览器一样，不能使用任何Node.js的能力了。
	但开启沙箱隔离后还是可以给渲染进程的页面预加载脚本的，而且预加载脚本的权力是不变的。
    
4、禁用webview标签
	推荐大家使用BrowserView。
    第三方内容有能力在它自身内部创建一个标签，而它自己创建的标签则完全有可能具有不安全的属性。
    为了防范这一点，我们需要监听webContents的will-attach-webview事件，并在此事件中做安全性的保障，如下代码所示：
    app.on('web-contents-created', (event, contents) => {
        contents.on('will-attach-webview', (event, webPreferences, params) => {
            delete webPreferences.preload
            delete webPreferences.preloadURL
            webPreferences.nodeIntegration = false
            // 还可以通过params参数来判断此webview标签请求的地址。这样就可以避免第三方不可控内容自行构建不安全的标签了。
            if (!params.src.startsWith('https:// example.com/')) {
                event.preventDefault()
            }
        })
    })

	一旦有webview标签被创建即触发该事件，此事件中webPreferences参数与创建BrowserWindow或webview时的webPreferences参数相同。我们可以在此事件中删掉它的preload、preloadURL属性，禁用它的nodeIntegration属性

保护网络

1

保护数据

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
1、使用Node.js加密解密数据
	Node.js的crypto模块来进行数据加密、解密。

首先要为加密、解密工作创建原始密钥和初始化向量，代码如下：
    let crypto = require("crypto");
    const key = crypto.scryptSync('这是我的密码', '生成密钥所用的盐', 32);
    const iv = Buffer.alloc(16, 6);

接着对待加密的数据进行加密，代码如下：
	// 使用aes-256-cbc进行加密,创建了加密对象cipher
    let cipher = crypto.createCipheriv("aes-256-cbc", key, iv);
	// 对数据进行加密
    let encrypted = cipher.update("这是待加密的数据，这是待加密的数据");
	// cipher.final结束加密
    encrypted = Buffer.concat([encrypted, cipher.final()]);
    let result = encrypted.toString("hex");
    console.log(result);

在需要的时候对密文进行解密，代码如下：
let encryptedText = Buffer.from(result, "hex");
let decipher = crypto.createDecipheriv("aes-256-cbc",Buffer.from(key),iv);
let decrypted = decipher.update(encryptedText);
decrypted = Buffer.concat([decrypted, decipher.final()]);
result = decrypted.toString();
console.log(result);

提升稳定性

1

扫一扫，分享到微信

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

侠客行
作者：李白
赵客缦胡缨，吴钩霜雪明。
银鞍照白马，飒沓如流星。
十步杀一人，千里不留行。
事了拂衣去，深藏身与名。
闲过信陵饮，脱剑膝前横。
将炙啖朱亥，持觞劝侯嬴。
三杯吐然诺，五岳倒为轻。
眼花耳热后，意气素霓生。
救赵挥金槌，邯郸先震惊。
千秋二壮士，烜赫大梁城。
纵死侠骨香，不惭世上英。
谁能书阁下，白首太玄经。