electron窗口间通信(渲染进程和主进程事件监听)

主进程

const { app, BrowserWindow, BrowserView, globalShortcut } = require('electron')
const path = require('path')
var mainWindow = null // 声明要打开的主窗口
const { Menu, ipcMain } = require('electron')

app.on('ready', () => {
  // 设置窗口的高度和宽度
  mainWindow = new BrowserWindow({
    width: 800,
    height: 800,
    // frame: false, // 是否有边框
    webPreferences: {
      nodeIntegration: true, // 设置开启nodejs环境
      enableRemoteModule: true // enableRemoteModule保证renderer.js可以可以正常require('electron').remote,此选项默认关闭且网上很多资料没有提到
    }
  })
  // 加载 指定路径的页面
  mainWindow.loadFile('./src/index.html')
  // 开启渲染进程中的调试模式
  mainWindow.webContents.openDevTools()
  // 监听窗口关闭 销毁引用
  mainWindow.on('closed', () => {
    mainWindow = null
  })
})
// 主进程监听事件
ipcMain.on('imgUploadMain', (event, message) => {
  console.log('receive render process msg')
  console.log(JSON.stringify(message))
  // 主进程向渲染进程触发事件
  mainWindow.webContents.send('imgUploadMsgFromMain', message)
})

渲染进程


<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
head>
<body>
  <button onclick="sendToMainProcess()">
      渲染进程给主进程发送消息
    button>
body>
<script>
const {
      remote, clipboard, ipcRenderer } = require('electron');
// 渲染进程给主进程发送消息
function sendToMainProcess () {
      
  // 向主进程发送 imgUploadMain 事件
  ipcRenderer.send('imgUploadMain', {
      
    username: 'huangbiao',
    age: 18
  })
}
// 渲染进程监听 imgUploadMsgFromMain 事件
ipcRenderer.on('imgUploadMsgFromMain', (event, message) => {
      
  console.log('receive main process msg')
  console.log(JSON.stringify(message))
})

script>

主进程

const { app, BrowserWindow, BrowserView, globalShortcut } = require('electron')
const path = require('path')
var mainWindow = null // 声明要打开的主窗口
const { Menu, ipcMain } = require('electron')

app.on('ready', () => {
  // 设置窗口的高度和宽度
  mainWindow = new BrowserWindow({
    width: 800,
    height: 800,
    // frame: false, // 是否有边框
    webPreferences: {
      nodeIntegration: true, // 设置开启nodejs环境
      enableRemoteModule: true // enableRemoteModule保证renderer.js可以可以正常require('electron').remote,此选项默认关闭且网上很多资料没有提到
    }
  })
  // 加载 指定路径的页面
  mainWindow.loadFile('./src/index.html')
  // 开启渲染进程中的调试模式
  mainWindow.webContents.openDevTools()
  // 监听窗口关闭 销毁引用
  mainWindow.on('closed', () => {
    mainWindow = null
  })
})
// 主进程监听事件
ipcMain.on('imgUploadMain', (event, message) => {
  console.log('receive render process msg')
  console.log(JSON.stringify(message))
  // 主进程向渲染进程触发事件
  mainWindow.webContents.send('imgUploadMsgFromMain', message)
})

你可能感兴趣的:(electron窗口间通信(渲染进程和主进程事件监听))