Electron是当下开发桌面App最好的选择

2,661

当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放 长路漫漫伴你闯 林子祥 - 天长地久

我觉得大多数程序员可以听一听林子祥的这首歌,因为我们都在程序的世界里“闯荡”。

今天我想把最近自己使用Electron开发桌面应用方面的一些积累,和大家分享一下(这也是最近一段时间,自己工作内容之一的小小沉淀)。

Electron是可以开发跨平台桌面客户端的一套“集成框架”,所谓的“集成框架”也就是它将“Chromium”和“Node.js”很好的集成在了一起,并且很顺畅的一个负责界面,一个负责逻辑,大家井井有条。这是一个成本很低的解决方案,在快速交付上比之Native要快速了许多,大部分应用级别的应用,牺牲一部分性能而换取时间,这是有收益的。

官网:    https://electronjs.org/

哪些场景使用Electron:

  • 桌面软件(大部分情况下是离线状态),对于用户体验提升很大,如果你有网页,不妨包装一个桌面端

  • 需要在电脑上完成大部分工作的场景

使用Electron有哪些好处:

最典型的一个说法:“这又为前端开发者谋得了一份好的差事”。

想起在网路里流传很广的一句话“不要和老夫说什么C++,Java,老夫行走江湖就一把JS,遇到需求撸起袖子就是干”。

是的Electron看上去是在蚕食桌面客户端领域的市场份额,你可以理解它的跨平台,但是在不同系统之间的一些差异,你还是需要进行一些额外的处理,这一部分的工作量已经少之又少(这都不是事儿)。可想而知,这个成本到底有多低。在开发的体验上,Electron由于基于"Chromium"和"Node.js",所以几乎所有的Node.js模块都可以在Electron上运行,很方便你使用“npm”搭积木的方式快速交付一个产品。从这方面来说,你应该可以想到Electron的构建,打包也是基于Node.js。(这对于前端来说就很方便了)

该如何入门:

正常情况下需要你快速浏览一遍官方文档,理解一些Electron提出的概念(不怕,官方文档已经有简体中文)。

  • 了解什么是“主进程”,什么是“渲染进程”

  • 了解“渲染进程”和“主进程”之间是如何通信的

  • 了解“渲染进程”负责什么,“主进程”又负责什么

当你对上述三个问题了解清楚之后,就可以快速的把文档上的API浏览一遍,有个印象就行,因为很可能大部分情况下,你只需要使用到几个API,创建窗口等,其余的都还是在开发Web网页。

  • app 控制整个Electron生命周期

  • BrowserWindow 创建和控制应用的窗口

  • webContents 渲染和控制窗口内的内容

  • openDevtools  打开调试面板

  • ipcRenderer 用于渲染进程和主进程的通信

  • <webview> Tag 可以载入外部页面的组件

基本上,了解上述六个方面的使用,就能搭建起来一个应用。

学会带着诉求去学习:

“人不是天生就能精通所有”

在学习的过程中,一定要带着自己的诉求去学习,现在Github上你可以搜索到很多关于Electron方面的Demo,这为入门提供了很好的学习环境。

第一步:https://github.com/electron/electron-quick-start 从官方给的入门级别Demo开始,逐步了解到其中的一些思路。

一般来说,我们要学习的不是Web技术也不是Node.js,一定要学习的是,看看优秀的思路,架构,组织能力。看看别人是如何去构建应用,去驾驭代码。或者当你有特定的诉求时,也可以去看看别人的实现思路。只有通过学习,借鉴,才可能继续走下去。

进入开发:

整体上来说这个“开发”分为两个阶段,虽然在渲染进程中也可以使用Node.js的能力,但是正常情况下,渲染进程都只做和界面有关的事情。至于,绘制界面,你可以使用你熟悉的技术,React,Vue,jQuery都行。唯一,要注意的地方是,和界面无关的,一般都放在主进程中进行工作。在主进程中,有一个好处,就是在“发布”包时,主进程可以将日志输出出来,这也为调试定为问题提供了便利。其次,对于驾驭这个在组织结构上,也要合适,渲染进程只负责界面,主进程去负责逻辑,这才会减少可能遇见踩到的坑。

突然的灵感Side Project

在写这篇文章时,突然想到了一个小点子,也许对于炒币的朋友有用,目前交易所非常多,使用网页也非常不方便,如果有这么一个桌面应用,将各家的数据都集合起来,这个时候就只需要安装一个桌面应用,就能了解到每个交易所的数据,从而快速的判断。

如果这些分享对你有用,支持打赏ERC 20标准的任意代币,打赏地址

0x4A40Eb870DcF533D4dC097c3d87aaFE9f64490A1