读心悦

ipcMain.on同步性异步同步（以Promise形式）响应方式使用或发送响应直接返回Promise结果应用场景处理渲染进程发送的异步消息处理渲染进程发送的同步消息请求，并期望立即获取处理结果通过了解这些区别，开发者可以根据实际的应用场景和需求选择合适的方法来实现进程间的通信。

是 Electron 框架中用于在渲染器进程（通常是 Web 页面）和主进程之间安全地暴露 API 的一种方式。它允许开发者在保持主进程和渲染器进程之间清晰分离的同时，从主进程向渲染器进程安全地传递方法和属性。这是通过创建一个单向的、只能从主进程到渲染器进程的桥接来实现的，从而避免了渲染器进程直接访问 Node.js 的 API，这有助于防止潜在的安全问题。

Electron 的模块是 Electron 框架中用于捕获桌面屏幕和窗口内容的一个重要工具。这个模块允许开发者在应用程序中实现屏幕共享、屏幕录制等功能。以下是对。

Electron 的模块用于帮助开发者收集并报告应用程序崩溃的信息。这对于识别和解决在发布后的应用中可能出现的问题非常有用。Electron 的是基于 Chromium 的崩溃报告系统构建的，允许开发者收集崩溃日志，并将它们发送到自己的服务器，或者发送到 Electron 的崩溃报告服务（如果开发者选择这样做的话，尽管这通常不是首选，因为隐私和安全性的考虑）。

在Electron中，clipboard模块提供了用于操作系统剪贴板的方法，允许你以编程方式读取和写入剪贴板中的数据。以下是如何在Electron中使用clipboard。

在 Electron 应用中，是一个用于收集和查看浏览器跟踪信息的模块。这主要用于性能分析和调试。它允许你记录 Chrome 浏览器（Electron 底层使用的）中发生的各种事件，如页面加载、渲染等。下面是如何在 Electron 的主进程中配置和使用的基本步骤。

你可以通过向构造函数传递一个options对象来自定义窗口的多个方面，如窗口大小、位置、图标、是否显示菜单栏等。frame: false, // 创建一个无边框窗口transparent: true, // 允许窗口透明// ... 其他选项});

在 Electron 中创建和管理窗口是一个相对直接的过程，主要通过类实现。以下是一些关键步骤和最佳实践，用于在 Electron 应用中创建和管理窗口。

Electron 在 MAC 上的 build 签名应用配置涉及多个步骤，包括准备开发者账号、生成证书和配置文件、配置环境变量以及使用适当的工具进行签名和公证。

在使用 Electron 结合 Nginx 进行自动更新时，主要涉及到几个关键步骤：构建 Electron 应用、配置 Nginx 以托管更新包、以及 Electron 应用内部实现更新逻辑。下面将详细介绍这些步骤。

这个方法通常用于桌面应用程序中，特别是在使用 Electron 框架开发的跨平台桌面应用中。这个方法的主要作用是手动触发应用程序的更新检查过程。当开发者希望用户能够立即检查是否有新的软件版本可用，而不是等待自动更新机制（如果有的话）按照设定的时间间隔去检查时，就会用到这个方法。

在 Electron 应用中，由于 Electron 并没有内置的“页签”系统（像浏览器那样），所以“在当前窗口打开新的页签”这一说法实际上需要一些创造性的解决方案。通常，Electron 应用会使用单个实例来加载主页面，并通过某种方式（如标签页控件、导航菜单等）来模拟页签的行为。

open-file事件是 Electron 应用程序中一个非常有用的事件，它允许开发者在应用程序已经运行的情况下处理文件打开请求。通过监听这个事件，你可以实现自定义的文件打开逻辑，从而提升用户体验。

从主进程向渲染进程发送消息。：在主进程中，用于回复来自渲染进程的特定消息。它是对特定ipcMain事件的回复，确保消息被发送回正确的渲染进程。

在Electron中遇到关于Content Security Policy（CSP）的安全警告，通常是因为渲染进程没有正确设置或根本没有设置CSP。CSP是一种安全功能，它可以帮助减少跨站脚本（XSS）等攻击的风险，通过指定哪些动态资源是允许加载的。

在Electron框架中，activate事件是类的一个相关事件，但它更多地与app模块（代表Electron应用本身）的生命周期相关联，而不是直接与实例的生命周期相关。activate事件在Electron应用被激活时触发，即当应用从一个非激活状态变为激活状态时。

在Electron中，主进程（main process）和渲染进程（renderer process）之间的通信是非常重要的，因为Electron应用通常会将用户界面（由Web技术如HTML, CSS, 和JavaScript构建）和原生功能（如系统对话框、文件I/O等）分开处理。主进程管理应用的生命周期和创建渲染进程，而渲染进程则负责展示应用的界面。

