Electron学习笔记 - 渲染进程使用主进程模块(remote)

本文讲解如何在渲染进程使用主进程模块。

一、主/渲染进程可使用的模块

在下面这个网址可以查到主进程和渲染进程可使用的模块。
https://www.electronjs.org/docs/latest/api/app

截屏2022-02-15 上午9.01.55.png

在主进程，可以使用app、autoUpdater、BrowerView、BrowserWindows、clipboard等模块；在渲染进程可以使用clipboard, contextbridge, crashReporter等模块。
接下来我们讲如何在渲染进程使用主进程的模块。

二、渲染进程使用主进程模块（未安装remote模块）

我们先直接在渲染进程使用主进程模块，看程序会出什么报告。
再安装和调用remote模块，达到调用主进程模块的效果。
BrowserWindow。

1. 修改index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/base.css">
    <script src="renderer/index.js"></script>
</head>
<body>
    <h2>这是渲染进程主窗口</h2>
    <ul>
        <li>主窗口里面的内容</li>
        <li>主窗口里面的内容</li>
        <li>主窗口里面的内容</li>
        <li>主窗口里面的内容</li>
        <li>主窗口里面的内容</li>
    </ul>
    <button id="btn">打开</button>
</body>
</html>

增加index.js文件
index.js实现的就是点击按钮打开一个窗口的功能。代码如下：

/*
尝试使用主进程模块 - BrowserWindow
*/
const { BrowserWindow } = require("electron");
const path = require("path");
window.onload=()=>{
    var btnDom = document.querySelector("#btn");
    btnDom.onclick=()=>{
        //点周按钮，调用主进程模块BrowserWindow
        const secondWin = new BrowserWindow( {
            width: 100,
            height: 600,
            webPreferences: {
                nodeIntegration: true,  //允许渲染进程使用nodejs
                contextIsloation: false //允许渲染进程使用nodejs
            }
        });
        secondWin.loadFile(path.join(__dirname,"second.html"));
    }
}

运行后出现如下报错：

截屏2022-02-15 上午9.36.22.png

这时，我们来安装remote模块。

三、渲染进程使用主进程模块（正确方法，安装remote模块）
在渲染进程，通过remote模块调用主进程中的。

1. 安装remote模块

npm install --save @electron/remote

2. 在主进程加载remote模块

const { app, BrowserWindow } = require("electron");
const path = require("path");
const remote = require("@electron/remote");
remote.initialize();

const createWindow=()=>{
    const mainWindows = new BrowserWindow({
        width: 800,
        height: 400,
        webPreferences: {
            nodeIntegration : true,  //允许渲染进程使用Nodejs
            contextIsolation : false //允许渲染进程使用Nodejs
        }
    });
    mainWindows.loadFile(path.join(__dirname, "index.html"));

    //打开页面调试
    mainWindows.webContents.openDevTools();

    //打开调试模式
    remote.enable(mainWindows.webContents);
}
//监听应用的启动事件
app.on("ready", createWindow);

主要是下面三条代码：

const remote = require("@electron/remote");
remote.initialize();
remote.enable(mainWindows.webContents);

3. 在渲染进程修改BrowswerWindow引入方式

在index.js文件，将

const { BrowserWindow } = require("electron");

改为

const { BrowserWindow } = require("@electron/remote");

运行，点击打开按钮，即成功新建了一个窗口。

截屏2022-02-15 上午9.37.56.png

最后更新时间：2022年2月15日

最后编辑于：2022.02.15 09:47:43