如何从我的网页调用Electron中的功能/模块?

时间:2017-01-24 03:41:34

标签: javascript node.js electron

我将尝试用简短的段落来描述最小化的问题。

简而言之,我想在我的电子应用程序中使用一些逻辑或调用我的电子应用程序中的某些功能 我的电子应用程序(我实际上是为我的网页包装电子应用程序'shell' )。

假设我想在我的Electron应用程序中公开一个函数。说,

function printNumbers () {
  console.log(1)
}

请注意它应该位于我的电子代码中。

然后在运行我的应用程序之后,我想从我的网页上调用此功能(单击我的网页中的一个按钮,该按钮从网站加载,然后在我的Electron App中打开一个新窗口)。现在,我想我可以使用开发者控制台检查printNumber是否有效。

我已经检查了如何使用remote模块调用电子内部的函数/模块。但我没有找到一种方法来调用我在电子代码库中编写的函数。

顺便说一句: 我可以启用nodeIntegration选项。

1 个答案:

答案 0 :(得分:12)

渲染器进程和主进程之间有两种主要的通信方式。

1。一种方法是使用remote模块来要求您从主进程获取的代码。该对象将包含从主进程代码中导出的任何内容。

// main process, for example app/main.js
exports.test = () => console.log('Yay');

// renderer process, for example app/renderer.js
const { remote } = require('electron');
const mainProcess = remote.require('./main.js');

mainProcess.test(); // 'Yay'

2. 另一种方法是使用Inter Process Communication在主进程和渲染器进程之间发送/接收事件:

// main process, for example app/main.js
myWindow.webContents.send('my-cool-log-event', 'Yay');

// renderer process, for example app/renderer.js
const { ipcRenderer } = require('electron');
ipcRenderer.on('my-cool-log-event', (evt, msg) => console.log(msg)); // 'Yay'

如果要在渲染器进程中触发单击事件时从主进程调用函数,则可以使用任一方法。

1

// main process, for example app/main.js
exports.onClick = () => console.log('Yay');

// renderer process, for example app/renderer.js
const { remote } = require('electron');
const mainProcess = remote.require('./main.js');

document
  .querySelector('#elem')
  .addEventListener('click', () => {
    mainProcess.onClick();
  });

2

// main process, for example app/main.js
const { ipcMain } = require('electron')
ipcMain.on('click', () => console.log('do something'));

// renderer process, for example app/renderer.js
const { ipcRenderer } = require('electron');

document
  .querySelector('#elem')
  .addEventListener('click', () => {
    ipcRenderer.send('click');
  });