Electron是由GitHub开发的一个开源框架，可用于开发桌面应用程序，Node + Chromium的开发使得它拥有强大的跨平台能力，我们所熟知的GitHubAtom和微软Visual Studio Code都是Electron应用程序。
1. 桌面应用的优势
• 快速打开\
• 离线可用\
• 调用系统API • 安全\
• ...
2. 各大桌面应用开发技术对比
原生桌面技术开发
- 性能好
- 功能强大
- 包体积相对小
- 门槛高
- 开发效率低
QT 桌面技术开发
- 跨平台(支持主流操作系统)
- 高性能
- 接近原生应用的体验
- C++ 开发门槛较高
- 开发效率一般
Flutter
• 跨平台、跨端\
• 基于web技术\
• 桌面端尚未成熟 • 生态发展不完善
NW.js
• 跨平台\
• 基于web技术\
• 源码加密、支持chrome扩展 • 社区支持可\
• 开发效率高\
• 体积大、性能一般
Electron
• 跨平台\
• 基于web技术\
• 社区活跃、生态好 • 实践案例多\
• 开发效率高\
• 体积大、性能一般
3. 架构图
4. 安装与环境
环境依赖： node.js & npm
IDE: Visual Studio Code or 任意编辑器
快速开始:
npm i electron5. 一个最简的Demo
了解主进程模块
const { app, BrowserWindow, ipcMain} = require(‘electron’)
- app 应用的生命周期，例如 app.on(‘ready’，callback)
- BrowserWindow 控制窗口
let win = new BrowserWindow({width, height, ...}) // 创建窗口
win.loadURL(url)、win.loadFile(path) // 加载远程或本地页面- Notification 通知
let notification = new Notification({title, body, actions:[{text, type}]})
notification.show()- ipcMain.handle(channel, handler) 主线程，继承 Event Emitter
6. 主进程与渲染进程
1. 主进程负责什么
- package.json 的 main 脚本
- 一个应用一个主进程
- 原生GUI的调度管理，例如BrowserWindow、Tray、 Dock、Menu
- app 应用生命周期
- 创建渲染进程
2. 渲染进程负责什么
- 展示webui的进程
- 借助node.js、electron，拥有更多原生能力
- 一个应用，多个渲染进程
3. IPC(Inter-Process Communication，进程间通信)
- 通知事件、数据传输、数据共享
- 主进程的ipcMain和渲染进程的ipcRenderer
- 继承自EventEmitter
4. 从渲染进程到主进程
- Callback 写法:
ipcRenderer.send
ipcMain.on- Promise 写法 (Electron 7.0 之后，处理请求 + 响应模式)
ipcRenderer.invoke
ipcMain.handle7. 优势总结
- 不必再为兼容性而烦恼
- 使用chrome的最新特性，无需polyfill • es标准中最新语法
- 无跨域，请求走nodejs
- 读取本地文件
