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

Question

我将尝试用简短的段落描述一个最小化的问题.

总之,我想用一些逻辑,或是从网页调用一些功能在我的电子应用在我的电子应用(我在实际包装为我的网页电子应用"壳").

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

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

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

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

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

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

Answer 1

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

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

// 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.另一种方法是使用进程间通信在主进程和渲染器进程之间发送/接收事件:

// 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');
  });