Electron学习

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>