“如果你可以建一个网站,就可以建一个桌面应用程序”
你是否曾受限于浏览器的沙盒限制,或者再操作网页应用时无法满足下列场景下的使用需求,譬如读写本地文件、调用更多系统资源等。
因此,你想自行开发一个可以跨平台的调动资源的程序,但是又担心要学习新的语言,时间来不及,开发预算不足。
面对上述困扰,相信许多前端小伙伴脑中就会反应出一个应用程序——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. 同时,该项目也可以用服务端的开发思维,来编写桌面软件,更重要的是还能同时启动多个工作进程。
- 开源许可证:Apache-2.0
- 项目作者:哆啦好梦
- 项目地址:electron-egg: 一个入门简单、功能丰富的 js 跨平台桌面软件开发框架。
操作准备
正式操作之前,你需要了解以下三个知识
- 进程:框架有三种进程,即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可执行文件。
场景演示