Electron开发桌面App

Electron是可以开发跨平台桌面客户端的一套“集成框架”，所谓的“集成框架”也就是它将“Chromium”和“Node.js”很好的集成在了一起，并且很顺畅的一个负责界面，一个负责逻辑，大家井井有条。这是一个成本很低的解决方案，在快速交付上比之Native要快速了许多，大部分应用级别的应用，牺牲一部分性能而换取时间，这是有收益的。

官网：https://electronjs.org/

哪些场景使用Electron：

• 桌面软件（大部分情况下是离线状态），对于用户体验提升很大，如果你有网页，不妨包装一个桌面端

• 需要在电脑上完成大部分工作的场景

使用Electron有哪些好处：

最典型的一个说法：“这又为前端开发者谋得了一份好的差事”。

想起在网路里流传很广的一句话“不要和老夫说什么C++，Java，老夫行走江湖就一把JS，遇到需求撸起袖子就是干”。

是的Electron看上去是在蚕食桌面客户端领域的市场份额，你可以理解它的跨平台，但是在不同系统之间的一些差异，你还是需要进行一些额外的处理，这一部分的工作量已经少之又少（这都不是事儿）。可想而知，这个成本到底有多低。在开发的体验上，Electron由于基于"Chromium"和"Node.js"，所以几乎所有的Node.js模块都可以在Electron上运行，很方便你使用“npm”搭积木的方式快速交付一个产品。从这方面来说，你应该可以想到Electron的构建，打包也是基于Node.js。（这对于前端来说就很方便了）

该如何入门：

正常情况下需要你快速浏览一遍官方文档，理解一些Electron提出的概念（不怕，官方文档已经有简体中文）。

• 了解什么是“主进程”，什么是“渲染进程”

• 了解“渲染进程”和“主进程”之间是如何通信的

• 了解“渲染进程”负责什么，“主进程”又负责什么

当你对上述三个问题了解清楚之后，就可以快速的把文档上的API浏览一遍，有个印象就行，因为很可能大部分情况下，你只需要使用到几个API，创建窗口等，其余的都还是在开发Web网页。

• app 控制整个Electron生命周期

• BrowserWindow 创建和控制应用的窗口

• webContents 渲染和控制窗口内的内容

• openDevtools 打开调试面板

• ipcRenderer 用于渲染进程和主进程的通信

• Tag 可以载入外部页面的组件

基本上，了解上述六个方面的使用，就能搭建起来一个应用。

学会带着诉求去学习：

“人不是天生就能精通所有”

在学习的过程中，一定要带着自己的诉求去学习，现在Github上你可以搜索到很多关于Electron方面的Demo，这为入门提供了很好的学习环境。

第一步：https://github.com/electron/electron-quick-start从官方给的入门级别Demo开始，逐步了解到其中的一些思路。

一般来说，我们要学习的不是Web技术也不是Node.js，一定要学习的是，看看优秀的思路，架构，组织能力。看看别人是如何去构建应用，去驾驭代码。或者当你有特定的诉求时，也可以去看看别人的实现思路。只有通过学习，借鉴，才可能继续走下去。

进入开发：

整体上来说这个“开发”分为两个阶段，虽然在渲染进程中也可以使用Node.js的能力，但是正常情况下，渲染进程都只做和界面有关的事情。至于，绘制界面，你可以使用你熟悉的技术，React，Vue，jQuery都行。唯一，要注意的地方是，和界面无关的，一般都放在主进程中进行工作。在主进程中，有一个好处，就是在“发布”包时，主进程可以将日志输出出来，这也为调试定为问题提供了便利。其次，对于驾驭这个在组织结构上，也要合适，渲染进程只负责界面，主进程去负责逻辑，这才会减少可能遇见踩到的坑。

源地址：https://www.sohu.com/a/213756810_780612