为什么我的ipcMain不发送到ipcRenderer在电子？(Why is my ipcMain

2019-09-29 01:37发布

站内文章 / 后端开发
23 0 0

新建电子我已经想通了如何从渲染器发送到主 ，但我想学习如何从主去渲染器 。 在我的研究，我读：

IPC从主进程发送到渲染器和尝试：

main.js： 

const { app, ipcMain, Menu }  = require('electron')
const appVersion = process.env.npm_package_version
const mainWindow = require('./renderer/mainWindow')

app.on('ready', () => {
  mainWindow.createWindow(),
  console.log(`Trying to send app version to renderer: ${appVersion}`),
  mainWindow.webContents.send('app-version', appVersion),  
  Menu.setApplicationMenu(mainMenu)
})

但我得到的错误：

未捕获的异常类型错误无法读取属性未定义的“发送”

看完“ 从IpcMain发送同步消息IpcRenderer -电子 ”我想： 

ipcMain.on('app-version', (event) => {
    console.log(`Sent: ${appVersion}`)
    event.sender.send(appVersion)
}),

但没有任何反应或错误的。 我renderer.js： 

const { ipcRenderer } = require('electron')
ipcRenderer.on('app-version', (event, res) => {
    console.log(res)
})

为什么我的ipcMain不发送到我的ipcRenderer？

编辑：

mainWindow.js： 

// Modules
const { BrowserWindow } = require('electron')

// export mainWindow
exports.createWindow = () => {

  // BrowserWindow options
  // https://electronjs.org/docs/api/browser-window#new-browserwindowoptions
  this.win = new BrowserWindow({
      minWidth: 400,
      minHeight: 400,
      frame: false,
      webPreferences: {
        nodeIntegration: true,
        backgroundThrottling: false
      }
  })

  // Devtools
  this.win.webContents.openDevTools()

  // Load main window content
  this.win.loadURL(`file://${__dirname}/index.html`)

  // Handle window closed
  this.win.on('closed', () => {
    this.win = null
  })
}

我也试过：

main.js： 

app.on('ready', () => {
  mainWindow.createWindow(),
  mainWindow.win.webContents.send('app-version', appVersion),  
  Menu.setApplicationMenu(mainMenu)
})

renderer.js： 

console.log("Trying")
ipcRenderer.on('app-version', (args) => {
    console.log(`Node version is ${args}`)
})

出于某种原因，现在我已经写ipcMain应用的答案发送到渲染器几次反复渲染控制台消息

Trying to send app version to renderer: 1.0.0
Trying to send app version to renderer: 1.0.0
Trying to send app version to renderer: 1.0.0
Trying to send app version to renderer: 1.0.0
Trying to send app version to renderer: 1.0.0

现在，应用程序闪烁，但在console.log它显示了一次，我不明白为什么。

编辑

为了应对答案 。

我所知道的app.getVersion我只是用ENV学习如何发送到主。 测试代码这种方法行不通了。

应对这样的： 

app.on('ready', () => {
    const win = mainWindow.createWindow(),
    console.log(`Trying to send app version to renderer: ${appVersion}`),
    win.webContents.send('app-version', appVersion),  
    Menu.setApplicationMenu(mainMenu)
})

抛出的错误：

在常量声明中缺少初始化

这样修改，以这样的： 

app.on('ready', () => {
  const win = mainWindow.createWindow()
  console.log(`Trying to send app version to renderer: ${appVersion}`)
  win.webContents.send('app-version', appVersion)
  Menu.setApplicationMenu(mainMenu)
})

但添加在结束返回时exports.createWindow抛出的这个错误：

胜利没有定义

加入let.win之前exports.createWindow不会抛出一个代码，但什么都不送了过来。

电子小提琴

index.html的： 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Electron learning</title>
    <!-- CSS Bootstrap -->
    <!-- <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css"> -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- 
      Font Awesome 
      https://fontawesome.com/v4.7.0/cheatsheet/ 
    -->
    <!-- <link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.css"> -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <!-- Custom CSS -->
    <style>
      body {
        -webkit-app-region: drag;
      }
      footer {
        position: fixed;
        bottom: 0;
        width: 100%;
      }
      #close_app,
      #site {
        cursor: pointer;
      }
    </style>
  </head>
  <body class="d-flex flex-column h-100">
    <header>
      <nav class="navbar navbar-expand navbar-dark fixed-top bg-dark">
        <a class="navbar-brand text-white">Foobar</a>
        <div class="collapse navbar-collapse justify-content-between">
          <div class="navbar-nav">
            <a id="site" class="nav-link"><small><u id="application"></u></small></a>
          </div>
          <div class="navbar-nav">
              <a id="close_app" class="nav-item nav-link"><i class="fa fa-times-circle"></i></a>
          </div>
        </div>
      </nav>
    </header>

    <main role="main" class="flex-shrink-0">
    <div class="container">
      <h1>Hello World!</h1>
      <!-- All of the Node.js APIs are available in this renderer process. -->
      We are using Node.js <script>document.write(process.versions.node)</script>,
      Chromium <script>document.write(process.versions.chrome)</script>,
      and Electron <script>document.write(process.versions.electron)</script>.
      Electron app version <script>document.write(process.versions.electron)</script>.
    </div>
    <p id="testSender"></p>
    </main>

    <footer class="footer mt-auto py-3 ">
    <div class="container">
      <span class="text-muted">Place sticky footer content here.</span>
    </div>
  </footer>
    <script>
        // jQuery
        // window.jQuery = window.$ = $ = require('jquery')

        // You can also require other files to run in this process
        require('./renderer.js')
    </script>
    <!-- <script src="../node_modules/jquery/dist/jquery.min.js"></script> -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>


    <!-- <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script> -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

