图解 Electron 进程模型

news2025/7/18 12:00:13

在这里插入图片描述

此前，已经介绍了《如何从 0 开始，创建一个 Electron 的 App》，每个人就有了一个梦开始的地方。如果想实现一个功能丰富的 App，了解一点基础知识，是非常必要的。比如，Electron 的进程模型。

一、简介 Chrome 的进程模型

Chrome 浏览器是多进程的结构，使用一个管理器，来管理多个页面进程，每个页面存在一个沙盒中，如果崩溃了，也不会影响其他的页面。

插图，Chrome浏览器进程管理模型

从上图我们看到，每个页面独占一个进程，管理器负责管理所有的页面。这种架构，使得浏览器的稳定性加强，但是资源占用更加庞大，系统架构也更加复杂。

二、Electron 的进程模型

Electron的进程模型图

Electron 的进程模型参考 Chrome，也存在一个管理器进程，即主进程，这是一个系统进程，启动的时候，会首先加载我们项目里的 main.js 文件，这个文件的路径，需要在 package.json 文件里配置，用 main 这个 key，告诉 electron 启动的时候，去哪个路径找入口文件，显然，入口文件的名字也是可以改的。

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "Hello World!",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Jane Doe",
  "license": "MIT",
  "devDependencies": {
    "electron": "23.1.3"
  }
}

上面是一个 package.json 的代码范例，注意第 5 行。

这个主进程，暴露给开发者的接口，是一个对象 —— app，在上篇系列文章中，我们可以看看 main.js 的代码，里面引用的 app 对象，就是主进程的句柄。

而 Web 网页，是通过另一个进程加载的，就是 BrowserWindow，我们在 app 的 ready 回调里，创建浏览器窗口对象，并加载我们写好的网站 App，至此完成了一个 Electron 的应用的启动和加载。

const { app, BrowserWindow } = require('electron')

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })

  win.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()
})

上面是一个 main.js 的代码范例，注意 app 这个对象，以及倒数第二行，createWindow() 的调用时点。whenReady 是主进程 app 初始化完毕的时点，另外 Electron 还会提供一些其他的事件钩子，比如 activate 和 close 或者 window-all-closed 等等。我们可以给这些钩子注册各自的处理函数，只要确定，这些处理器在被调用时，应该是已经处于可以正确的调用的时候，才不会报错。

不难看出，BrowserWindow 对象的数量，本质上是没有限制的，也就是我们可以用这种方式创建一个多窗口的 App，不过创建一个单窗口的 App，更符合一般简单 App 的习惯。在一个浏览器窗口内，完成所有的功能操作，这本身和 Web 开发里的 SPA 概念很像，也即单页应用。而 Vue 就是非常适合开发单页应用的一种前端框架，所以 Vue 3 和 Electron 可以说是开发桌面 App 的绝配。

三、如何在 Eletron App 中使用 Vue 框架

BrowserWindow 对象提供一个 API，就是 laodURL，在一个窗口创建完毕后，我们可以加载一个 Web App 的首页，其实也就是一个 Vue App 的入口文件，index.html，加载成功后，我们就看到了页面。注意看上面 main.js 的第 9 行，这里加载一个 index.html，也就是你的 Vue App 的 index.html。

在 Eletron App 中，BrowserWindow 也是运行所有 js 代码的地方，因为 index.html 文件里，肯定会用 <script> 标签来加载 js，这样就启动了 Vue 的框架代码。Vue 3 的默认的入口文件，也叫 mian.js 或者 main.ts，如果和 Electron 一起开发的话，我们可以给入口主文件改个名字，叫 renderer.js 或者 renderer.ts，这样概念就会更清楚，让其他开发者也更能理解你的项目的结构。

在 Electron 中，这个 BrowserWindow 的进程，也叫 renderer。其实，从这里不难看出，其实 Vue 实现的 App 的 js 代码，和 main.js 里的 js 代码，本质上运行在两个不同的进程里。这也就是为什么两者的互相调用，需要进行进程中通信的原因。

四、衔接者 preload.js

以前的 Electron 的规范不那么严格，我们一般会把 ipcRenderer 直接暴露到 Web App 一侧，不过这么做并不安全，如果需要访问主进程的一些资源，还是应该通过 IPC 通信的方式更正规和安全。

方法是通过 preload.js 来给 BrowserWindow 注入一些预定义的 API，方便从 Web 侧给主进程发送进程间通信。在 prelaod.js 里，能够使用的 API 是收到很大的限制的。

什么情况需要进行这种 IPC 通信呢？比如，你作为一个 Web App，你需要访问用户本地的系统资源，比如文件系统，或者其他宿主操作系统的资源，比如剪贴板，系统托盘区，打印机之类的外设。Node.js 的系统进程身份给这种调用提供了方便，但是其开发接口，是通过 API，更像是前后台程序在互相调用。所以前端程序员很适合来开发 Eletron 的 App。

const { contextBridge } = require('electron')

