render.js
console.log("render.js");
//渲染进程不能直接引入BrowserWindow模块 借助remote模块,从remote中拿到主进程允许使用的模块
const { BrowserWindow } = require('electron').remote;
let btn = document.querySelector("#btn");
btn.onclick = function () {
console.log("btn");
let win = new BrowserWindow({
});
};
index.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>news</title>
</head>
<body>
<h1>hello</h1>
<input id="btn" type="button" value="点我啊" >
<!--1 引入render.js -->
<!-- <script src="./render-process/render.js" ></script> -->
<!-- electron 基于node -->
<script>
require('./render-process/render.js')
</script>
<!-- 区别 require 引入的文件的最外层的变量不是全局变量 src引入的是全局变量 -->
</body>
</html>
main.js
//创建窗口
//引入模块
//app模块 : 控制应用的生命周期
// BrowserWindow 模块:创建一个浏览器窗口
const { app, BrowserWindow } = require('electron');
//nodejs 内置模块 拼接路径
const path = require('path');
//1. 初始化应用,会触发监听 ready 事件
app.on('ready', zl_createWindow);
let win;
//创建窗口 自定义方法
function zl_createWindow() {
//创建窗口
win = new BrowserWindow({
width:600,
height:600,
movable:true,//是否可以移动
resizable:false,//是否可以放大 缩小
webPreferences:{
nodeIntegration:true,//是否集成 Nodejs
}
});
//加载内容
// win.loadURL('https://baidu.com');
//加载本地html
//_dirname 当前js文件所在的路径
win.loadURL(path.join(__dirname,'./index.html'));
//webcontents 控制和渲染页面的 也是一个属性
//调试工具
win.webContents.openDevTools();
//关闭窗口
win.on('close',function(){
//关闭窗口前想做的事
win = null;
});
//引入设置菜单文件
require('./menu');
}
//执行文件 3种方式
//1. electron main.js
//2. electron .
//3. 添加一个脚本 :package.json
console.log("main");
//在主进程里面打印的数据在终端中显示
//在渲染进程里面打印的数据在页面中显示