Electron 学习笔记

1,625 阅读4分钟

Electron慕课笔记

主进程

渲染进程

进程通信

项目--本地播放器

Electron极客时间笔记

主进程与渲染进程关系

Electron架构

主进程

渲染进程

API模块

app:它管理了我们应用的生命周期,比如退出。同时它又可以设置app本身的一些属性,像Dock。

BrowerWindow:是用来管理我们的窗口。

ipcMain:它是跟ipcRenderer进行IPC通信的

Menu/Tray:这些是我们的原生GUI包括MenuItem等等

Notification:允许我们可以做一个可交互的通知

webContents:是用来加载我们具体的页面

autoUpdater:就是我们的更新模块

globalShortcut:使用来设置全局的一个快捷键

clipboard:它就是用来访问和它就用来读写我们的剪切板

crashReporter:是用来监控我们的主进程和渲染进程是否有崩溃

remote:主要是可以调用我们的主进程模块,建议不要使用

desktopCapture:是用来捕获我们的桌面流,通过这个模块我们可以拿到像系统的截图,屏幕的一个视频流等等

Electron进程间通信的目的

通知事件:比如我们在页面中想去创建一个原生菜单,但只有主进程才能够去创建原生菜单,所以只能通过IPC进程间通信,去让主进程创建我们的菜单

数据传输:比如我想某个页面里获得现在的内存情况,这样就需要将这些数据通过IPC来传输

共享数据:比如我们的用户数据,它在各个进程都会用到,这时候就需要IPC通信来完成数据的共享

IPC模块通信

进程间通信:从渲染进程到主进程

进程间通信:从主进程到渲染进程

页面间(渲染进程与渲染进程间)通信

经验和技巧

我们需要在响应的时候设置一个时长限制,当应用超时时,需要直接Response一个异常的超时事件让业务处理,然后去做对应的交互。

Electron应用原生能力

使用Electron API创建原生GUI

使用Electron API获得底层能力

使用Node.js获得底层能力

使用Node.js调用原生模块

调用OS能力

Electron的能力

前端的想象力

Electron网易云课堂笔记

第一个Electron应用

响应事件

activate 只适合Mac系统

Electron特性

显示开发者工具窗口

窗口的尺寸和位置

全屏窗口

无边框和透明窗口

窗口的锁定模式

设置窗口图标

优雅地加载页面

父子窗口

模态窗口

用代码关闭多个窗口

窗口之间的交互

文件展示窗口(只针对Mac)

打开对话框(1)基础知识

打开对话框(2)定制打开对话框

打开对话框(3)选择指定类型的文件

打开对话框(4)选择和创建目录

打开对话框(5)选择多个文件和目录

打开对话框(6)通过回调函数返回选择结果

保存对话框

消息对话框(1)基础知识

消息对话框(2)定制消息对话框的图标

消息对话框(3)设置消息对话框的类型

消息对话框(4)为消息对话框添加多个按钮

错误对话框

用window.open方法创建子窗口

控制窗口与显示打印对话框

使用postMessage方法传递数据

从窗口返回数据

页面来源

使用eval方法向子窗口传递数据

在窗口中嵌入其他页面

使用webFrame渲染页面

获取屏幕尺寸和鼠标的绝对坐标

在Windows任务栏添加进度条

使用模板创建应用菜单

菜单中的角色

菜单的类型

为菜单项添加图标

动态创建菜单

上下文菜单

为应用程序添加托盘图标和上下文菜单

添加多个托盘图标

托盘事件

托盘方法

为Windows托盘图标添加气泡消息

拖拽和显示图像

拖拽显示不同尺寸的图像

拍照

根据当前操作系统类型定制样式

数据存储:用localStorage读写键值数据

数据存储:用JavaScript引擎操作SQLite数据库

数据存储:在Electron中编译sqlite3模块

electron-packager的基本用法

如何处理应用中的资源

打包任意工程目录

修改可执行文件名

修改应用程序名称

修改应用程序图标

同时为多平台打包

生成asar包

将元信息嵌入到exe文件中(仅适合于windows)

使用electron-packager基础工具

实现基于electron-packager的可视化打包工具