cnpm init -y
cnpm i electron -D //安装electron
package.json
{
"name": "news-windows",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "electron ."
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"electron": "^6.1.3"
}
}
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:1300,
height:1300,
movable:true,//是否可以移动
resizable:false,//是否可以放大 缩小
});
//加载内容
// 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;
});
}
//执行文件 3种方式
//1. electron main.js
//2. electron .
//3. 添加一个脚本 ：package.json
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>
</body>
</html>
