electron的使用和操作
文章目录
- 先创建一个基本的electron应用
- electron生命周期事件
先创建一个基本的electron应用
先安装
npm install --save-dev electron
然后在package.json里面创建如下内容
{"name": "my-electron-app","version": "1.0.0","description": "Hello World!","main": "main.js", //这里是主入口"author": "萧寂","license": "MIT","scripts": {"start": "electron ." //运行的命令},"devDependencies": {"electron": "^26.0.0"}
}
在同级创建main.js,然后在main.js中插入以下内容
const { app, BrowserWindow } = require("electron");
const createWindow = () => {// 创建窗口const win = new BrowserWindow({width: 800,height: 600,});//当前窗口显示的页面win.loadFile("index.html");
};// app启动之后创建窗口
app.whenReady().then(() => {createWindow();
});// 生命周期
// 通过on监听事件// 监听关闭的
app.on("closed", () => {console.log("当前窗口关闭");
});app.on("window-all-closed", () => {console.log("所有窗口关闭");//退出应用app.quit();
});
同级下创建index.html文件
<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><!-- https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP --><metahttp-equiv="Content-Security-Policy"content="default-src 'self'; script-src 'self'"/><title>萧寂</title></head><body><h1>你好!</h1>我们正在使用 Node.js <span id="node-version"></span>, Chromium<span id="chrome-version"></span>, 和 Electron<span id="electron-version"></span>.</body>
</html>
然后直接运行
npm start
electron生命周期事件
ready:app初始化完成
dom-ready:一个窗口中的文本加载完成
did-finsh-load:导航完成时触发
window-all-closed:所有窗口都被关闭时触发
before-quit:在关闭窗口之前触发
will-quit:在窗口关闭并且应用退出时触发
quit:当所有窗口被关闭时触发
closed:当窗口关闭时触发,此时应删除窗口引用