桌面应用开发之Electron篇

乔珂力
3,258 阅读5分钟

不得不承认，这是属于 Web 的时代，用户通过使用浏览器就可以满足大部分的诉求，例如看新闻、上网课、购物甚至是玩游戏，那前端还有必要学习开发桌面应用吗？

在回答这个问题之前，我们来看一下有哪些技术可以开发桌面应用：

编程语言/技术框架可提供的能力代表作
C#/WPF开发 Windows 应用Visual Studio
Swift开发 macOS 应用CodeEdit
C++/QT跨平台应用YY语音
C++/CEF跨平台应用钉钉
Java/Swing跨平台应用JetBrains 系列软件
JavaScript/Electron跨平台应用Visual Studio Code
Rust/Tauri跨平台应用xplorer
Dart/Flutter跨平台应用rustdesk

作为一名开发者，学习某项技术需要看投资回报率高不高，像 Windows 平台上的 C# 和 macOS 平台上的 Swift，个人觉得技术路线会比较窄，未来更多的场景是采用跨平台的技术来实现，所以如果你有 C++ 的功底，QT 和 CEF 是不错的选择，而对于前端同学来说，最好的选择无外乎下面三个：

  • Electron：纯 JavaScript 技术栈，生态非常成熟，前端同学快速上手，无学习成本
  • Tauri：打出来的包非常小，需要一定的 Rust 基础
  • Flutter：一套代码通吃 web、iOS、Android、macOS、Windows、Linux 六大平台

可以看到，上述三个选择的优势都非常明显，个人认为选择其中任何一种的投资收益率都不低，接下来我会带领大家一起探索桌面端应用的开发，把上面技术都体验一番，而第一期先讲 Electron。

选择 Electron 的理由

其实不用做过多的解释，一图胜千言，去官方网站上看一下有多少桌面应用是用 Electron 开发的就知道目前这个技术有多火了：

这其中不乏大名鼎鼎、如雷贯耳的应用，例如 Postman、Notion、Skype 等，而且我敢打赌，各位看官的电脑上一定安装过用 Electron 开发的应用，如果你用的是 Mac 电脑，请在命令行运行下面的命令来检测本地采用 Electron 技术开发的桌面软件：

for app in /Applications/*; do;[ -d  $app/Contents/Frameworks/Electron\ Framework.framework ] && echo $app; done

我本地检测出来的应用有：

$ for app in /Applications/*; do;[ -d  $app/Contents/Frameworks/Electron\ Framework.framework ] && echo $app; done
/Applications/MongoDB Compass.app
/Applications/Postman.app
/Applications/Visual Studio Code.app
/Applications/cosbrowser.app
/Applications/draw.io.app
/Applications/百度网盘.app
/Applications/语雀.app
/Applications/喜马拉雅.app

Electron 比 Web 的优势

传统的 Web 应用都可以用 Electron 打包成本地应用，与 Web 相比，Electron 的核心优势在于以下几点：

资源本地化和离线持久化

对于传统 Web 应用来说，性能卡点往往不在于解析和渲染，而在于网络请求，把资源本地化之后，可以做到应用启动后页面秒开，极大程度上减少了白屏和用户等待的时间。另外，传统 Web 的数据都是通过调用接口实时保存到服务端，无法做到离线持久化，而 Electron 可以将用户配置、缓存数据全部写入本地文件，在离线状态下依然能够正常使用软件，当恢复在线时同步到云端，例如笔记类应用。

系统底层 API 调用

Web 环境本质上是浏览器提供的一个沙箱，出于安全考虑限制了很多底层能力，例如文件操作等，而在 Electron 里面，你可以调用任何操作系统提供的 API，包括 node.js 帮开发者封装好的 fs、child_process、os 等，但远远不止这些，通过 C++ addon 的方式可以集成任意底层能力，包括进入系统内核态，操作硬件驱动等。

不受限的网络通信

每一个前端开发都会遇到跨域问题，这其实是 Web 浏览器为了保证不同域下的数据安全，人为制造出来的限制，而在 Electron 环境下，你不用考虑是否跨域，所有 http 和 https 请求都畅通无阻，而且你还能对这些请求进行拦截和重定向，甚至修改任意 header 字段和响应结果。不仅如此，更底层的网络能力，例如 tcp 和 udp 也是支持的，你完全可以做一个类似于 QQ 一样的聊天软件。

可定制化的窗口

传统 Web 只能给用户提供一个 tab，单调乏味，Electron 可以创建各式各样的无边框窗口，甚至可以设置成圆形或三角形的形状，例如你可能用过苹果自带的 Spotlight 或者 Alfred，只提供了一个搜索入口，快捷键唤起全局置顶的输入框，用完即走，从视觉和交互体验上都完爆 Web，除此之外，桌面应用还可以设置托盘菜单，做出类似于 QQ 消息一闪一闪的效果。

如何学习 Electron

Electron 技术实际上就是 Web 技术和 Node.js 技术的合体，对前端同学来讲非常容易上手，Web 用于构建 UI 界面，这和平时我们用 React 或 Vue 开发项目没有任何区别，Electron 内置一个 chromium 浏览器，会启动一个渲染进程，把页面展示出来，而 Node.js 则用于在主进程中调用 Electron 封装好的 API 来创建窗口、设置菜单、添加托盘、自定义协议、快捷键注册等。

笔者做 Electron 开发有两年时间了，其实之前就有整理过一些文档，当时还计划出一本小册，由于掘金等级不够就放弃了这个计划，现在打算把其中的部分内容写成专栏文章分享给大家，本文是桌面端应用开发之 Electron 系列的开篇，后续的一些规划章节也跟大家提前透露一下：

  • Electron 应用的生命周期
  • Electron 应用窗口管理
  • Electron 创建托盘
  • Electron 快捷键注册
  • Electron 网络拦截
  • Electron 消息通知
  • Electron 本地存储
  • Electron 启动协议
  • Electron 硬件相关
  • Electron 创建 Mac 和 Windows 安装包
  • Electron 应用签名和公证
  • Electron 应用全量升级和增量升级
  • Electron 应用调试
  • Electron 应用 M1 适配
  • Electron 代码加密
  • ……

在此也立下一个 Flag：力争成为全网最全面、最具深度的 Electron 系列文章，欢迎大家订阅和关注！

本文正在参加「金石计划 . 瓜分6万现金大奖」

avatar
文章
阅读
粉丝