• 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>
  • 相关阅读:
    如何使用NuGet package .nupkg文件?
    利用Z.Expressions.Eval表达式求值
    表达式实现填写“阶段标记”属性
    NX导入DWG失败
    简单工厂模式(Simple Factory Pattern)
    电脑装系统蓝屏未解决
    idea intellij 配置总结
    poiexcel 笔记
    Springboot
    Springboot--maven命令子模块单独打包
  • 原文地址:https://www.cnblogs.com/rickyctbu/p/13670230.html
Copyright © 2020-2023  润新知