srcmini本文概述
在某些情况下, 你将需要执行仅在主流程级别可以访问的功能, 此外, 执行一些由于执行成本高昂而可以锁定用户界面的JS代码可能会很有用。使用JavaScript和导出功能的一些知识可以轻松完成此操作, 但是, 如果你要遵循Electron准则, 建议你使用Electron的ipcMain模块和ipcRenderer模块, 这将帮助你与主模块进行异步通信。进程到渲染器进程。
1.在主流程中设置事件监听器
你首先要做的是使用ipcMain模块在主进程中创建一个事件侦听器。它的工作原理非常简单明了, 你只需附加一个事件监听器, 一旦ipcRenderer模块(在视图中)请求执行它的回调, 便会执行该回调。
因此, 将事件侦听器附加到在主进程中运行的文件中, 例如main.js：
// In some file from the main process
// like main.js
const {ipcMain} = require('electron');
// Attach listener in the main process with the given ID
ipcMain.on('request-mainprocess-action', (event, arg) => {
// Displays the object sent from the renderer process:
//{
// message: "Hi", // someData: "Let's go"
//}
console.log(
arg
);
});在回调内部, 你要在主流程中执行的代码。在这种情况下, 我们仅在控制台(启动Electron应用程序的控制台)中显示在渲染器(视图)进程中发送的数据。要知道如何触发此回调, 请检查以下步骤。
2.从渲染器进程触发事件
现在, 如果你确定主进程中已经有一个IPC事件侦听器, 则可以在渲染器进程中使用其ID触发它。为了清楚起见, 我们将从脚本标记内的索引文件中执行它：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Electron Application</title>
<!-- Use minimum-scale=1 to enable GPU rasterization -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0, maximum-scale=1, minimum-scale=1">
</head>
<body>
<div id="app"></div>
<script>
/**
* The code can be included in some JS file and included
* via require or <script> in the renderer process
*/
const { ipcRenderer } = require('electron');
// Some data that will be sent to the main process
let Data = {
message: "Hi", someData: "Let's go"
};
// Send information to the main process
// if a listener has been set, then the main process
// will react to the request !
ipcRenderer.send('request-mainprocess-action', Data);
</script>
</body>
</html>在这种情况下, 就像在视图中一样, 使用ipcRenderer模块, 你只需要从该模块执行send方法, 该方法期望将要触发的事件的ID作为第一个参数, 而将对象, 字符串, 布尔值, 包含要从渲染器进程发送到主进程的信息。
3.请求和发送信息
如果要发送数据而不是仅执行回调, 则可以遵循相同的过程, 但是使用event.sender对象将信息从主过程发送到渲染器过程, 并在视图中添加带有IPCRenderer的侦听器：
主要过程
// In some file from the main process
// like main.js
const {ipcMain} = require('electron');
// Attach listener in the main process with the given ID
ipcMain.on('request-mainprocess-action', (event, arg) => {
// Displays the object sent from the renderer process:
//{
// message: "Hi", // someData: "Let's go"
//}
console.log(
arg
);
// Return some data to the renderer process with the mainprocess-response ID
event.sender.send('mainprocess-response', "Hello World!");
});渲染程序
/**
* The code can be included in some JS file and included
* via require or <script> in the renderer process
*/
const { ipcRenderer } = require('electron');
// Some data that will be sent to the main process
let Data = {
message: "Hi", someData: "Let's go"
};
// Add the event listener for the response from the main process
ipcRenderer.on('mainprocess-response', (event, arg) => {
console.log(arg); // prints "Hello World!"
});
// Send information to the main process
// if a listener has been set, then the main process
// will react to the request !
ipcRenderer.send('request-mainprocess-action', Data);编码愉快！
评论前必须登录！
注册