electron之主进程、渲染进程

今天药忘吃喽~ 2022-09-12 03:56 344阅读 0赞

#### 一、electron启动后的进程 ####

*  主进程
 *  GUP渲染进程
 *  界面渲染进程

各个进程相互独立，彼此进程是不会共享内存和状态的。

##### 1、主进程 #####

electron项目启动的时候运行background.js的进程就是主进程，一个项目有且只有一个主进程  
创建窗口等有关系统事件写在主进程中进行。

它主要通过Node.js、Electron提供的API与系统底层打交道

###### 相关api ######

app：控制应用的事件生命周期
    autoUpdater：自动更新
    BrowserView：创建和控制视图
    BrowserWindow：创建和控制窗口
    contentTracing：跟踪并确定性能问题
    dialog：创建和控制本机系统对话框
    globalShortcut：监听系统快捷键
    inAppPurchase：（MAC专用）Mac App Store 的应用内购买
    ipcMain：从主模块到渲染模块（ipcRenderer）的异步通信
    Menu：创建远程应用以及上下文菜单
    MenuItem：在菜单中添加菜单项
    net：发出 HTTP或 HTTPS请求
    netLog：记录网络事件
    Notification：创建桌面通知
    powerMonitor：监视电源状态
    powerSaveBlocker：组织系统自动进入省电模式
    protocol：注册自定义协议并拦截基于协议的请求
    screen：检索有关屏幕大小、显示器、光标位置等的信息
    session：管理浏览器会话、cookie、缓存、代理设置等
    systemPreferences：获取系统配置信息
    TouchBar：（MAC专用）配置 TouchBar布局
    Tray：添加图标和上下文菜单到系统通知区
    webContents：渲染以及控制 web页面

例如：net

let url = '';
      const request = net.request(url)
      request.on('response', (response) => { 
        response.on('data', (chunk) => { 
         	let obj = JSON.parse(chunk.toString())
         	//业务逻辑处理
          } else { 
            dialog.showErrorBox('提示', '请求失败')
          }
        })
      })
      request.end()

##### 2、GPU渲染进程 #####

通过调用 app.disableHardwareAcceleration()可以关闭GPU渲染进程，需在app ready之前调用。

##### 3、渲染进程 #####

index.html页面运行在渲染进程。  
创建一个窗体都会创建一个渲染进程，每个web页面运行在它自己的渲染进程中  
每个渲染进程是独立的。

每个BrowserWindow实例都在自己的渲染进程中运行, 当BrowserWindow实例被销毁后, 相应的渲染进程也会被终止

渲染进程相关api

ipcRenderer：从渲染器进程到主进程的异步通信
    remote：在渲染进程中使用主进程模块
    webFrame：自定义渲染当前网页
    desktopCapturer：通过[navigator.mediaDevices.getUserMedia] API，可以访问那些用于从桌面上捕获音频和视频的媒体源信息

###### 通用 API ######

clipboard：在系统剪贴板上执行复制和粘贴操作
    crashReporter：将崩溃日志提交给远程服务器
    nativeImage：使用 PNG或 JPG 文件创建托盘、dock和应用程序图标
    shell：使用默认应用程序管理文件和 url

#### 二、主进程和渲染进程通信 ####

常用的是使用ipcRenderer 和 ipcMain模块发送消息来解决通信问题

##### 1、主进程 #####

监听渲染进程事件

const {  ipcMain } = require('electron')
    // 监听渲染进程发来的消息
    ipcMain.on('render-msg', (event, arg) => { 
      console.log(arg) //结果：hello
    })
    //给win窗体渲染进程发消息
    win.webContents.send('main-msg', ‘hi’)

##### 2、win窗体渲染进程 #####

const {  ipcRenderer } = require('electron');
    、、监听主进程发来的消息
    ipcRenderer.on('main-msg', (event, arg) => { 
      console.log(arg) // 结果：hi
    })
    //给主进程发送消息
    ipcRenderer.send('render-msg', 'hello')