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>
相关推荐
mCell2 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip2 小时前
Node.js 子进程:child_process
前端·javascript
excel5 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel6 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼8 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping8 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙9 小时前
[译] Composition in CSS
前端·css
白水清风9 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix9 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户22152044278009 小时前
new、原型和原型链浅析
前端·javascript