Electron重学—基础知识

1,105 阅读4分钟

这是我参与更文挑战的第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
EelctronNativeQTNW
性能1321
安装包大小1311
原生体验1321
跨平台3133
开发效率3222
社区,人才储备3212

如果你想要做一个跨平台应用:如果想追求速度,提升开发效率,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
    })
})