Electron重学—基础知识

这是我参与更文挑战的第12天，活动详情查看: 更文挑战

1, Electron是什么

（1）Electron是有github开发的开源框架

（2）它允许开发者使用web技术构建跨平台桌面应用

Electron + Chromium + Node.js + Native API

Electron谁在使用：
Atom, VSCode, Whatsapp, WordPress, slack, 大象

(3) 原理

Electron是基于Chromium架构设计的，
Chrominum是Chrome的开源版本，有自己的窗口，Tab页面，标签等等，而处理这些事项的进程我们称为：主进程，
Browser,对应每个页面渲染的进程，我们称为：渲染进程，Render. 两个进程之间是需要通信的，也就是跨进程通
信，我们称为：IPC，

Node.js和Chromium的整合：
nodejs事件循环给予libuv, chromium基于message-pump
chromium集成到nodejs，用libuv实现message pump

如果你想要做一个跨平台应用：如果想追求速度，提升开发效率，Electron是最好的选择，如果你想追求原生体验效果，Native是最好的选择

node -v
v14.16.1
npm -v
6.14.12

快速安装方法：

ELECTRON_MIRROR=https://cdn.npm.taobao.org/dist/electron/  npm install electron --save-dev

安装完之后验证：
npx electron -v
v13.1.2

2, Electron模块

引入模块，各进程之间在Electron模块引入即可

// 引入主线程app, BrowserWindow模块
const {app, BrowserWindow } = require('electron') 
// 引入渲染进程ipcRenderer模块
const { ipcRenderer } = require('electron')

// 渲染进程跟主进程发送请求
ipcRenderer.invoke().then(result => {
    handleResult()
})

• App 模块用于控制应用生命周期，

• BrowserWindow 用于创建和控制窗口

  let win=new BrowserWindow({width, height}). // 创建窗口，并设置宽高

  ​ win.loadURL(url) // 加载远程URL页面

  ​ win.loadFile(path) // 加载本地页面

• Notification

  let notification = new Notification({title, body, actions:[{text,type}]})

​ Notification.show()

• ipcMain.handle(channel, handler) // 处理渲染进程的channer请求，在handler中返回结果

3, Electron进程

(1), 主进程

• Electron 运行package.json的main脚本的进程被称为主进程

• 每一个应用只有一个主进程

• 管理原生GUI， 典型的窗口

• 创建渲染进程

• 控制应用生命周期

  (1), 渲染进程

• 展示web页面的进程称为渲染进程

• 通过node's，electron提供的API可以跟系统底层打交道

• 一个electron应用可以有多个渲染进程

各个进程中有很多模块

主进程模块：

app  : 管理应用APP的生命周期，
BrowserWindow : 管理我们的窗口
ipcMain : 它是跟ipcRenderer进行IPC通信的
Menu:   原生的GUI
Tray： 原生的GUI
MenuItem：原生的GUI
dialog： 原生的GUI
Notification： 运行我们可以做一个可交互的通知
webContents： 用来加载我们具体的页面
autoUpdater:  用来更新模块
globalShortcut： 用来设置全局的一个快捷键
systemPreferences
TouchBar
netLog
powerMonitor
inAppPurchase
net
powerSaveBlocker
contentTracing
BrowserView
session
protocol
Screen

渲染进程：

ipcRenderer
remote： 可以调用我们主进程的模块
desktopCapture： 捕获我们的桌面流，桌面截图
webFrame

两个进程都有的模块：

clipboard： 用来访问和读写我们的剪切板
crashReporter： 用来监视我们的主进程和渲染进程是否崩溃
shell
nativeImage

3, 进程通信

（1）进程间通信的目的

• 通知事件
• 数据传输
• 共享数据

ipcMain, ipcRenderer都是EventEmitter对象，Electron提供了IPC通信模块，主进程的ipcMain和渲染进程的ipcRenderer

（2）从渲染进程到主进程

ipcRenderer.invoke(channel, ...args)

ipcMain.handle(channel, handler)

（3）从主进程到渲染进程

ipcRenderer.on(channel, handler)
webContents.send(channel)

（4）页面间（渲染进程与渲染进程间）通信

通知事件：

ipcRenderer.sendTo()

数据共享：

web技术（localStorage, sessionStorage, indexedDB）

4, 踩坑

• 少用remote模块
• 不要呀sync模式
• 在请求+响应的通信模块下，需要自定义超时限制

5, Electron原生能力

GUI

• BrowserWindow 应用窗口

• Tray 托盘

• app 设置 dock.badge

• Menu菜单

• dialog原生弹框

• TouchBar 苹果触控

  API

• clipboard 剪切板

• globalShortcut 全局快捷键

• desktopCapture 捕获桌面

• Shell 打开文件，URL

LazyLoad(https://mathiasbynens.be/demo/img-loading-lazy)

6, 与web相比

• 无浏览器兼容问题
• 最新浏览器Feature
• ES 高级语法
• 无跨域问题
• Powered by Node.js

7, 实战

1, 安装

ELECTRON_MIRROR=https://cdn.npm.taobao.org/dist/electron/  npm install electron --save-dev

安装完之后验证：
npx electron -v

Main.js

// 引入主线程app, BrowserWindow, ipcRenderer模块
const {app, BrowserWindow, Notification, ipcMain } = require('electron') 

let mainWindow;
app.on('ready', () => {
    mainWindow = new BrowserWindow({
        width: 300,
        height: 300,
        webPreferences: {
            nodeIntegration: true
        }
    })
    mainWindow.loadFile('./index.html')
    mainWindow.on('closed', () => {
        mainWindow = null
    })
})