Electron 学习_在进程之间通信

1.问题:Electron的主进程和渲染进程有着清楚的分工,并且不可互换。从渲染进程直接访问Node.js 接口,亦或者 从主进程访问HTML文档对象模型(DOM)都是不可能的
2.解决方法:使用进程间通信 (IPC)
可以使用 Electron 的ipcMain 模块和ipcRenderer 模块来进行进程间通信。从网页上向主进程发送消息,可以使用ipcMain.handle 设置一个主进程处理程序(handler)然后在云处理脚本中暴露一个被称为 ipcRenderer.invoke 的函数来出发该处理程序(handler)

3.preload.js添加ping()

// 引入ipcRenderer
const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('versions', {
  node: () => process.versions.node,
  chrome: () => process.versions.chrome,
  electron: () => process.versions.electron,
  ping: () => ipcRenderer.invoke('ping')
  // 除函数之外,我们也可以暴露变量
})

4.main.js

//引入 ipcMain 
const { app, BrowserWindow, ipcMain } = require('electron')
const path = require('path')

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })
  win.loadFile('index.html')
}
app.whenReady().then(() => {
  ipcMain.handle('ping', () => 'pong') //在主进程中设置你的 handle 监听器
  createWindow()
})

5.renderer.js

const func = async () => {
  const response = await window.versions.ping()
  console.log(response) // 打印 'pong'
}

func()

6.效果(ctrl+shift+I 调出console 窗口)
Electron 学习_在进程之间通信_第1张图片

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