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 .