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
![image-20210721163629399](https://i-blog.csdnimg.cn/blog_migrate/d5d05523b60b7499945346e2fd3363be.png)