一、Electron是什么？（/s/1mxZTafAqSNRV1MoaLUnr6w 提取码：iyny ）
Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。
二、Electron Fiddle 运行实例
Electron Fiddle 是由 Electron 开发并由其维护者支持的沙盒程序。 我们强烈建议将其作为一个学习工具来安装，以便在开发过程中对Electron的api进行实验或对特性进行原型化。
Fiddle 已经完美的集成到我们的帮助文档之中。 当你浏览我们教程中的例子，你会发现有个「Open In Electron Fiddle」按钮在代码示例中。 如果你已经安装了 Fiddle，「Open In Electron Fiddle」按钮会打开一个 fiddle.electronjs.org 链接并加载示例。 fiddle docs/latest/fiddles/quick-start
三、发展历史
2013年4月 Atom Shell 项目启动 。（Electron于2013年作为构建 Github上可编程的文本编辑器Atom的框架而被开发出来。）
2014年5月 Atom Shell 被开源 。
2015年4月 Atom Shell 被重命名为 Electron 。
2016年5月 Electron 发布了 v1.0.0 版本 。
2016年5月 Electron 构建的应用程序可上架 Mac App Store 。
2016年8月 Windows Store 支持 Electron 构建的应用程序
四、electron优缺点
优点：
原生的接口（菜单、消息提醒、系统托盘等）
上手难度低。能够使用react、vue等前端框架，能方便地迁移前端组件，构建出漂亮的桌面应用
方便热更新
调试和测试方便
Electron 开发文档齐全
缺点：
因为Electron捆绑了浏览器chromium内核和Node.js，所以它更倾向于创建大型应用，一个简单的Electron应用程序在没有压缩的情况下通常体积约120MB，不太适合开发轻量级的应用
相比c++开发的桌面应用，性能不如后者
每个窗口都是一个新的进程，占据大量内存
启动速度较慢
Electron允许用户通过开发者工具和ASAR源文件轻松访问源代码，不太安全
不支持手机端
五、环境搭建
Node 安装 （我的版本14.15.0）
项目初始化
npm init -y
// 安装Electron
npm i --save-dev electron
// 创建main.js 并在package.json中设置为入口
"main":"main.js"
// 创建index.html 用来书写页面内容
初始化代码
package.json
{
"name": "myElectron",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"start": "nodemon --watch main.js --exec npm run build",
"build": "electron ."
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"electron": "^24.4.0"
},
"dependencies": {
"@electron/remote": "^2.0.9"
}
}
六、测试流程记录
第一步、准备工作
克隆 vue3 Demo 项目到本地 环信 vue3-demo 源码地址
在编辑器内打开此项目并执行yarn install安装项目相关 npm 依赖。
在此项目目录下打开终端请敲下yarn add electron，从而在该项目中安装 electron。
安装一些依赖工具wait-on以及cross-env
wait-on 是一个 Node.js 包，它可以用于等待多个指定的资源（如 HTTP 资源、TCP 端口或文件）变得可用。它通常用于等待应用程序的依赖项准备好后再启动应用程序。例如，您可以使用 wait-on 等待数据库连接、消息队列和其他服务就绪后再启动您的应用程序。这样可以确保您的应用程序在尝试使用这些资源之前不会崩溃。
cross-env 是一个 npm 包，它的作用是在不同平台上设置环境变量。在不同操作系统中，设置环境变量的方式是不同的。例如，在 Windows 中使用命令 set NODE_ENV=production 设置环境变量，而在 Unix/Linux/Mac 上则需要使用 export NODE_ENV=production 命令。
第二步、项目目录增加 electron 文件
在项目增加 electron 文件时我们需要扩展一部分知识从而了解为什么创建创建这个目录，并在该目录下增加main.js文件的作用。当然如果觉得不需要可以直接略过。
主进程与渲染进程的概念
在 Electron 中，主进程和渲染进程是两个不同的概念。主进程是 Electron 应用程序的核心，它运行在一个 Node.js 实例中，并管理应用程序的生命周期、窗口创建和销毁、与底层操作系统进行交互等。主进程还可以通过 IPC（进程间通信）机制与渲染进程进行通信。
渲染进程则是应用程序的 UI 界面所在的进程。每个 Electron 窗口都有其自己的渲染进程。渲染进程是一个 Chromium 渲染引擎实例，它运行在一个仅包含 Web API 的环境中。渲染进程负责渲染 HTML、CSS 和 JavaScript，并处理来自用户的输入事件，同时通过 IPC 机制与主进程进行通信。
由于渲染进程只能访问 Web API 而不能直接访问 Node.js API，因此如果需要在渲染进程中使用 Node.js API，就需要通过 IPC 机制向主进程发出请求，由主进程代为执行并将结果返回给渲染进程。
有疑问加站长微信联系（非本文作者）
