Electron快速入门与实践

这是我参与8月更文挑战的第6天，活动详情查看：8月更文挑战

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 electron

5. 一个最简的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.handle

7. 优势总结

• 不必再为兼容性而烦恼
• 使用chrome的最新特性，无需polyfill • es标准中最新语法
• 无跨域，请求走nodejs
• 读取本地文件