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

最新推荐文章于 2024-03-14 14:16:27 发布

RxnNing

最新推荐文章于 2024-03-14 14:16:27 发布

阅读量1.9k

点赞数 2

分类专栏： electron学习文章标签： electron 学习 javascript

本文链接：https://blog.csdn.net/weixin_46211267/article/details/129990437

版权

electron学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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 `控制台返回值`  })
}