electron渲染进程与主进程的交互

electron渲染进程与主进程的交互

Electron继承了来自Chromium 的多进程架构，多进程模型的使用虽然增加了系统资源的开销，但保证了单个进程的崩溃或无响应不会影响到整个浏览器。

作为应用的开发者，我们在electron开发中所要管理的进程分为两种类型：主进程和渲染进程

主进程

应用程序的入口点，运行与Node.js环境中，这意味着他具有使用Node.js api的能力。

其主要目的是使用BrowerWindow模块创建和管理应用程序窗口

渲染进程

每一个标签页只在自己的进程中渲染，他无权访问require和Node.js的api，因为这会涉及到安全的问题

主进程与网页的内容交互：

主要依赖于BrowserWindow下的webContents对象：

const { BrowserWindow } = require('electron')

const win = new BrowserWindow({ width: 800, height: 1500 })
win.loadURL('https://github.com')

const contents = win.webContents
console.log(contents)

BrowserWindow模块是一个EventEmitter， 所以可以利用此为各种用户事件 ( 例如，最小化 或 最大化您的窗口 ) 添加处理程序

渲染进程与主进程交互：

1.主进程与渲染进程共享着一个window对象，但是在默认情况下他们的运行环境是隔离开来的，在创建BrowerWindow时候可以利用其webPreferences参数中contextIsolation参数以及nodeIntegration取消这种隔离，并借助window.require()来应用模块.从而让渲染进程也能共享到主进程的api，像这样：

  const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false,
        },
    })

这样设置后便能够在渲染进程中使用window.require()来调用node模块

但这种方式相当的不安全推荐使用第二种

2.采用官方的提供的接口 electron中contextBridge来进行交互，要使用此模块首先要了解预加载脚本，预加载脚本包含了那些执行于渲染器进程中，且先于网页内容开始加载的代码，他运行在主进程中，通过 BrowserWindow 构造方法中的 webPreferences 选项里被附加到主进程

因为该模块方法的调用需要两个条件，

• 在预加载脚本中

• 且BrowerWindow构造函数的webPreferences参数contextIsolation为true，即在语境隔离的条件下使用

所以使用这种方法首先我们需要定义一个preload.js文件用于引用需要使用的模块，并调用contextBridge的exposeInMainWorld方法，像这样：

//preload.js
const { contextBridge } = require('electron')
const fs = require("fs")
contextBridge.exposeInMainWorld("myapi",{
    fsapi:fs
})

然后在main文件中创建窗口时这样操作：

    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false,
            preload:path.join(__dirname,"preload.js")
        },
    })

这样就能在网页进程中使用导出的myapi