electron new buffer截图_Electron从零开始——主进程(1)

35aa36ee7cfd684e7902e4b7686a2cf6.png

上一篇有朋友评论说是官方文档的中文化,我不否认啊,其实就是把官方的英文文档(当然也可能有些人看了机器翻译的版本),通过自己的语言组织出来,并配上了自己的附图。

和我自己的一贯主张一致,官方文档必然是最基础也是最繁琐的,它不会像其他人写的文章那样浓缩或者就自己遇到的问题进行详细的解释,但我相信90%甚至99%以上的细节,都躺在官方文档里面,我们仅仅是欠缺一个动力主动去发掘而已。

好啦,接下来不考虑 Electron 项目的打包发布,我们先来看看它的基础知识:进程,并从其中的主进程来看看细节。


1 Electron 的进程

其实前面我一直没有提起,Electron 是由两种进程组成的,即主进程和渲染进程:

  • Electron 里,运行 package.json main 脚本的进程被称为主进程Main Process),在主进程运行的脚本可以以创建 web 页面的形式展示 GUI
    • 主进程通过创建浏览器窗口实例来创建网页:每一个 浏览窗口 实例在其渲染过程中运行网页,当一个 BrowserWindow 实例被摧毁时,对应的渲染过程也被终止
    • 主进程管理所有网页及其对应的渲染过程
  • 由于 Electron 使用 Chromium 来展示页面,所以 Chromium 的多进程结构也被充分利用:每个 Electron 的页面都在运行着自己的进程,这样的进程我们称之为渲染进程Renderer Process):
    • 渲染进程只能管理单个的网页,在一个渲染过程中崩溃不会影响其他渲染过程
    • 渲染进程通过 IPC 与主进程通信,在网页上执行 GUI 操作;由于安全考虑和可能的资源泄漏,直接从渲染器过程中调用与本地 GUI 有关的 API 会受到限制

两者之间的通信可以通过进程间通信模块进行:ipcMainipcRenderer ;还有一个从渲染进程调用主进程模块的通讯模块:remote

2 进程 API

针对不同的进程,Electron 提供了不同的 API 以供使用,所以可以分为以下3类 API

2.1 主进程 API

  • app:控制应用的事件生命周期
  • autoUpdater:自动更新
  • BrowserView:创建和控制视图
  • BrowserWindow:创建和控制窗口
  • contentTracing:跟踪并确定性能问题
  • dialog:创建和控制本机系统对话框
  • globalShortcut:监听系统快捷键
  • inAppPurchase:(MAC 专用)Mac App Store 的应用内购买
  • ipcMain:从主模块到渲染模块的异步通信
  • Menu:创建远程应用以及上下文菜单
  • MenuItem:在菜单中添加菜单项
  • net:发出 HTTP HTTPS 请求
  • netLog:记录网络事件
  • Notification:创建桌面通知
  • powerMonitor:监视电源状态
  • powerSaveBlocker:组织系统自动进入省电模式
  • protocol:注册自定义协议并拦截基于协议的请求
  • screen:检索有关屏幕大小、显示器、光标位置等的信息
  • session:管理浏览器会话、cookie、缓存、代理设置等
  • systemPreferences:获取系统配置信息
  • TouchBar:(MAC 专用)配置 TouchBar 布局
  • Tray:添加图标和上下文菜单到系统通知区
  • webContents:渲染以及控制 web 页面

2.2 渲染进程 API

  • ipcRenderer:从渲染器进程到主进程的异步通信
  • remote:在渲染进程中使用主进程模块
  • webFrame:自定义渲染当前网页

2.3 通用 API

  • desktopCapturer:通过[navigator.mediaDevices.getUserMedia] API ,可以访问那些用于从桌面上捕获音频和视频的媒体源信息
  • clipboard:在系统剪贴板上执行复制和粘贴操作
  • crashReporter:将崩溃日志提交给远程服务器
  • nativeImage:使用 PNG JPG 文件创建托盘、dock和应用程序图标
  • shell:使用默认应用程序管理文件和 url

