electron 主进程 和 渲染进程通信 ipcRenderer 和 mainWindow.webContents

electron 开发时最麻烦就是electron版本和node版本的选择和正确安装

electron 用npm安装时太慢容易报错,建议用cnpm i 进行安装

javascript 复制代码
注意最新版渲染进程使用node
nodeIntegration: true, // 渲染进程可用node
contextIsolation: false, // 这个值影响nodeIntegration是否生效

electron  的主进程的创建
function createWindow () {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true, // 渲染进程可用node
      contextIsolation: false, // 这个值影响nodeIntegration是否生效
      preload: path.join(__dirname, 'preload.js')
    }
  })

  // and load the index.html of the app.
  mainWindow.loadFile(path.join(__dirname, 'index.html'))

  // Open the DevTools.
  mainWindow.webContents.openDevTools()
  // 渲染进程使用remote 
  remote.enable(mainWindow.webContents)//3
  require("./ipcMain/menu")
  require("./ipcMain/rightMenu")
  // 主进程发送消息
  mainWindow.webContents.send("mainMag","发财发财")
}

app.on('ready', createWindow);
html 复制代码
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World!</title>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <h1>💖 Hello World!</h1>
    <p>Welcome to your Electron application.</p>
    <h1>Hello World!</h1>
    We are using Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    and Electron <span id="electron-version"></span>.

    <!-- You can also require other files to run in this process -->
    <!-- <script src="./renderer.js"></script> -->
  </body>
  <script>
  // 引用node中的函数
    require('path')
    // 高版本,渲染线程打开新窗口方法,需要在主进程打开
    // const {BrowserWindow} = require("@electron/remote")
    // const win = new BrowserWindow({
    //         width:500,
    //         height:500,
    //     })
    // win.loadURL("https://www.baidu.com")
    const { ipcRenderer } = require("electron");
    window.addEventListener('contextmenu', (e) => {
      e.preventDefault()
      // 渲染进程发送消息
      ipcRenderer.send('show-context-menu')
    })
	// 渲染进程接受主进程消息
    ipcRenderer.on('context-menu-command', (e, command) => {
      // ...
    })
    ipcRenderer.on('show-context-menu-reply', (e, command) => {
      console.log("开心",command)
    })
    ipcRenderer.on('mainMag', (e, command) => {
      console.log(e)
      console.log("------------")
      console.log(command)
    })
  </script>
</html>
相关推荐
智码看视界7 分钟前
老梁聊全栈系列:(阶段一)架构思维与全局观
java·javascript·架构
小周同学@2 小时前
谈谈对this的理解
开发语言·前端·javascript
Wiktok2 小时前
Pyside6加载本地html文件并实现与Javascript进行通信
前端·javascript·html·pyside6
一只小风华~2 小时前
Vue:条件渲染 (Conditional Rendering)
前端·javascript·vue.js·typescript·前端框架
柯南二号2 小时前
【大前端】前端生成二维码
前端·二维码
程序员码歌2 小时前
明年35岁了,如何破局?说说心里话
android·前端·后端
博客zhu虎康3 小时前
React Hooks 报错?一招解决useState问题
前端·javascript·react.js
灰海3 小时前
vue中通过heatmap.js实现热力图(多个热力点)热区展示(带鼠标移入弹窗)
前端·javascript·vue.js·heatmap·heatmapjs
王源骏4 小时前
LayaAir鼠标(手指)控制相机旋转,限制角度
前端
大虾写代码4 小时前
vue3+TS项目配置Eslint+prettier+husky语法校验
前端·vue·eslint