Electron应用的生命周期涵盖了从应用启动到关闭的各个阶段，以及在这些阶段中发生的一系列事件。了解这些生命周期事件对于开发Electron应用至关重要，因为它们允许开发者在应用的不同阶段执行特定的操作，如创建窗口、处理文件打开请求、执行清理工作等。

在Electron应用中，处理窗口关闭并使其最小化到Mac系统的程序坞（Dock）而不是完全退出应用，通常涉及到监听窗口的关闭事件（close事件）并在适当时机阻止其默认行为。

如果你需要更复杂的安装逻辑，比如在安装过程中运行特定脚本、修改注册表项或检查系统条件，你可以编写一个自定义的NSIS脚本（如），并在中通过include字段引用它。自定义NSIS脚本通常使用NSIS脚本语言编写，该语言提供了丰富的函数和宏来定义安装过程的各个方面。例如，你可以使用函数来创建快捷方式，使用来写入注册表项，或者使用File指令来复制文件到安装目录。

在Electron中配置macOS平台的安装图标，你需要遵循macOS对应用程序图标的要求，并确保在Electron项目的打包过程中正确引用这些图标。

综上所述，Electron 采用多进程架构主要是出于安全性、稳定性、性能和可扩展性等方面的考虑。这种架构方式使得 Electron 应用程序能够更加健壮、高效地运行在各种平台上。

在 Electron 应用中，预加载脚本（Preload Script）是一个非常重要的概念，它允许你在渲染进程（web 页面）和主进程之间创建一个安全的桥梁。预加载脚本运行在 Node.js 环境中，但位于渲染进程的一个单独的上下文中，这意味着它可以访问 Node.js 的 API，但无法直接访问 DOM。这种设计使得预加载脚本成为控制渲染进程可以访问哪些 Node.js 功能的关键机制，有助于增强应用的安全性。

是一个用于 Electron 应用程序打包和发布的工具，它支持 macOS、Windows 和 Linux 平台。以下是一个清晰且详细的配置指南，包括分点表示和归纳，并参考了相关文章中的信息。

是一个流行的 Electron 应用程序更新解决方案，它允许你的 Electron 应用自动检查、下载并安装新版本。以下是如何配置。

你可以使用 Vite 的开发服务器来启动你的 React 应用，并在 Electron 中加载它。但是，请注意，由于 Electron 使用了 Node.js 的环境，你可能需要一些额外的步骤来确保 Vite 的开发服务器和 Electron 可以正常工作。当你的应用开发完成后，你可以使用 Vite 构建生产版本，并使用 Electron 打包工具（如 electron-builder 或 electron-packager）来打包你的应用。这些组件将构成你的 Electron 应用的用户界面。

在MAC上创建Electron应用打包的时候报错：app-builder_arm64 process failed ERR_ELECTRON_BUILDER_CANNOT_EXECUTE。原因是本地缓存中没有打包需要的依赖包，比如electron-v25.9.8-darwin-arm64.zip，所以打包的时候，会自动去下载对应的依赖包。之所以报错，是因为远程下载的时候，会有很多原因导致下载终端，比如网络原因等。所以我们只能手动下载依赖包，然后放到缓存文件夹中。

主要技术栈是VUE3、Electron和Nodejs，VUE3做页面交互，Electron提供一个可执行Nodejs的环境以及支撑整个应用的环境，nodeJS负责读取文件内容。环境配置、安装依赖这些步骤就不再叙述了。

Electron 是在主进程中控制生命周期，在不同的生命周期事件中，执行不同的逻辑。Electron 主进程有一个对象 app，对象上有个属性 on ，是一个函数，接收两个参数，第一个参数是我们要监听的事件名称，第二个参数是回调函数。

这里我们使用的是 ipcMain.on 和 ipcRenderer.send。除了这两种方式，Electron 还提供了ipcMain.handle 和 ipcRenderer.invoke 方法。不同的是 ipcMain.handle 和 ipcRenderer.invoke 方法是异步调用的风格，可以根据自己的规范选择合适的 API。上一篇讲述了主进程和渲染进程之间的通信，其中是通过调用 ipcMain 和 ipcRenderer 来完成的。

注意：如果是Typescrip环境的话，有可能会报错提示window上不存在electron，那就需要把这些API挂在到window对象上就可以。在开发Electron应用的时候，从安全的角度来考虑，尽量不要在渲染进程中，直接调用ElectronAPI，因此我们需要预加载JS脚本，在这个脚本中，把我们用到的API暴露出去。之前写过篇主进程和渲染进程之间的通信，这里主要是记录一下VUE版本的应用，主进程和渲染进程之间的通信。思路是一样，唯一不同的是代码。这就是在VUE组件中，主进程和渲染进程之间的通信。