2.4 示例

例如,要在两个进程中访问 Electron API,需要它包含的模块:

const 

若要创建一个窗口,请调用 BrowserWindow 模块,它只能在主进程中使用:

const 

若要从渲染器调用主流程,请使用 IPC 模块:

// 在主进程中
注意:由于渲染过程可能会运行不受信任的代码(特别是第三方的代码),重要的是要认真验证主要进程中提出的请求。
如果要从渲染过程中访问 Node.js API,我们需要设置节点集成首选项为 true

Electron 在主流程和渲染流程中显示对 Node.js API 及其模块的完全访问权限;例如,我们可以从根目录读取所有文件:

const 

要使用 Node.js 模块,首先需要安装它作为依赖:

npm install --save aws-sdk

然后,在 Electron 应用程序中,引入模块:

const 

以上是 API 大致使用方式,接下来,就从主进程的几个关键 API 谈起。

3 任务栏、Dock或者桌面启动器自定义

因为一个应用的功能方方面面,所以我们这里主要是通用的东西,在一个操作系统当中,最明显的就是其系统自带功能,所以我们这里可以使用对应的模块,利用到系统自带功能,从而符合对应系统用户对应用的基础使用习惯。

首先就是 Windows 任务栏、Mac Dock 或者 Linux 的桌面启动器。

3.1 Windows 任务栏自定义

首先我们要明确,这里所谓的 Windows 任务栏是特指 Windows 7 之后版本的任务栏,因为一些新的特性是从 Win7 之后才出现。

首先我们来看看,在任务栏的应用图标上右键点击弹出的菜单,比如:

122a913b64c19d5f0697ddcf33a2529f.png
VS Code 的右键菜单,我们自定义的是“任务”这个部分

可以看到,右键点击任务栏中 VS Code 图标后,会弹出一个菜单,其中“任务”这个部分仅有一个命令——新窗口;我们在自己的应用当中也可以定义出这样一个任务菜单项,只需要在 主进程代码中(通常是 main.js 或者 index.js)增加(有基础代码的情况下,基础代码可以参考上一章节):

c03aa70e5f9def8143130d9c6e8150fd.png
app

这样在运行应用之后,我们右键点击其图标,就可以看到效果了:

592314b99990b2e89b4185938df995b3.png

接着是带有缩略图的工具栏,比如:

bc0c02e5ff8ad15dc4c6f86e701fd58e.png

当然 WMP 现在很少人用了,不过这种工具栏还是很有参考价值的,如果我们开发一个和音视频有关的应用,可能也很想使用这种方式来提供更多的互动,那么可以增加如下内容:

mainWindow
突然发现这个方法有点问题,我直接用官方的方式居然没有按钮……上周因为截图有问题我就没有试过,本身用的也少,居然没发现这个问题……囧一个,我回头看看是不是自己哪里搞错了。

82585a3a957c7f2dcfbfa2e265343bcd.png
放出一个完整的桌面,大家可以看看,忽略我的MC桌面哈

另外还有我们常见的如果应用失去焦点,但突然获得活动更新了,可以考虑加入图表闪烁的功能,代码也很简单:

mainWindow

3.2 Mac Dock 自定义

这个例子其实是官网的例子,代码如下:

const 

9cf124ff9f91da00d6bba8b980f4fdb2.png

3.3 Linux 桌面启动器自定义

这个其实是围绕着 Linux 桌面的 .desktop 文件来实现的,实际上不能算是直接通过 API 编程实现的,下面是个例子:

Actions=PlayPause;Next;Previous

[Desktop Action PlayPause]
Name=Play-Pause
Exec=audacious -t


[Desktop Action Next]
Name=Next
Exec=audacious -f


[Desktop Action Previous]
Name=Previous
Exec=audacious -r

2368697182f070ef66c5f9bc77892764.png

我今天检查截图才发现了自己上周的有关 ThumbarButton 的实例有问题,见谅哈大家,我回头也查查看是哪里的问题。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值