3.Electron之remote，打开新窗体-阿里云开发者社区

3.Electron之remote，打开新窗体

2024-06-25 109

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 3.Electron之remote，打开新窗体

electron版本：v18.1.0

一、安装依赖

npm install --save @electron/remote

二、主进程初始化remote

var electron = require('electron') //引入electron组件
 
var app = electron.app //引入组件app
 
var BrowserWindow = electron.BrowserWindow //窗口引用
 
var mainWindow = null //申明打开窗口
 
app.on('ready', () => { //app初始化参数
    mainWindow = new BrowserWindow({
        windth: 800,
        height: 800,
        webPreferences: {
            nodeIntegration: true, //使用node功能
            contextIsolation: false,
            enableRemoteModule: true
        }
    })
    require('@electron/remote/main').initialize()
    require("@electron/remote/main").enable(mainWindow.webContents)
 
    mainWindow.loadFile('index.html') //打开窗口加载的页面
    mainWindow.on('close', () => { //窗口关闭时，释放页面
        mainWindow = null
    })
})

三、渲染进程中引入@electron/remote

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

四、完整代码

main.js

var electron = require('electron') //引入electron组件
 
var app = electron.app //引入组件app
 
var BrowserWindow = electron.BrowserWindow //窗口引用
 
var mainWindow = null //申明打开窗口
 
app.on('ready', () => { //app初始化参数
    mainWindow = new BrowserWindow({
        windth: 800,
        height: 800,
        webPreferences: {
            nodeIntegration: true, //使用node功能
            contextIsolation: false,
            enableRemoteModule: true
        }
    })
    require('@electron/remote/main').initialize()
    require("@electron/remote/main").enable(mainWindow.webContents)
 
    mainWindow.loadFile('index.html') //打开窗口加载的页面
    mainWindow.on('close', () => { //窗口关闭时，释放页面
        mainWindow = null
    })
})

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

render/index.js

const btn = this.document.querySelector('#btn')
const {BrowserWindow}=require('@electron/remote')
 
 
window.onload = function () {
    btn.onclick = () => {
        newWin = new BrowserWindow({
            width: 500,
            hieght: 500
        })
 
        newWin.loadFile('new.html')
        newWin.on('closed', () => {
            newWin = null
        })
    }
}

new.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>new html</title>
</head>
<body>
   new html
</body>
</html>

五、运行效果

electron .