electron学习-03preload 预加载-主进程和渲染进程之间通信-Toy模板网

这篇具有很好参考价值的文章主要介绍了electron学习-03preload 预加载-主进程和渲染进程之间通信。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

preload预加载

主进程是有着完全操作系统访问权限的 Node.js 环境；渲染进程默认跑在网页页面上。

渲染进程不能直接访问 Node.js 接口；主进程访不能直接访问 DOM。

预加载脚本运行在具有 HTML DOM 和 Node.js、Electron API 的有限子集访问权限的环境中

预加载脚本：将 Electron 的不同类型的进程桥接在一起；

可访问 DOM 接口和 Node.js 环境

经常在其中使用 contextBridge 接口将特权接口暴露给渲染器

预加载会在渲染器的网页加载之前注入

主进程和渲染进程之间通信

网页向主进程发送消息

在预处理脚本中ipcRenderer.invoke 的函数来触发该处理程序。

在主进程中通过 ipcMain.handle 程序处理。

创建 preload.js 预加载文件

# preload.js
const { contextBridge, ipcRenderer } = require('electron')
// 能暴露的不仅仅是函数，我们还可以暴露变量
contextBridge.exposeInMainWorld('versions', {
  chrome: () => process.versions.chrome,
  ping: () => ipcRenderer.invoke('ping'),
})

给我的理解

ipcRenderer.invoke 类似于 vue 的this.$emit()

ipcMain.handle 类似于 vue 触发 this.$emit() 的处理函数

在main.js中将脚本附在渲染进程上

# main.js
const path = require('path')
const createWindow = () => {
  const win = new BrowserWindow({
    ...,
    //将脚本附在渲染进程上
    webPreferences: { preload: path.join(__dirname, 'preload.js')},
  })
}

创建 renderer.js 文件用于页面中的dom操作

# renderer.js
const information = document.getElementById("#info")
information.innerText = `Chrome: ${window.versions.chrome()}`
const func = async () => {
  const responent = await window.versions.ping()
  console.log('renderer-responent',responent)
}

information.addEventListener('click',func)//点击触发 预加载中的 ping

在index.js中引入该renderer.js

# index.html
<body>
  <div id="#info"></div>
  <script src="./renderer.js"></script>
</body>

在main.js主进程中添加事件处理函数

#main
# main.js
const path = require('path')
const createWindow = () => {
  const win = new BrowserWindow({
    //将脚本附在渲染进程上
    webPreferences: { preload: path.join(__dirname, 'preload.js')},
  })
  ipcMain.handle("ping", (e, a) => { console.log('在终端打印-', a); return `控制台返回值`  })
}

预加载中的ipcRenderer.invoke 触发，main.js中的函数调用，终端打印`在终端打印- ping`，执行函数体，返回值被renderer.js中的变量 responent 接收，并且在页面的控制台打印 `控制台返回值`文章来源地址https://www.toymoban.com/news/detail-406675.html

到了这里，关于electron学习-03preload 预加载-主进程和渲染进程之间通信的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！