1、Electron的特性
- 支持多窗口应用，每一个窗口都会有自己独立的Javascript上下文
- 通过屏幕API整合桌面系统特性，与本地开发语言编写的桌面应用的效果类似
- 支持计算机的电源状态
- 支持阻止操作系统进入省电模式，对于一些演示文稿类的应用非常有用
- 支持创建托盘应用
- 支持创建菜单和菜单项
- 支持为应用增加全局键盘快捷键
- 支持热更新
- 支持回报程序崩溃
- 支持之定义的Dock菜单项
- 支持操作系统通知
- 支持为应用程序创建启动安装器
2、入门案例
js部分
import { app, BrowserWindow } from "electron";
import * as Path from "path";
import { initConfig } from "./config";
const createWindow = (): void => {
/**
* 创建浏览器窗口
*/
let win: BrowserWindow = new BrowserWindow(initConfig);
win.loadFile(Path.resolve('.', 'view/index.html'));
//表示当前窗口关闭调用事件
win.on("close", () => {
console.log("are you ok???");
})
//表示当前窗口关闭后调用事件
win.on("closed", () => {
console.log("this is window closed");
})
// win.webContents.openDevTools(); //是否打开调试工具
};
// Electron会在初始化完成并且准备好创建浏览器窗口时调用这个方法
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(createWindow)
/**
* 所有窗口关闭的事件
*/
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
/**
* 窗口激活后的事件
*/
app.on('activate', () => {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
配置部份
export const initConfig = {
800,
height: 600,
}
html部份
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>myElectron</title>
</head>
<body>
<div>today is good day!</div>
</body>
</html>