“如果你可以建一个网站,就可以建一个桌面应用程序”

你是否曾受限于浏览器的沙盒限制,或者再操作网页应用时无法满足下列场景下的使用需求,譬如读写本地文件、调用更多系统资源等。

因此,你想自行开发一个可以跨平台的调动资源的程序,但是又担心要学习新的语言,时间来不及,开发预算不足。

面对上述困扰,相信许多前端小伙伴脑中就会反应出一个应用程序——Electron。Electron的官网上说:

Electron是一个使用JavaScript、HTML 和 CSS构建,支持 Web 技术的跨平台开发桌面应用程序( GUI ),其本身是基于 C 开发的,GUI 核心来自于 Chrome,而 JavaScript 引擎使用 V8。

01

Electron诞生

回顾这项技术的诞生历程,堪称有趣。

时间回到2011年,一个叫王文睿的程序员与同事在讨论如何为Tizen WebRuntime增加扩展API的时候,创建了Node-Webkit项目,并打算用Node.js来操作WebKit。幸运的是,这样的尝试得到了单位的大力支持,当时王文睿就职的公司内部有个鼓励创新计划,这不仅给王文睿足够的时间,同时还分配了招聘名额,让他找到协助完善这个项目的同行人。

彼时,另外一位年轻人赵成进入了这个团队,并在实习的半年多时间里开发了跨平台的UI库功能,以及Node-Webkit进行了一系列的修改与完善。

后来,赵成离开了,但是探索的脚步并未停止。之后,赵成帮助github团队尝试把Node-Webki应用到Atom编辑器上。不过因项目稳定性等原因,最终这个尝试以失败告终。直至2013年,GitHub与赵成启动了一个类似Node-Webkit的项目:Atom Shell。不久后,基于Atom 的框架,Electron被开发出来。2014年,这两个项目正式开源。(此处背景源自网络公开资料)

时至今日,Electron被Atom编辑器和许多其他应用程序使用,并且兼容Mac、Windows 和 Linux,可以构建出三个平台的应用程序。其中,这两年爆火的飞书就是基于这个技术开发而来,另外,VS Code、Slack等应用也是基于这个技术开发。

02

推荐一个GVP项目

初步了解这项技术的魅力及应用历程之后,今天,勤奋好学的马建仓就给大家推荐一款以Electron为核心的入门简单、功能丰富的 js 跨平台桌面软件开发框架——electron-egg

项目概述

  • 项目简介:

1. 这是一套代码,可以打包成Windows版、Mac版、Linux版或者以web网站运行,你只需要学习js语言即可,不过也同时支持Vue、React、EJS等前端技术。

2. 从理论上来说,electron-egg支持任何前端技术,能够编写出精美的UI效果。

3. 同时,该项目也可以用服务端的开发思维,来编写桌面软件,更重要的是还能同时启动多个工作进程。

操作准备

正式操作之前,你需要了解以下三个知识

  • 进程:框架有三种进程,即electron主进程、electron渲染进程及egg服务进程。
  • 业务调用,需要了解从前端-> egg业务、前端->electron业务等,并自由组合使用
  • 掌握的开发语言:javascript、Node.js

使用流程

向上滑动阅览

1.选择开发模式:打开配置文件:electron-egg/electron/config.js。

2. 启动:

(1) vue模式【默认】;

(2) react模式,同vue;

(3) ejs模式,模板渲染

3. 编写一个api,供前端使用。

4. 如果是ejs模板渲染方式,编写一个hello页面。

5. 打包成exe、dmg、deb可执行文件。

场景演示