河南省建设资格注册中心网站,wordpress公众号涨粉,免费域名注册和免费建站,付费资源下载站源码Electron中文文档 Electron是什么#xff1f;
Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。
Electron 允许开发者使用前端技术栈来创建可以在 Windows、macOS 和 Linux 等多个操作系统上运行的桌面应用程序。
Electron 本质上是一个运行在桌面操作… Electron中文文档 Electron是什么
Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。
Electron 允许开发者使用前端技术栈来创建可以在 Windows、macOS 和 Linux 等多个操作系统上运行的桌面应用程序。
Electron 本质上是一个运行在桌面操作系统上的运行时环境它将 Chromium一个开源的浏览器引擎和 Node.js一个基于 JavaScript 的服务器端运行时环境结合在一起。这使得开发者可以在应用程序中同时使用前端的 HTML、CSS 和 JavaScript 来构建用户界面以及使用 Node.js 的强大功能来进行文件系统操作、网络通信等后端任务。
注意 桌面应用程序是一种在个人计算机上运行的软件应用它直接安装在操作系统上为用户提供特定的功能和服务。
Electron主要组成部分
Chromium 引擎 支持最新特性的chrome浏览器提供了强大的渲染能力能够高效地显示网页内容和运行前端代码。它负责显示应用程序的用户界面包括 HTML 页面、CSS 样式和 JavaScript 交互。 Node.js JavaScript运行时环境允许开发者在应用程序中使用 Node.js 的 API 进行文件操作、网络请求、进程管理等后端任务。这使得应用程序可以与操作系统进行深度交互实现各种功能如读写文件、与服务器通信、管理系统资源等。 native API 提供统一的原生界面操作能力开发者可以通过 native API 直接与操作系统进行通信例如调出操作系统的系统通知等。
Electron 工作流程
Electron 的工作流程主要包括以下几个步骤
启动阶段 用户双击 Electron 应用程序的图标或通过其他方式启动应用程序。操作系统将启动应用程序的可执行文件这个可执行文件实际上是一个由 Electron 打包工具生成的启动脚本。启动脚本会加载 Electron 的主进程主进程通常是一个用 Node.js 编写的脚本文件。主进程负责管理应用程序的生命周期、窗口管理、与操作系统的交互等任务。 主进程初始化 在主进程中首先会加载必要的模块和库如 Node.js 的核心模块、Electron 的核心模块等。主进程会创建一个或多个浏览器窗口每个窗口对应一个独立的渲染进程。窗口的创建可以通过编程方式实现也可以使用预定义的窗口配置文件。主进程可以设置应用程序的菜单、快捷键、系统托盘图标等用户界面元素以及处理与操作系统的交互如文件拖拽、系统通知等。 渲染进程启动 当主进程创建一个浏览器窗口时会为每个窗口启动一个独立的渲染进程。渲染进程本质上是一个基于 Chromium 浏览器引擎的实例它负责渲染应用程序的用户界面。渲染进程会加载应用程序的 HTML、CSS 和 JavaScript 文件这些文件可以是本地文件也可以是通过网络加载的资源。渲染进程中的 JavaScript 代码可以使用前端开发技术如 React、Vue、Angular 等框架来构建用户界面和实现业务逻辑。渲染进程可以通过 Electron 提供的 IPCInter-Process Communication进程间通信机制与主进程进行通信发送和接收消息实现跨进程的数据共享和功能调用。 应用程序运行 用户与应用程序的交互主要发生在渲染进程中的用户界面上。例如用户点击按钮、输入文本、滚动页面等操作会触发渲染进程中的 JavaScript 事件处理函数。渲染进程中的 JavaScript 代码可以根据用户的操作执行相应的业务逻辑如数据处理、网络请求、状态更新等。如果需要与主进程进行交互例如访问文件系统、调用系统功能等可以通过 IPC 机制向主进程发送消息请求主进程执行相应的操作。主进程接收到渲染进程的请求后会根据请求的类型执行相应的操作并通过 IPC 机制将结果返回给渲染进程。渲染进程接收到结果后可以更新用户界面显示操作的结果。 关闭阶段 当用户关闭应用程序的窗口或通过其他方式退出应用程序时主进程会收到相应的事件通知。主进程可以执行一些清理工作如保存应用程序的状态、关闭打开的文件、释放资源等。主进程退出应用程序完全关闭。
流程模型
这里借用禹神在b站讲解中用到的图 Electron中存在不同的进程主要分为主进程、渲染进程。 主进程管理渲染进程主进程与渲染进程是可以通信的。
主进程 可以看做是 package.json 中 main 属性对应的文件一个应用只会有一个主进程只有主进程可以 进行GUI的API操作即调用native API。如果渲染进程想要调用native API渲染进程需要先和主进程建立通信最终还是由主进程进行调用再把结果传递给渲染进程。 渲染进程 Windows中展示的界面通过渲染进程表现一个应用可以有多个渲染进程
主进程可以通过调用 native API原生应用程序编程接口来实现与操作系统的底层交互以及执行特定的系统级任务。
Electron 的架构将主进程设计为负责管理应用程序的生命周期、与操作系统交互以及协调渲染进程。这种设计使得主进程可以直接调用 native API以实现一些需要底层系统访问的功能如创建窗口、管理系统托盘、处理文件对话框等。
调用 native API 的方式
使用 Node.js 的内置模块Node.js 提供了一些内置模块如fs文件系统、path路径处理、child_process子进程管理等这些模块可以直接调用操作系统的相关功能。例如使用fs模块可以进行文件的读写、创建目录、删除文件等操作。
const fs require(fs);
fs.writeFileSync(file.txt, Hello, world!);使用第三方模块除了 Node.js 的内置模块还有许多第三方模块可以提供更高级的 native API 访问。例如electron-native-notification模块可以在 Electron 应用程序中显示系统通知。
const Notification require(electron-native-notification);
new Notification(Title, { body: Message });直接调用系统库在某些情况下可以使用 Node.js 的ffiForeign Function Interface模块直接调用系统库中的函数。这需要对底层系统编程有一定的了解并且需要谨慎使用因为错误的调用可能会导致应用程序崩溃。
const ffi require(ffi);
const libc ffi.Library(libc, {printf: [int, [string]]
});
libc.printf(Hello from native API!);开发优势
快速开发和迭代 由于使用了前端技术栈开发者可以利用现有的前端开发工具和流程如包管理工具npm、yarn、代码编辑器Visual Studio Code、Sublime Text 等和开发框架React、Vue、Angular 等从而加快开发速度。同时前端技术的热加载和快速迭代特性也使得开发过程更加高效。 丰富的生态系统 Electron 受益于前端和 Node.js 的丰富生态系统开发者可以轻松地集成各种第三方库和工具以增强应用程序的功能。例如可以使用 Electron 与现有的后端服务进行集成或者使用前端的 UI 组件库来快速构建漂亮的用户界面。 易于部署 Electron 应用程序可以像普通的桌面软件一样进行打包和分发开发者可以使用 Electron 的打包工具将应用程序打包成可执行文件或者发布到应用商店中以便用户轻松安装和使用。
应用场景
桌面版的 Web 应用 如果已经有一个成熟的 Web 应用并且希望将其转换为桌面应用Electron 是一个理想的选择。可以将 Web 应用的代码直接嵌入到 Electron 中稍加修改即可在桌面环境中运行同时还可以利用桌面环境的特性如系统通知、文件拖放等。 生产力工具 开发各种生产力工具如文本编辑器、图像处理器、代码编辑器等。Electron 的强大功能和灵活性使得开发者可以快速构建功能丰富的工具满足用户的各种需求。 跨平台桌面应用 对于需要在多个操作系统上运行的应用程序Electron 提供了一种高效的解决方案。开发者可以编写一次代码然后在不同的平台上进行测试和部署大大降低了开发和维护成本。