main.js： 

'use strict'

// Modules to control application life and create native browser window
const { app, ipcMain, BrowserWindow, Menu }  = require('electron')
const testMainSend = `Trying to send something to renderer`

let mainWindow

// Window state keeper
const windowStateKeeper = require('electron-window-state')

// export mainWindow
function createWindow () {

  let winState = windowStateKeeper({
    defaultWidth: 400,
    defaultHeight: 400
  })

  // BrowserWindow options
  // https://electronjs.org/docs/api/browser-window#new-browserwindowoptions
  const win = new BrowserWindow({
    width: winState.width,
    height: winState.Height,
    x: winState.x,
    y: winState.y,
    minWidth: 400,
    minHeight: 400,
    frame: false,
    webPreferences: {
      nodeIntegration: true,
      backgroundThrottling: false
    }
  })

  winState.manage(win)

  // Devtools
  win.webContents.openDevTools()

  // Load main window content
  win.loadURL(`file://${__dirname}/index.html`)

  // Handle window closed
  win.on('closed', () => {
      this.win = null
  })

  return win
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', () => {
  createWindow()

  // 1st attempt
  // webContents.send('misc-sender', testMainSend)

  // 2nd attempt
  // const win = createWindow()
  // win.webContents.send('misc-sender', testMainSend)

  // 3rd attempt
  const win = createWindow()
  win.webContents.on('dom-ready', () => {
    console.log(`Trying to send renderer: ${testMainSend}`)
    mainWindow.win.webContents.send('misc-sender', testMainSend)
  })
})

// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (mainWindow === null) {
    createWindow()
  }
})

// Close application from button
ipcMain.on('closing-app', () => {
  app.quit()
  console.log('Closed app from font awesome link')
})

renderer.js： 

// This file is required by the index.html file and will
// be executed in the renderer process for that window.
// All of the Node.js APIs are available in this process.
const { ipcRenderer, shell } = require('electron')
const appVersion = require('electron').remote.app.getVersion()

// Devtron
// require('devtron').install()

// Close App
const closeApp = document.getElementById('close_app')
closeApp.addEventListener('click', () => {
    ipcRenderer.send('closing-app')
})

// received from ipcMain test
ipcRenderer.on('misc-sender', (event, args) => {
    appendTest = document.getElementById('testSender')
    appendTest.innerHTML += args
})

// Getting version
const appVersioning = document.getElementById('application')
appVersioning.innerHTML = appVersion

// Open site
const homeURL = document.getElementById('site')
homeURL.addEventListener('click', (e) => {
    e.preventDefault
    shell.openExternal("https://www.google.com/")
})

Answer 1:

经过多次搜索，尝试我想我终于想通了如何从我的package.json应用程序版本发送到主然后渲染。 我的问题是在我app.on我失踪dom-ready哪些看完之后帮助IPC通信电子和窗口之间不工作 ：

main.js： 

const appVersion = process.env.npm_package_version

app.on('ready', () => {
  mainWindow.createWindow()
  Menu.setApplicationMenu(mainMenu)

  // Send version to renderer
  mainWindow.win.webContents.on('dom-ready', () => {
    console.log(`Trying to send app version to renderer: ${appVersion}`)
    mainWindow.win.webContents.send('app-version', appVersion)
  })
})

renderer.js： 

ipcRenderer.on('app-version', (event, args) => {
    const appVersion = document.getElementById('app_version')
    console.log(`Node version is ${args}`)
    appVersion.innerHTML += args
})

index.html的 ： 

<div id="app_version"></div>

有可能是一个更好的方式来做到这一点，但经过进一步的研究，我读：

  • 电子-如何知道什么时候渲染窗口已准备就绪
  • dom-ready从instance-events

而这个工作，但下一步是看是否拉动process.env是一个良好的安全习惯。 我希望看到一个可能更好的方法一些其他的答案，如果它存在。



Answer 2:

之前回答你的问题，看你发送到渲染器（如果你想要做的是把你的应用程序版本的渲染过程），这是可以做到的消息app.getVersion 。 从你的主要过程，你必须设置与应用程序版本app.setVersion("1.0")然后从你的渲染过程中，你必须这样做 

const { remote: { app } } = require("electron");
app.getVersion();

为了您的实际问题mainWindow.createWindow()需要返回的实例BrowserWindow （看你的代码不必返回它，你也不会阅读win你设置属性对象mainWindow.js ）。 如果你要坚持你的问题目前的代码，你必须这样做 

mainWindow.win.webContents.send(...)

或者你应该这样做，从

mainWindow.js

// Modules
const { BrowserWindow } = require('electron')

// export mainWindow
exports.createWindow = () => {

    // BrowserWindow options
    // https://electronjs.org/docs/api/browser-window#new-browserwindowoptions
    const win = new BrowserWindow({
        minWidth: 400,
        minHeight: 400,
        frame: false,
        webPreferences: {
            nodeIntegration: true,
            backgroundThrottling: false
        }
    })

    // Devtools
    win.webContents.openDevTools()

    // Load main window content
    win.loadURL(`file://${__dirname}/index.html`)

    // Handle window closed
    win.on('closed', () => {
        this.win = null
    })
    return win;
}

main.js

const { app, ipcMain, Menu }  = require('electron')
const appVersion = process.env.npm_package_version
const mainWindow = require('./renderer/mainWindow')

app.on('ready', () => {
    const win = mainWindow.createWindow(),
    console.log(`Trying to send app version to renderer: ${appVersion}`),
    win.webContents.send('app-version', appVersion),  
    Menu.setApplicationMenu(mainMenu)
})


文章来源: Why is my ipcMain not sending to ipcRenderer in Electron?
标签： electron ipc ipcmain ipcrenderer
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~