04. Electron Remote模块的使用方式

当我们知道了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模块的使用方式

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

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » 04. Electron Remote模块的使用方式

发表评论

提供最优质的资源集合

立即查看 了解详情