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 接收,并且在页面的控制台打印 `控制台返回值`

你可能感兴趣的:(electron学习,electron,学习,javascript)