Electron入门 (一)

渲染进程与主进程通讯

实现点击按钮 窗口尺寸变化 并且保持居中



首先我们要知道在Electron中什么是 主进程 和 渲染进程

  • 主进程

主进程，通常是名为main.js 的文件，是每个 Electron 应用的入口文件。它控制着整个 App 的生命周期，从打开到关闭。 它也管理着系统原生元素比如菜单，菜单栏，Dock 栏，托盘等。 主进程负责创建 APP 的每个渲染进程。而且整个 Node API 都集成在里面。

每个 app 的主进程文件都定义在 package.json 中的 main 属性当中。这也是为什么 electron. 能够知道应该使用哪个文件来启动。

在Chromium中, 这个进程被称为 "浏览器进程"。它在Electron被重新命名, 以避免与渲染器进程混淆。

  • 渲染进程

渲染进程是你的应用内的一个浏览器窗口。与主进程不同的是，它能够同时存在多个而且运行于不同的进程中。而且它们也能够被隐藏。

在标准的浏览器内，网页通常运行在一个沙盒环境中并且被禁止使用本地资源。 然而 Electron 的用户在 Node.js 的 API 支持下可以在页面中和操作系统进行一些低级别的交互。

这么理解起来可能有点抽象 接下来让我们一起来实现上面的例子 通过代码进行理解

首先在 index.html 创建一个按钮 并且添加事件

<button id="btn">按钮</button>
复制代码
<script type="text/javascript">
// 引入 ipcRenderer 模块 用于从渲染进程到主进程的异步通信 你可以使用它提供的一些方法从渲染进程 (web 页面) 发送同步或异步的消息到主进程 也可以接收主进程回复的消息
const { ipcRenderer } = require('electron');

document.getElementById('btn').onclick = () => {
    // 向主进程发送一个名为 winSize 消息
    ipcRenderer.send('asynchronous-message', 'winSize');
};
</script>
复制代码

接下来打开 main.js

// 引入 ipcMain 模块 用于从主进程到渲染进程的异步通信 当在主进程中使用时 它处理从渲染器进程（网页）发送出来的异步和同步信息 从渲染器进程发送的消息将被发送到该模块
const { app, BrowserWindow, ipcMain } = require('electron');

let win;

function createWindow() {
    win = new BrowserWindow({
        width: 1240,
        height: 800
    });

    win.loadURL(`file://${__dirname}/index.html`);

    win.webContents.openDevTools();

    win.on('closed', () => {
        win = null;
    });
};

app.on('ready', () => {
    createWindow();
});

// 接收渲染进程的异步信息
ipcMain.on('asynchronous-message', function(event, arg) {
    console.log(arg); // 打印的结果为刚才我们定义的名为 'winSize' 的字段
    if (arg == 'winSize') {    
        win.setSize(800, 500); // 改变窗口大小
        win.center(); // 使窗口居中     
    };
});
复制代码

现在我们点击按钮就会改变窗口的大小

如果需要在主进程中有消息需要回复发件人 在 asynchronous-message 事件中添加如下代码即可

ipcMain.on('asynchronous-message', function(event, arg) {
    console.log(arg); 
    if (arg == 'winSize') {    
        win.setSize(800, 500); 
        win.center();  
        // 将异步消息发送回发件人 发个'ojbk'
        event.sender.send('asynchronous-reply', 'ojbk');
    };
});
复制代码

同时需要在渲染进程监听

// 接收来自主进程的回复信息
ipcRenderer.on('asynchronous-reply', (event, arg) => {
    console.log(arg); // 打印 'ojbk'
});
复制代码
(其实我觉得就有点类似 websocket 监听消息 根据不同消息 做不同的事情 这样理解起来就很简单了)