Electron是什么及它的优势 （摘自网络） Electron简介 Electron 是是 GitHub 开发的一个开源框架。它允许使用 Node.js（作为后端）和 Chromium（作为前端）完成桌面 GUI 应用程序的开发。
Electron 可以用于构建具有 html、css、JAVAScript 的跨平台桌面应用程序，它通过将 Chromium 和 node.js 合同一个运行的环境中来实现这一点，应用程序可以打包到 mac、windows 和 linux 系统
Electron为前端技术人员利用web前端技术开发桌面应用带来了可能，开发人员可利用已经掌握的前端技术如Html、CSS、JavaScript，以及结合一些前端技术框架：Vue、Angular、React、webpack，加之浏览器渲染引擎、Electron封装的系统API快速实现一款桌面应用的开发，Electron做了大部分复杂的工作，开发人员只需要专注在核心业务和前端技术本身。同时，通过一定的优化，Electron可以做到很好的体验。
支持平台 目前支持 Electron 的平台有 OS X、Windows、Linux：
OS X：对于 OS X 系统仅有 64 位的二进制文档，支持的最低版本是 OS X 10.8。 Windows：仅支持 Windows 7 及其以后的版本，之前的版本中是不能工作的。对于 Windows 提供 x86 和 amd64 (x64) 版本的二进制文件。需要注意的是 ARM 版本的 Windows 目前尚不支持。 Linux：预编译的 ia32(i686) 和 x64(amd64) 版本 Electron 二进制文件都是在 Ubuntu 12.04 下编译的，arm 版的二进制文件是在 ARM v7（硬浮点 ABI 与 Debian Wheezy 版本的 NEON）下完成的。预编译二进制文件是否能够运行，取决于其中是否包括了编译平台链接的库，所以只有 Ubuntu 12.04 可以保证正常工作，但是 Ubuntu 12.04+ 、Fedora 21、Debian 8 等平台也被证实可以运行 Electron 的预编译版。 Electron的优缺点 Electron 的优点如下所示：
部署升级方便，用户可以通过浏览器就可以访问。 HTML/JS/CSS 编写，方便且高效。 可支持 Windows、Linux 、Mac系统。 可让js 前端的生态融入进来 ，让开发员有大量的模块和资源可用（类似python第三方库、 vscode插件）Electron 的缺点如下所示：
对于开发者而言：浏览器适配比较繁琐。有些应用必须指定浏览器版本（比如 OCX 必须是 IE 内核， H5 必须是较高版本），必须打开浏览器，输入一长串 URL 地址。 打包体积大：一个小应用打包下来可能就需要几十兆，不过目前磁盘存储已经不是什么大问题，随着网路环境越来越好，磁盘容积也越来越大，这个问题给用户带来的负担越来越不明显，几乎可以忽略。 占用内存较在：一般50M起步，多数要100-400M,新版不知道有否优化。毕竟开的是浏览器，有点重。 性能有延迟：在100多ms以上，没有Winform 那么快。 开发有一定复杂度：除需要掌握必要的前端知识外，基于Electron开发仍需要了解跨进程通信的一些知识点，进程上的一些问题往往还是容易给开发者带来一定的困惑，有一定的学习成本，但是通过系统学习还是容易攻克的。 版本更新快：它是基于Chromium的，所以Electron跟随Chromium的版本发布节奏，版本迭代较快，这可能会导致一些兼容问题，但幸运的是目前Electron的核心功能一直都算是很稳定的。 安全问题：Electron提供给了开发人员足够的便利，同时也有一些具有风险的开关，开发者需要在开发中妥善处理，避免对应用客户带来安全隐患，开发人员需要关注安全问题。 对于传统C/S桌面客户端开发者：对 web 应用不习惯，尤其是使用专业c# Delphi 软件，大多数会觉得 web 应用没有桌面应用方便或强大。 Electron开发桌面程序需要的前端技术 Electron是基于Chromium和Node.js实现的，所以开发人员所需要使用到的前端技术主要包括以下方面：
1、Html、CSS、JavaScript、ES6
2、前端开发工具Vue、Angular、React等的一种
3、其他网络、缓存、通讯、系统、跟踪等前端技术
4、对Vscode编辑器的熟悉
基于Electron实现的软件 Electron 现已被多个开源应用软件所使用，其中被广大所熟知和使用的 Atom 、MongoDB桌面版管理工具、Skype桌面版、WhatsApp桌面版、HTTP网络测试工具Postman 、接口管理软件ApiFox 、WhatsAp、Teams、支付宝小程序IDE、 开发人员熟知的Visual Studio Code编辑器就是基于 Electron 实现的。案例将来还会更多。
一、搭Electron 1、使用克隆库来搭建 1）安装git
要先安装git ,安装git, 在任何目录右键 就有相关的命令 文件资源管理器 直接 敲 cmd 随时在当前目录下克隆来创建项目
2）克隆项目
然后git clone https://github.com/electron/electron-quick-start
3）安装依赖
克隆后再：cd electron-quick-start
安装依赖并运行（主要是针对package.json 里面的 DevDependencies 这段里面的依赖配置） npm install && npm start 或者 直接 cnpm i (一定要先进入到项目目录，是针对当前文件夹来的） 也可直接下载 Download Zip源码包下来再解压到你指定的文件夹下面
4）运行项目
运行：在package.json 里 Scripts 段里有 一个 start 它模拟 "electron ." 来运行 相当于把 "electron ." 封装成 start 这个命令了。 所以可以 通过： npm start /cnpm start来运行 （npm 是node.js里的）
可看到控制台里 显示 实际执行的是 electron . node_modules :各种依赖库模块 Ct+C 结束运行 Preload.js 是在main.js 讲程创建window时加载的 写在webPreferences 里 监听了DOMContentLoaded事件 使用replacetext来替换 index.html 按指定ID找到几个版本文本 renderer.js 渲染进程 （与index.html 一起组成渲染进程 index.html 引用了
2、使用electron-forge(锻造) 脚手架来搭建 项目 1) npx是node.js 新版 支持的命令
npx create-electron-app my-new-app (推荐用这个) 或 yarn create-electron-app my-new-app
npx相当于多步传统的方式 npm install -g @electron-forge/cli (安装脚手架） 或 cnpm安装 electron-forge init my-new-app cd my-new-app npm start
但npx使用的是npm 可能下载慢或下载不了，可考虑使用cnpm npx运行时控制台可看到简洁的安装过程，最后一步是安装相关的依赖
2）使用Vscode打开项目
项目下载或克隆后，使用Vscode编辑器来打开 生成以下文件会放在src目录下： index.js 主进程 index.html 渲染进程 index.css index.html用到的css
3）运行项目
打开package.json 在scripts节中可看到 "start" : "electron-forge start", 所以你可以使用npm start 来运行 同理，可使用 npm make 来生成exe文件
4）关闭DevTools
运行可看到打开了调试工具 这个是在index.js 主进程的 createWindow 最后使用了一句 mainWindow.webContents.openDevTools();
5）渲染进程重载网页
改完index.html 或index.css后，可以不中止，直接在view-reload 重新加载网页
3、手工写代码来搭建Electron项目，更好理解代码 1）手工创建新项目
先创建项目目录，不能有空格，不能有中文 在vscode 打开这个目录
2）新建3个文件 index.html index.css index.js
在index.html文件中，输入html:5 可产生一个基本的html框架 或 !+Tab键 也可以（必须是html文件中，js文件中不行） 输入div或html+tab (不用 也可) 再新建main.js 右键 在文件资源管理器打开，再在上面输入cmd 就会自动到达这个目录的命令行 输入 npm init --yes 回车，它就会在当前目录下生成 package.json文件 它会自动找main.js 入口，并配置好入口
也可手工再编辑修改package.json的内容
3）在当前项目安装一下Electron（开发环境）
虽然我们全局已安装了electron ,但输入 electron. 没有代码自动补齐或提示 需要在Vscode 再用cnpm i electron --save-dev 再安装一次, 把它写到package.json中的devDependencies中 依赖里 这样再敲 electron. 代码就会自动提示了 所以建议在项目里面安装一次这个模块
4）Require electron
再引用 const {app,BroserWindow}=require("electron")
5）app添加监听ready事件
再监听应用的 启动事件。需要 事件名 及回调函数
app.on("ready", () => {
const mainWindows = new BrowserWindows({
width: 600,
height: 400
})
mainWindow.loadFile(path.join(dirname,'index.html')); //path.join dirname 都是node.js的
electron可直接引用node.js里面的东西
在前面要先引用 const path=require('path'); //mainWindow.loadUrl('https://github.com'); }
二、开发工具中配置Eslint (js代码检测工具） 1、安装Eslint 插件 ESLint（有时发音为Easy Lint）是一种静态代码分析工具，用于识别JavaScript代码中发现的有问题的模式,可配置
安装此插件后，代码敲错，会有提示 安装：cnpm install -g eslint （全局安装不需要注重目录）
2、项目中配置Eslint插件 cd 到项目的目录 终端下运行：eslint --init 1）选择3种方式，只查找问题，.... ，第3种可强制修改你的格式 （也可右键格式化你的代码 shift+alt+f） 2）再问你是在 javascript modules(import/export) 还是 CommonJS(require/exports) 使用 ，选择这个 （node.js使用是require)
3)再问你是在 React Vue.js None of these (选择这个）
4)然后问你是否使用TypeScript, 选择No
会生成一个 .eslintrc.js 配置文件 （其实就是我们刚才选择的配置）
再回到刚才 错误代码，就有提示了 就是你虽然全局安装了，但需要用eslint --init 在当前项目中使用（其实就是生成一个.eslintrc.js配置文件）
5)使用node 来运行 js文件 随便创建一个文件，内容为 console.log(process.platform) 在终端输入 ：node test.js 就可运行 得到是 win32 (windows平台）
三、electron的运行流程 运行electron项目是执行命令：electron .
1、它先找项目中的package.json中的入口 找到 "main": "main.js", 加载这个主进程 它实例化 BrowserWindow ，也就创建了一个渲染进程 它再加载本地的index.html 文件 （html css ) 展示给用户这个应用的页面 再使用IPC 去完成任务 并从主进程得到信息
2、主进程与渲染进程 一个electron应用只有一个主进程，但可以有多个渲染进程，每个Electron中的web页面运行在它自己的渲染进程里
3、进程与线程的区别 进程(Process) ：是计算机中的程序关于某数据集合上的一次运行活动，是系统进行资源分配和调试的基本单位 ，是操作系统结构的基础 线程(Thread）： 在一一个程序里的一个执行路线就叫做线程（thread), 更准确的定义是：线程是”一个进程内部的控制序列“ 线程和进程 ：一个程序至少有一个进程，一个进程至少有一个线程
4、可在new BrowserWindow 时增加属性 parent: 设置窗体的父窗体
5、在主进程和渲染进程里修改内容怎么刷新 在主进程里修改东西，必须重新运行 electron .
在渲染进程里改东西，可以使用网页-View-Force Reload 来刷新
6、如何在主进程和渲染进程中使用nodejs模块及NodeJs第三方模块 主进程中无需任何配置就可使用Nodejs模块
const fs=require("fs") 主进程打印console.log 需要在终端里看，而不是在浏览器时里的开发工具里的console里看 （DevTools)
渲染进程： 第一种方法: preload 加载的可直接使用 在 new BrowserWindow(查看官网它的详细参数） 时 使用 webPreferences:{ preload:path.join(__dirname,"renderer/preload.js") BrowserWindow通过preload.js 可直接使用nodejs模块
第二种方法：不在preload加载的 如果要在index.html 引用Nodejs的模块 如 index.html里加了
}
7、加个按钮来显示调用文件的内容 1、在index.html 增加个按钮
2、再定义 //将来最好改成textArea ，代码显示更美观一些
3、再为 div 增加个样式
4、在renderer.js中要监听按钮单击事件
window.onload = () => {
contentDom = document.querySelector('#openFile')
openFileDom = document.querySelector('#content')
openFileDom.onclick = () => {
alert('test')
const fs = require('fso')
fs.readFile('package.json', (err, data) => {
if (err) {
console.log(err)
return
}
console.log(data.toString())
contentDom.innerHTML = data.toString()
})
}
}
四、调用h5里的拖放Api 及Nodejs实现文件拖放 1、在窗体的 onload 设置 ondragenter ondrop等事件 window.onload = () => {
var contentDom = document.querySelector('#content')
// =function() 可改成箭头函数 =()=>
//阻止这些事件的默认行为
contentDom.ondragenter = contentDom.ondragover = contentDom.ondragleave = () => {
return false
}
contentDom.ondrop=(e)=>{
// console.log(e)
console.log(e.dataTransfer.files[0].path)
}
}
2、electron 进程图 （摘自 kevin5979） 主进程 什么是electron主进程? electron 运行 package.json的 main脚本的进程被称作主进程 electron主进程的相关/作用 每个electron只有一个主进程 用于管理原生GUI， 典型的窗口（BrowserWindow、Tray、Dock、Menu） 主进程用于创建渲染进程 主进程控制应用的生命周期 简单的说，electron项目的主进程只有一个, 主进程的执行代码需要写到main.js中, 起到统筹全局的作用
渲染进程 什么是electron渲染进程? electron 展示web页面的进程被称作主进程 electron主进程的相关/作用 通过Node.js、Electron提供的API与系统底层打交道 一个electron可以有多个渲染进程 主进程 API app ：控制应用的事件生命周期 autoUpdater ：自动更新 BrowserView ：创建和控制视图 BrowserWindow ：创建和控制窗口 contentTracing ：跟踪并确定性能问题 dialog ：创建和控制本机系统对话框 globalShortcut ：监听系统快捷键 inAppPurchase ：（MAC专用）Mac App Store 的应用内购买 ipcMain ：从主模块到渲染模块（ipcRenderer）的异步通信 Menu ：创建远程应用以及上下文菜单 MenuItem ：在菜单中添加菜单项 net ：发出 HTTP或 HTTPS请求 netLog ：记录网络事件 Notification ：创建桌面通知 powerMonitor ：监视电源状态 powerSaveBlocker ：组织系统自动进入省电模式 protocol ：注册自定义协议并拦截基于协议的请求 screen ：检索有关屏幕大小、显示器、光标位置等的信息 session ：管理浏览器会话、 cookie 、缓存、代理设置等 systemPreferences ：获取系统配置信息 TouchBar ：（MAC专用）配置 TouchBar布局 Tray ：添加图标和上下文菜单到系统通知区 webContents ：渲染以及控制 web页面 渲染进程 API ipcRenderer ：从渲染器进程到主进程的异步通信 remote ：在渲染进程中使用主进程模块 webFrame ：自定义渲染当前网页 desktopCapturer ：通过 [navigator.mediaDevices.getUserMedia] API ，可以访问那些用于从桌面上捕获音频和视频的媒体源信息 通用 API clipboard ：在系统剪贴板上执行复制和粘贴操作 crashReporter ：将崩溃日志提交给远程服务器 nativeImage ：使用 PNG或 JPG 文件创建托盘、 dock和应用程序图标 shell ：使用默认应用程序管理文件和 url 3、主进程、渲染进程可用模块 及2个进程中都可使用模块 进程关系图
有些功能可以使用nodejs模块 或h5 api 来实现
但像 菜单 托盘等这些就只能是通过electron api(或模块）来实现
五、技巧及相关术语 1、分享源码不需要复制node_modules目录
对方收到源码用vscode打开后，只需要写 cnpm i 就可以更新相关依赖，因为所有依赖都保存在package.json文件中
2、IPC（Inter-Process Communication，进程间通信）
如果您也是前端及Electron爱好者, 也可收藏 点赞及关注我们 @小辣椒高效Office 一起交流学习
相关内容
