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

时间：2025-02-07 13:06:30

preload预加载

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

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

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

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

可访问 DOM 接口和 环境

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

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

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

网页向主进程发送消息

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

在主进程中通过 程序处理。

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

给我的理解

类似于 vue 的this.$emit()

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

在中 将脚本附在渲染进程上
# main.js
const path = require('path')
const createWindow = () => {
  const win = new BrowserWindow({
    ...,
    //将脚本附在渲染进程上
    webPreferences: { preload: path.join(__dirname, '')},
  })
}
创建 文件 用于页面中的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.html
<body>
  <div id="#info"></div>
  <script src="./"></script>
</body>
在主进程中添加事件处理函数
#main
# main.js
const path = require('path')
const createWindow = () => {
  const win = new BrowserWindow({
    //将脚本附在渲染进程上
    webPreferences: { preload: path.join(__dirname, '')},
  })
  ipcMain.handle("ping", (e, a) => { console.log('在终端打印-', a); return `控制台返回值`  })
}

预加载中的 触发，中的函数调用，终端打印`在终端打印- ping`，执行函数体，返回值被中的变量 responent 接收，并且在页面的控制台打印 `控制台返回值`

相关文章