contextBridge.exposeInMainWorld('versions', {
  node: () => process.versions.node,
  chrome: () => process.versions.chrome,
  electron: () => process.versions.electron
  // we can also expose variables, not just functions
})

上面是一个 preload.js 脚本的范例，里面看起来使用了 require，但是这个脚本其实是收到限制的，只有非常有限的 node 模块可以在这里加载，上面使用 contextBridge 对象，给浏览器内部的 App，暴露了三个 API，即 windows.versions.node 等三个，显示类库版本的接口。实际上我在开发过程中，也是用类似的方法来做到网页和系统的 node 进行通信。实现磁盘文件操作和系统进程服务调用的。

总结

本文简介了 Eletron 的各种进程的类型和交互原理，讲清楚了如何将流行的 Web 开发框架嵌入到 Electron 中，并说明了 Web 侧进程和后台 node 如何进行互相调用。更多 Electron + Vue 3 的 App 的操作方法，请参考我的开源项目HexoPress，这里提到的技术，里面都有用到。大家感兴趣可以看看真实项目是怎么写的，谢谢！如果感到有用，请给我一个免费的👍🏻和小⭐️，谢谢！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1474014.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

ChatGPT 国内快速上手指南

ChatGPT 国内快速上手指南

ChatGPT简介 ChatGPT是由OpenAI团队研发的自然语言处理模型&#xff0c;该模型在大量的互联网文本数据上进行了预训练&#xff0c;使其具备了深刻的语言理解和生成能力。 GPT拥有上亿个参数&#xff0c;这使得ChatGPT在处理各种语言任务时表现卓越。它的训练使得模型能够理解上…
阅读更多...
office word保存pdf高质量设置

office word保存pdf高质量设置

1 采用第三方pdf功能生成 分辨率越大质量越好
阅读更多...
C语言中strstr函数的使用！

C语言中strstr函数的使用！

strstr函数的作用是什么&#xff1f; 查找子字符串 具体直接看下面的这段代码我相信你必明白 #define _CRT_SECURE_NO_WARNINGS 1 #include<stdio.h> int main() { char *p1 "abcdefghijklmnopqrstuvwxyz"; char* p2 "abc"; char* r…
阅读更多...
深度学习手写字符识别：推理过程

深度学习手写字符识别：推理过程

说明 本篇博客主要是跟着B站中国计量大学杨老师的视频实战深度学习手写字符识别。 第一个深度学习实例手写字符识别 深度学习环境配置 可以参考下篇博客&#xff0c;网上也有很多教程&#xff0c;很容易搭建好深度学习的环境。 Windows11搭建GPU版本PyTorch环境详细过程 数…
阅读更多...
数据库：MySQL查询一个数据表中不含另一个数据表的内容

数据库：MySQL查询一个数据表中不含另一个数据表的内容

例子&#xff1a;查询数据库中 public_codename 表中 id 不包含在 public_code 表的 code_id 字段中的数据 SELECT * FROM public_codename WHERE id NOT IN (SELECT code_idFROM public_code );
阅读更多...
visual studio2022使用tensorRT配置

visual studio2022使用tensorRT配置

只记录tensorRT在vs中使用时的配置&#xff0c;下载和安装的 文章主页自己寻找。 下载好TensorRT和对应的cuda之后&#xff0c;把tensorRT的锻炼了和lib文件复制粘贴到cuda对应的文件夹中&#xff0c;以方便调用。 完成之后打开vs新建一个tensorRT的项目&#xff0c;然后开始配…
阅读更多...
日更【系统架构设计师知识总结3】存储系统

日更【系统架构设计师知识总结3】存储系统

【原创精华总结】自己一点点手打、总结的脑图&#xff0c;把散落在课本以及老师讲授的知识点合并汇总&#xff0c;反复提炼语言&#xff0c;形成知识框架。希望能给同样在学习的伙伴一点帮助&#xff01;
阅读更多...
ClickHouse 指南（三）最佳实践 -- 跳数索引

ClickHouse 指南（三）最佳实践 -- 跳数索引

Data Skipping Indexes Data Skipping Indexes 2 1、简介 影响ClickHouse查询性能的因素很多。在大多数情况下&#xff0c;关键因素是ClickHouse在计算查询WHERE子句条件时是否可以使用主键。因此&#xff0c;选择适用于最常见查询模式的主键对于有效的表设计至关重要。 然…
阅读更多...
iPhone利用文件管理器批量导出语音备忘录和照片到电脑

iPhone利用文件管理器批量导出语音备忘录和照片到电脑

步骤1&#xff1a;使用文件服务器在 iPhone 和电脑间共享文件 参考文献&#xff1a;苹果官网操作指南 步骤1.1&#xff1a;iPhone上打开文件app&#xff0c;点击右上角三个点&#xff0c;选择“连接服务器” 步骤1.2&#xff1a;输入电脑的登录账号和密码 步骤1.3&#xff1a…
阅读更多...
设计模式(十) - 工厂方式模式

