Electron入门体验（内附react脚手架）

riskers commented 6 years ago

最近两周在做一个给内部使用的桌面软件，使用的是 Electron，现在就这次使用 Electron 的经验，记录一下。

介绍

什么是 Electron ？简介说的很清楚：使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用，就是用前端技术来开发桌面软件。

可以在这里看到用 Electron 开发的应用，其中最知名的就是 VSCode 了。所以，已经有那么多公司在使用这项技术了，我们也可以放心使用。

quick start

如果想直接体验用前端技术开发桌面软件，可以按照官方的示例来学习。

如果要在正式项目中使用，可以安装 electron-forge，这是一个成熟的脚手架，集成了打包、发布功能，还可以选择模板（如React、Vue、Angular 等）作为渲染层框架。

建议在熟悉 Electron 技术后自己基于使用的框架调整为自己最舒服的架构。我在实际使用中，发现 React 模板没有安装 redux，以及不支持一些ES6语法，所以自己又基于 electron-forge 做了一套适合自己的模板: https://github.com/riskers/electron-react-boilerplate。

Electron 入门

目前，我对 Electron 的理解是：

electron = chromium + Nodejs + Native api

其中：

chromium 内核渲染界面，这一部分可以理解为浏览器，是前端最熟悉的 HTML、CSS、JS
Nodejs 被封装起来，代表可以直接使用原生 Node api 以及海量的 npm 包
Native api 则是 Electron 给我们把 windows、macos 甚至是 Linux 的api（比如本机联网状态、通知、菜单等）差异抹平，让我们更方便调用。

只要你是前端，并且看懂Electron 应用结构，就已经入门了。

Electron 分为主进程和渲染进程，这点很像 Chrome 插件的开发，渲染进程只是一个界面，但是有一个主进程常驻在程序中。

electron文档汉化做得很好，其实已经不用多说什么了。作为前端，chromium 渲染层和 Nodejs 是我们最熟悉的，剩下的就是根据需要去查怎么调 Native API 了。

2018.09.21 updated

Electron 通信

最近对 Electron 有了更新的认识，Electron 在通信上有两种方案:

ipcMain / ipcRender
webContents / remote

Electron 存在主进程和渲染进程，是前端们之前从来没有处理过的，需要好好研究。

向我捐助 | 关于我 | 工作机会

izee commented 6 years ago

这相当于PC端的cordova?

riskers commented 6 years ago

@izee 简单理解就是能用前端技术开发桌面软件。

riskers / blog