一. Electron 简介
Electron 是由 Github 开发的开源框架，允许开发者使用 JavaScript，HTML 和 CSS 构建跨平台（MAC/Win/linux） 的桌面应用程序。
1. Electron 靠谱吗？
靠谱！
因为有一堆成功的案例，国内著名的基于 Elecron 开发的桌面端产品有：字节跳动飞书、迅雷11、思维导图 XMind2020。国外著名的：vscode、Atom。 小众的如稿定设计等
2. Electron 优缺点？
优点
- 跨平台，一套代码跑 MAC、Win、linux，以及 Web 端
- 成本低，门槛低，招几个前端即可开干。对比原生开发效率低，需要更多资源，更多成本
- 可以复用前端的各种轮子。比如说 Web 的UI 组件库，node.js 的 npm 包
- 学习成本低
缺点
- 原生开发受限于 electron api，如果 api 不支持需要 C++ 支持
- 性能要求高的需要原生实现
- chromium 不支持的技术 Electron 和当下其他的桌面开发方法相比如何？ - 卧在角落的猫的回答 - 知乎
3. Electron 应用场景
可以看出应用场景大部分为工具性质的，提高效率为主。
二. Electron 最简单的应用
项目地址： hello world!
1. Electron 架构
Electron 架构类似Chromium 多进程架构
-
主进程： node.js 环境，负责控制应用的生命周期，显示页面，执行特殊操作并管理渲染器进程。代码中，package.json 中的
main字段对应的文件 -
渲染进程：展示 Web 页面的进程，一个窗口即一个渲染进程。
由于安全问题，渲染进程中的 Node.js 环境已被禁用。 -
主进程只有一个，渲染进程可以有多个。
-
主进程跟渲染进程通信要用
IPC机制，即跨进程通信。主进程可以无障碍向渲染进程中发送消息，elelctron 12 以上，渲染进程向主进程发送消息的话，事先在预加载（preload.js）脚本中定义方法以及暴露出来。www.electronjs.org/zh/docs/lat…
2. 基础
Electron 与传统的 Web 开发不一样的是它的桌面端能力，大致如下所示
工程篇：
-
Electron 模块 api-demos： github.com/electron/el…
-
集成了 react 框架以及打包的 react electron: github.com/electron-re…
三 进阶
1. 集成数据库
开发一个大型Electron的应用，或许需要在客户端存储大量的数据，比如聊天应用或邮件客户端。可采取的方案有：sqlite3 + Sequelize
SQLite是一个轻型的、嵌入式的SQL 数据库引擎，适合桌面和移动应用。Sequelize 是一个基于 promise 的 Node.js ORM 工具, 支持 SQLite
简单写了一个 DEMO，运行起来后可以用 dbeaver 开源免费数据库工具查看桌面 test.db 文件效果。
书籍推荐：MySQL必知必会
2. 集成原生模块
有些需求需要使用系统 API 或者与硬件设备通信，Electron 又不没有提供相应的 Api，就需要集成原生模块。
- 如果有原生的程序可调用最好，直接打开程序即可。比如系统的 windows 截图程序
- 集成各类DLL。比如用 Node ffi库来调用系统内置 user32.dll 里的 API 用于打开微信窗口
- 要求 C/C++ 语言基础，能看懂入参出参
- user32.dll 文档： 中文版：e.125.la/api-487.htm… ，官方版： docs.microsoft.com/en-us/windo…, .h文件概念 baike.baidu.com/item/window… 3. Node addon，完全用 C++ 写代码再封装一层供 C++ 调用
四 总结
本文主要粗略讲解了前端桌面端框架 electron 的优缺点，基础使用以及进阶用法集成数据库以及原生模块，总得来说，前端想在桌面端有所作为，electron 是不二选择，它对前端的能力要求也会更高，可能涉及到 node.js 以及数据库。有一点非常确定的是，electron 也是会有各种各样的坑等着大家去踩的🤣
五. 参考文档
- 极客时间视频课程《Electron开发实战》 gitee.com/geektime-ge…
