码云 Electron教程 2021-03-22

04. Electron Remote模块的使用方式

AI 概述

当我们知道了 Electron 有主进程和渲染进程后，我们还要知道一件事，就是 Electron 的 API 方法和模块也是分为可以在主进程和渲染进程中使用。那如果我们想在渲染进程中使用主进程中的模块方法时，可以使用Electron Remote解决在渲染进程和主进程间的通讯。本文我们就实现一个通过 Web 中的按钮打开新窗口。渲染进程中...

当我们知道了 Electron 有主进程和渲染进程后，我们还要知道一件事，就是 Electron 的 API 方法和模块也是分为可以在主进程和渲染进程中使用。那如果我们想在渲染进程中使用主进程中的模块方法时，可以使用Electron Remote解决在渲染进程和主进程间的通讯。本文我们就实现一个通过 Web 中的按钮打开新窗口。

渲染进程中打开新窗口

这里我为了节省时间直接按照 03 节文章的程序进行改写，在项目根目录下，新建一个index2.html文件，然后快速生成 html 的基本结构，编写一个按钮，引入渲染的 js 页面。代码如下：

<!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>
</head>
<body>
    <button id="btn">打开新的窗口</button>
    <script src="render/index2.js"></script>
</body>
</html>

接着修改main.js文件：

var electron = require('electron'); // 引入 electron 模块

var app = electron.app; // 创建 electron 引用

var BrowserWindow = electron.BrowserWindow; // 控制窗口引用

var mainWindow = null; // 声明要打开的主窗口

app.on('ready', () => {
    mainWindow = new BrowserWindow({
        width:500,
        height:500,
        webPreferences: {
            contextIsolation: false,
            worldSafeExecuteJavaScript: false,
            webSecurity: false,
            nodeIntegration: true, // 是否集成 node.js，解决 require is not defined 问题
            nodeIntegrationInWorker: true,
            webviewTag: true, // 解决 webview 无法显示问题
            enableRemoteModule: true
        }
    }); // 设置打开的窗口大小
    mainWindow.loadFile('index2.html'); // 加载 HTML 页面
    // 监听关闭事件，把主窗口设置为 null
    mainWindow.on('closed', () => {
        mainWindow = null;
    })
})

然后在render文件夹下，新建一个index2.js文件，然后编写如下代码。

const btn = this.document.querySelector("#btn");

const BrowserWindow = require('electron').remote.BrowserWindow;

window.onload = function () {
    btn.onclick = () => {
        newWin = new BrowserWindow({
            width: 500,
            height: 500
        });

        newWin.loadFile("yellow.html")
        newWin.on('closed', () => {
            newWin = null;
        })
    }
}

这时候还没有yellow.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>
</head>
<body style="background: yellow;">
    <h1>我是黄色页面</h1>
</body>
</html>

然后我们在终端中运行electron .，如果一切正常，就可以顺利打开一个新的窗口：

这个窗口可以顺利打开主要的功劳就是electron remote。它让我们有了很多 pc 端的原生能力，剩下的功能会在后续文章中继续学习。你可以跟着我先把本文的例子效果做出来。

以上关于04. Electron Remote模块的使用方式的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。

「点点赞赏，手留余香」

赞 1 赏

给作者打赏，鼓励TA抓紧创作！

微信

支付宝

还没有人赞赏，快来当第一个赞赏的人吧！

声明：本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » 04. Electron Remote模块的使用方式