背景

我想开发一个桌面应用，可以记录任务待办，统计完成情况，计时器(番茄钟)，系统通知等功能，其中前三点都可以通过Web开发完成，而系统通知功能(底层交互)无法满足。所以想在2024用最小的努力开发一个小APP。最好一次开发，跨端使用，在Windows和Mac上都能用。

最终我确定了Electron

结果分享：https://github.com/GengCen-Qin/tomato-todo

是什么？

官方文档

官方地址：https://www.electronjs.org/zh/docs/latest/tutorial/quick-start

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。

简单来说就是：如果你会前端开发，通过Electron可以开发出跨平台应用。通过 Chromium（用于显示网页）和 Node.js（用于访问系统资源），这意味着你不仅可以制作漂亮的界面，还能访问文件系统、网络请求等底层功能。

怎么用？

官方教程：https://www.electronjs.org/zh/docs/latest/tutorial/quick-start

好文推荐：https://juejin.cn/post/7391703459802202112#heading-50

基本概念

Electron 继承了来自 Chromium 的多进程架构，直接想象为现代浏览器。其中分为两种进程：主进程，渲染进程

为什么不是单进程

因为浏览器不仅需要渲染展示页面，同时要管理多个窗口(标签页)和加载第三方插件。如果单线程，可能一个网站的崩溃或者无响应会影响到整个浏览器。

为了解决这个问题，Chrome 团队决定让每个标签页在自己的进程中渲染， 从而限制了一个网页上的有误或恶意代码可能导致的对整个应用程序造成的伤害。 然后用单个浏览器进程控制这些标签页进程，以及整个应用程序的生命周期。

主进程负责：窗口管理，应用程序生命周期，原生API交互

渲染进程负责：渲染 网页内容

生命周期

  1. ready: app初始化完成
  2. dom-ready: 一个窗口中的文本加载完成
  3. did-finsh-load: 导航完成时触发
  4. window-all-closed: 所有窗口都被关闭时触发
  5. before-quit: 在关闭窗口之前触发
  6. will-quit: 在窗口关闭并且应用退出时触发
  7. quit: 当所有窗口被关闭时触发
  8. close: 当窗口关闭时触发,此时应删除窗口引用

同类型产品对比

跨平台应用框架有很多不同的技术方案，这里我实验了

  1. Electron
  2. Tauri
  3. Flutter

Electron

  • 技术栈：使用 HTML、CSS 和 JavaScript，结合 Chromium 和 Node.js。
  • 应用模式：将应用打包为一个包含浏览器引擎的独立应用，比较大。
  • 性能：由于包含了完整的浏览器和 Node.js，应用体积较大，资源消耗相对高。
  • 适用场景：适合需要丰富 UI 和与 Web 有紧密联系的桌面应用，如 Slack、Visual Studio Code 等。

Tauri

  • 技术栈：允许使用前端技术（如 HTML、CSS、JavaScript）构建用户界面，同时与 Rust 语言结合处理后端逻辑。
  • 应用模式：生成的应用体积较小，因为它不会捆绑完整的浏览器，而是使用系统自带的 WebView。
  • 性能：相对 Electron 更轻量，资源占用更少，启动速度更快。
  • 适用场景：适合需要较高性能和较小体积的桌面应用，支持多种前端框架（React、Vue 等）。

Flutter

  • 技术栈：使用 Dart 编程语言，提供丰富的 Widget 库，用于构建用户界面。
  • 应用模式：编译为原生代码，直接运行在操作系统上，不依赖于浏览器。
  • 性能：通常拥有更好的性能，因为它使用原生组件，且不需要加载浏览器。
  • 适用场景：非常适合需要高度定制化和流畅动画的应用，支持移动端和桌面端。

个人体验：如果是个人玩的小应用直接使用Electron，消耗资源多和体积大，基本不是问题。而Tauri，Flutter都需要额外的学习成本：Rust和Dart语言。关键是文档都没有Electron详细。