0
点赞
收藏
分享

微信扫一扫

3.Electron之remote,打开新窗体

刘员外__ 2022-04-24 阅读 61
electron

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 .

 

举报

相关推荐

0 条评论