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端的原生能力,剩下的功能会在后续文章中继续学习。你可以跟着我先把本文的例子效果做出来。

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有资源及文章均来源于网络及用户分享或为本站原创,仅限用于学习和研究,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 04. Electron Remote模块的使用方式

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们