1 开发环境:node环境

2 下载electron:npm install electron --save-dev

3 package.json配置如下:

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "electron ."
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^4.0.1"
  }
}

4 index.js代码如下:

const {app,BrowserWindow } = require("electron");
let win;

function createWindow() {
    //创建一个新窗口
    win = new BrowserWindow({
        //充满全屏
        webPreferences: {
            nodeIntegration: false
        },
        fullscreen:true
    });
    //加载主页面

    win.loadFile("./client-small-screen-show.html");
    //打开开发者工具
    win.webContents.openDevTools();
    //创建的窗口关闭
    win.on('closed', () => {
        // 取消引用 window 对象,如果你的应用支持多窗口的话,
        // 通常会把多个 window 对象存放在一个数组里面,
        // 与此同时,你应该删除相应的元素。
        win = null
    })
}
app.on("open-file",()=>{
    console.log(arguments);
});
//程序准备完成
app.on('ready', createWindow);
//程序的所有窗口关闭
app.on('window-all-closed', () => {
    // 在 macOS 上,除非用户用 Cmd + Q 确定地退出,
    // 否则绝大部分应用及其菜单栏会保持激活。
    if (process.platform !== 'darwin') {
        app.quit()
    }
});
//点击托盘图标的时候
app.on('activate', () => {
    // 在macOS上,当单击dock图标并且没有其他窗口打开时,
    // 通常在应用程序中重新创建一个窗口。
    if (win === null) {
        createWindow()
    }
});
//程序退出之前
app.on("before-quit",()=>{
    console.log("haha1");
});

5 执行:npm srart,运行结果如下

第一个electron的更多相关文章

  1. 打造你的第一个 Electron 应用

    Electron 可以让你使用纯 JavaScript 调用丰富的原生(操作系统) APIs 来创造桌面应用. 你可以把它看作一个 Node. js 的变体,它专注于桌面应用而不是 Web 服务器端. ...

  2. 一个Electron的设计缺陷及应对方案

    当你想实现阻止Electron窗口关闭,并弹出询问对话框,提示用户:"文章尚未保存,是否要关闭窗口"这类业务时,那么你99%会碰到这个BUG: https://github.com ...

  3. 自己实现一个Electron跨进程消息组件

    我们知道开发Electron应用,难免要涉及到跨进程通信,以前Electron内置了remote模块,极大的简化了跨进程通信的开发工作,但这也带来了很多问题,具体的细节请参与我之前写的文章: http ...

  4. 使用electron开发一个h5的客户端应用创建http服务模拟后台接口mock

    使用electron开发一个h5的客户端应用创建http服务模拟后端接口mock 在上一篇<electron快速开始>里讲述了如何快速的开始一个electron的应用程序,既然electr ...

  5. electron之Windows下使用 html js css 开发桌面应用程序

    1.atom/electron github: https://github.com/atom/electron 中文文档: https://github.com/atom/electron/tree ...

  6. electron打包发布

    1.全局安装electron npm install electron -g 在cmd 直接输入 electron 直接启electron 2.编写第一个Electron应用 在任何地方,建立一个ap ...

  7. 使用 AngularJS 和 Electron 构建桌面应用

    GitHub 的 Electron 框架(以前叫做 Atom Shell)允许你使用 HTML, CSS 和 JavaScript 编写跨平台的桌面应用.它是io.js 运行时的衍生,专注于桌面应用而 ...

  8. 使用Squirrel创建基于Electron开发的Windows 应用安装包

    我们把自己开发的Electron应用发布之前,需要把app打包成简单的安装包,这样app更容易被获取,以此来发布我们的应用.我们可以参考Wix或其他的安装程序,但是对于Electron应用更好的打包程 ...

  9. Electron(一)--初步了解并动手HelloWorld

    现在需要做一个桌面应用,心里有点不甘,因为想做出一个简单的客户端,你要么使用Java的Swing编程,要么会使用MFC等等,这样学习的代价太高,也不便维护,于是了解了一下Electron,Electr ...

随机推荐

  1. MYSQL数据库索引类型及使用

    MYSQL数据库索引类型包括普通索引,唯一索引,主键索引与组合索引,这里对这些索引的做一些简单描述: (1)普通索引 这是最基本的MySQL数据库索引,它没有任何限制.它有以下几种创建方式: 创建索引 ...

  2. HTML学习笔记《二》 ----HTML部分标签应用

    HTML 部分标签应用 一.HTML中的注释.标签语法以及颜色表示方式 1.HTML中注释: <!-- .... --> 注释的目的:1. 辅助说明 2.代码调试(不同编程语言,注释方式略 ...

  3. [小北De编程手记] : Lesson 03 - Selenium For C# 之 元素定位

    无论哪一种自动化测试的驱动框架(基于B/S,桌面应用,还是手机App).都应当具有一套优秀的元素定位技术.通常的自动化测试流程也可以简单的归结为是一个从被测试程序中识别或是定位元素以及执行操作和验证元 ...

  4. 【JAVA语法】04Java-多态性

    多态性 instanceof 关键字 接口的应用 一.多态性 1.多态性的体现: 方法的重载和重写 对象的多态性 2.对象的多态性: 向上转型: 程序会自动完成 父类 父类对象 = 子类实例 向下转型 ...

  5. JavaScript中的appendChild()方法

    appendChild()方法是向节点添加最后一个子节点.也可以使用此方法从一个元素向另一个元素移动元素. 案例一:向节点添加最后一个子节点 <!DOCTYPE html> <htm ...

  6. FPGA学习系列 各种门器件程序积累

    1. 两输入与(and)门 entity and2gate is Port ( x : in STD_LOGIC; y : in STD_LOGIC; z : out STD_LOGIC);end a ...

  7. .net正在终止线程异常

    try{sting host = context.Request.UrlReferrer.Host;if ( 程序判断){ context.Response.Clear();context.Respo ...

  8. 学习Road map Part 03 编程和算法

    方法: 优先重复已学过的内容 写学习笔记

  9. MongoDB创建集合、删除集合

    创建集合 createCollection() 方法 在 MongoDB 中,创建集合采用 db.createCollection(name, options) 方法. 语法格式 createColl ...

  10. Allocate exception for servlet ValidateUsernameServlet 异常

    如果eclipse无法对类文件进行编译那么运行时就会发生 Allocate exception for servlet ValidateUsernameServlet 异常,说找不到类.