使用Web前端技术开发桌面应用

码字不易，有帮助的同学希望能关注一下我的微信公众号：Code程序人生，感谢！代码自用自取。

在这里插入图片描述

Electron Remote

渲染进程中打开新窗口

demo2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <Button id="btn">打开新的窗口</Button><br/>
    <script src="renderer/demo2.js"></script>
</body>
</html>

renderdemo2.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('remotePage.html')
         newWin.on('close',()=>{win=null})

     }
}

remotePage.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-color: aqua;">
    <h1>我是被打开的remotePage页面</h1>
</body>
</html>

main.js

mainWindow = new BrowserWindow({
    width:900,
    height:900,
    webPreferences:{
        nodeIntegration: true, // 是否集成 Nodejs
    }
})

NodejswebPreferencesnodeIntegrationtrueNodejsremoteenableRemoteModuletrue

mainWindow = new BrowserWindow({
    width:900,
    height:900,
    webPreferences:{
        nodeIntegration: true, // 是否集成 Nodejs
        enableRemoteModule: true  // 这句必须要有,否则 require("electron").remote.BrowserWindow;是空
    }
})

这样就没有问题了。

electron .electron remote

有微信小程序课设、毕设需求联系个人QQ：505417246

关注下面微信公众号，可以领取微信小程序、Vue、TypeScript、前端、uni-app、全栈、Nodejs、Python等实战学习资料
最新最全的前端知识总结和项目源码都会第一时间发布到微信公众号，请大家多多关注，谢谢
在这里插入图片描述