设计模式(十) - 工厂方式模式

前言 在此前的设计模式&#xff08;四&#xff09;简单工厂模式中我们介绍了简单工厂模式&#xff0c;在这篇文章中我们来介绍下工厂方法模式&#xff0c;它同样是创建型设计模式&#xff0c;而且又有些类似&#xff0c;文章的末尾会介绍他们之间的不同。 1.工厂方法模式简介 …
阅读更多...
SpringCloud有哪些组件

SpringCloud有哪些组件

什么是SpringCloud&#xff1f; Spring Cloud是基于Spring Boot的分布式系统开发工具&#xff0c;它提供了一系列开箱即用的、针对分布式系统开发的特性和组件&#xff0c;用于帮助开发人员快速构建和管理云原生应用程序。 Spring Cloud的主要目标是解决分布式系统中的常见问题…
阅读更多...
mybatis 集成neo4j功能实现

mybatis 集成neo4j功能实现

文章目录 前言一、引入jar包依赖二、配置 application.properties三、Mybatis Neo4j分页插件四、Mybatis Neo4j自定义转换器handler五、MybatisNeo4j代码示例总结 前言 MyBatis是一个基于Java语言的持久层框架&#xff0c;它通过XML描述符或注解将对象与存储过程或SQL语句进行…
阅读更多...
vue项目打包获取git commit信息并输出到打包后的指定文件夹中

vue项目打包获取git commit信息并输出到打包后的指定文件夹中

需求背景&#xff1a; 前端项目经常打包&#xff0c;发包部署&#xff0c;为了方便测试及运维发现问题时与正确commit信息对比 实现方式&#xff1a; 使用Node.js的child_process模块来执行git命令 实现步骤&#xff1a; 1.在package.json的同级目录下新建一个version.js文件。…
阅读更多...
软件无线电SDR加人工智能算法实现无人机频谱探测

软件无线电SDR加人工智能算法实现无人机频谱探测

通用软件无线电接收机作为传感器实时接收探测无线电信号&#xff0c;加上深度学习算法实现频谱识别&#xff0c;(https://img-blog.csdnimg.cn/5a6c4d89a047453a94f763f4e67aeb17.png)
阅读更多...
十一、Qt自定义Widget组件、静态库与动态库

十一、Qt自定义Widget组件、静态库与动态库

一、自定义Widget组件 1、自定义Widget组件 使用步骤采用提升法&#xff08;promotion&#xff09;重新定义paintEvent事件 2、实现程序 &#xff08;1&#xff09;创建项目&#xff0c;基于QWidget &#xff08;2&#xff09;添加类&#xff0c;为Widget组件提升类 #inclu…
阅读更多...
超低价电商源码看过来，可二次开发，低至1万起

超低价电商源码看过来，可二次开发，低至1万起

电商源码是多商户跨境电商系统软件开发中的重要组成部分。本文将详细介绍电商源码的概念、作用、开源的Java电商平台系统开发步骤以及相关注意事项&#xff0c;帮助您更好地了解电商源码和多商户跨境电商系统软件开发。 一、电商源码的概念和作用 电商源码是指电子商务网站或…
阅读更多...
挑战杯 基于机器视觉的图像拼接算法

挑战杯 基于机器视觉的图像拼接算法

前言 图像拼接在实际的应用场景很广&#xff0c;比如无人机航拍&#xff0c;遥感图像等等&#xff0c;图像拼接是进一步做图像理解基础步骤&#xff0c;拼接效果的好坏直接影响接下来的工作&#xff0c;所以一个好的图像拼接算法非常重要。 再举一个身边的例子吧&#xff0c;…
阅读更多...
Netty01NIO

Netty01NIO

NIO基础 NIO &#xff1a;non-blocking io 非阻塞 IO 笔记 www.zgtsky.top 网课&#xff1a;黑马Netty 三大组件 Channel & Buffer channel 有一点类似于 stream&#xff0c;它就是读写数据的双向通道&#xff0c;可以从 channel 将数据读入 buffer&#xff0c;也可以…
阅读更多...
WPS如何共享文件和文件夹

WPS如何共享文件和文件夹

1 WPS共享单个文件 用WPS打开要分享的文件&#xff0c;点击右上角的“分享”键&#xff0c;选择上传到云端。 之后点击“创建并分享”&#xff0c;即可分享该文档。 2 WPS创建共享文件夹 2.1 如何共享文件夹 首先打开WPS&#xff0c;点击左上角的首页。在首页栏中&#…
阅读更多...
IDEA的LeetCode插件的设置

IDEA的LeetCode插件的设置

一、下载插件 选择点击File->Setting->Plugins&#xff1a;搜索LeetCode 二、打开这个插件 选择View —>Tool Windows—>leetcode 三、登陆自己的账号 关于下面几个参数的定义&#xff0c;官方给的是&#xff1a; Custom code template: 开启使用自定义模板&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023