作为一个开发者，我们总是希望，执行构建命令后，可以快速打包或者启动本地应用，且通过更少的配置，来完成开发体验。1、在应用的根目录创建electron-main和electron-preload目录，其中electron-main是存放主进程的文件，比如：index.ts；2、下载安装electron、已经electron相关的依赖，比如electron-builder。因此我体验一下vite、vue3和Electron的组合，看看能够带来什么样的体验。现在的vite已经得到广泛的应用。

我们知道，使用BrowserWindow来创建一个新的窗口，那么如果想在窗口中战胜斯更多的web内容，比如嵌入其他网站的内容，那就使用BrowserView了。horizontal： boolean (可选) - 如果为 true，视图的x轴和宽度将随着窗口的大小变化等比例缩放。vertical：boolean(可选) - 如果 true，视图的y位置和高度将增长 和收缩比例与窗口。3. setAutoResize，设置视图自适应大小的，比如我们点击窗口的最大化时候，视图的尺寸能够和窗口的大小自动变化。

如果有这样的感觉，那是因为使用create-react-app手脚架，是已经通过webpack做好了配置，我们直接创建项目。preload是渲染进程预加载的文件，将一些ElectronAPI暴露到渲染进程中，在渲染进程中就可以直接调用。preload就是渲染进程和主进程之间的一个桥段，它建立对应的信息通道，并且转发渲染进程的发送的消息，在主进程中，监听对应的消息通道，接收对应的消息，来触发完成一些需要在主进程完成的逻辑。Renderer：是页面的组件的代码，这里就是React应用的相关组件。

所设置的菜单对象的label属性，表示是显示的文本，可以通过设置click属性，给对应的菜单添加点击事件。如果使用这样的方法子Electron应用内创建右键菜单，这些菜单只能显示在窗口页面内部，不能悬浮在窗口之上，那么就会导致右键显示的菜单，可能只显示一部分，出现滚动条。这样当我们在页面上点击鼠标右键的时候，就会触发window上的oncontextmenu事件，同时获取到鼠标的位置，然后在该位置上显示对应的菜单。我们在创建窗口的时候，设置frame为false，就是隐藏默认的标题栏和菜单。

还有一个方法showOpenDialogSync，只是在打开对话框的时候是同步，如果用户一直没有选择文件，那么JavaScript执行线程一直处于阻塞状态，一般情况下是不会推荐使用这个方法的。一个桌面应用中，会有很多的交互涉及到系统API，比如显示系统通知、在系统托盘区域显示一个图标、通过“打开文件对话框”打开系统内的文件或者是保存数据到系统磁盘上。这里只设置可以打开的文件类型是图片和视频，最后我们可以拿到所打开文件的路径，就看看具体的需求是否需要文件的路径了。

当我们设置frame为false的时候，窗口的边框和标题栏消失了，只展示内容区域，我们不能移动窗口、最大化、最小化和关闭窗口。现在需要做的是封装自己的标题栏，这里我把它封装为一个React组件。。import {import {import {主要是设置路由类型，选择的是浏览器路由。

如果想要在渲染进程中创建窗口、创建菜单这些操作，则可以让渲染进程个主进程发送消息，由主进程来完成对应的操作；另外在渲染进程中，也可以通过渲染进程的remote模块来完成响应的操作。Electron应用只有一个主进程，可以有多个渲染进程，一个BrowserWindow实例表示一个渲染进程，在BrowserWindow实例销毁后，渲染进程也就结束了。之前我们创建的引用中，electron.js中的代码，就是运行在Electron的主进程中，主进程负责创建主窗口并且加载UI，也就是index.html。

但是这样在执行npm run package打包的时候，提示找不到public/electron.js。那就在public目录下创建electron.js，代码和main.js一样，因为编译的时候public的文件是被复制到build目录下的，设置public/electron.js为Electron的指定入口。这时候我们成功创建了一个react应用，然后切换到electron-cra目录下，然后执行npm start，先运行react应用，这个仅仅是为了体验一下自己创建的react应用。

在安装Electron的时候，因为访问的是国外的IP，所以很容安装失败，需要设置访问国内的Electron镜像：yarn config set ELECTRON_MIRROR http://cdn.npm.taobao.org/dist/electron/安装ELectron：yarn add electron --dev --platform=win64在package.json文件中设置：{ "name": "electron", "version": "1.0.0", "main":