4 / 14 electron 的主进程与渲染进程之间的区别

electron 简介

electron是由GitHub开发,是一个用HTML、CSS、JavaScript来构建的桌面应用程序的开源库,可以打包为Mac、Windows、Linux系统下的应用。

electron是一个运行时的环境,包含Node和Chromium 可以理解为把web应用运行在Node的环境中

结构

4 / 14 electron 的主进程与渲染进程之间的区别_第1张图片

  • electron运行package.json中的main字段就标明了主进程

  • 主进程用来创建web页面,一个electron只能有一个主进程

  • 使用主进程创建的页面,都运行在自己的渲染进程中

主进程

以往的web页面都是运行在浏览器的沙箱中,由于沙箱机制,就无法访问本地操作系统资源,这是浏览器的一种安全机制。

那如果要开发桌面应用,不能访问本地资源,那肯定是不行的。Electron将Node.js融合进来,让node.js作为整个程序的管家,并且可以访问本地资源
同时这个管家也管理着整个程序的生命周期,以及渲染进程窗口的创建与销毁。 这个管家就是主进程

渲染进程

Electron同时也融合了Chromium来展示界面,借用了Chromium的多进程的架构,在Chromium中一个页面就是一个渲染进程,每一个页面都是互不影响的,避免了一个页面的崩溃导致全部页面的无法使用。在Electron每一个新建的窗口就是一个渲染进程,同样也是独立的。

进程通信

在Electron的渲染进程中,像dialog、menu模块是不能使用的,只能在主进程中使用。要想在渲染进程中使用,就要进行主、渲染进程之间通信。

ipcMain与ipcRenderer

通过这两个模块可以实现进程之间的通信。

  • ipcMain 在主进程中使用,用来处理渲染进程发送的消息
  • ipcRenderer 在渲染进程中使用,用来发送信息给主进程或者接受主进程发来的消息

主进程:

const {ipcMain} = require('electron')

// 监听渲染程序发来的事件
ipcMain.on('something', (event, data) => {
    event.sender.send('something1', '我是主进程返回的值')
})

渲染进程:

const { ipcRenderer} = require('electron') 

// 发送事件给主进程
ipcRenderer.send('something', '传输给主进程的值')  

// 监听主进程发来的事件
ipcRenderer.on('something1', (event, data) => {
    console.log(data) // 我是主进程返回的值
})

remote模块

使用 remote 模块,可以调用main 进程对象的方法,而不需要显示发送 进程间的消息。

const { dialog } = require('electron').remote
dialog.showMessageBox({type: 'info', message: '在渲染进程中直接使用主进程的模块'})

webContents

webContents负责主进程向渲染进程发消息。 它是BrowserWindow对象的一个属性。

主进程发消息:

const {app, BrowserWindow} = require('electron')

let win

app.on('ready', () => {

    win = new BrowserWindow({width: 800, height: 600})
    
    // 加载页面
    win.loadURL('./index.html')
    
    // 导航完成时触发,即选项卡的旋转器将停止旋转,并指派onload事件后。
    win.webContents.on('did-finish-load', () => {

        // 发送数据给渲染程序
        win.webContents.send('something', '主进程发送到渲染进程的数据')
    })
})

渲染进程数据共享

可以使用localStorage 、sessionStorage来进程通信。

你可能感兴趣的:(Electron)