最近两周在做一个给内部使用的桌面软件,使用的是 Electron,现在就这次使用 Electron 的经验,记录一下。
介绍
什么是 Electron ?简介说的很清楚:使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用,就是用前端技术来开发桌面软件。
可以在这里看到用 Electron 开发的应用,其中最知名的就是 VSCode 了。所以,已经有那么多公司在使用这项技术了,我们也可以放心使用。
quick start
如果想直接体验用前端技术开发桌面软件,可以按照官方的示例来学习。
如果要在正式项目中使用,可以安装 electron-forge,这是一个成熟的脚手架,集成了打包、发布功能,还可以选择模板(如React、Vue、Angular 等)作为渲染层框架。
建议在熟悉 Electron 技术后自己基于使用的框架调整为自己最舒服的架构。我在实际使用中,发现 React 模板没有安装 redux,以及不支持一些ES6语法,所以自己又基于 electron-forge 做了一套适合自己的模板: github.com/riskers/ele…
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 了。

