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

最新推荐文章于 2024-03-29 22:02:51 发布

weixin_46852620

最新推荐文章于 2024-03-29 22:02:51 发布

阅读量2.2k

点赞数

本文链接：https://blog.csdn.net/weixin_46852620/article/details/111834290

版权

主进程

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)
})

渲染进程

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</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)
})

weixin_46852620

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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
复制链接

扫一扫