Electron入门

1,299 阅读2分钟
原文链接: github.com

最近两周在做一个给内部使用的桌面软件,使用的是 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 了。