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. canvas的Chart图表插件

    今天写页面页面需求到柱状图标,今天介绍一下我所用的Chart.js图表插件 官网:http://www.bootcss.com/p/chart.js/         里面会有下载js文件和中文文档 ...

  2. Java 之初(1)

    省赛结束之后有相当长一段空闲时间,于是就想先提前自学一点Java语言的知识,在这里纪录一下学习过程,希望能给自学Java的同学提供一点小帮助!(当然,也能方便我以后的复习用^_^) 在学习过程中有什么 ...

  3. SpringBoot框架下基于Junit的单元测试

    前言 Junit是一个Java语言的单元测试框架,被开发者用于实施对应用程序的单元测试,加快程序编制速度,同时提高编码的质量.是一个在发展,现在已经到junit5,在javaEE开发中与很多框架相集成 ...

  4. C++中long是什么类型

    long long本质上还是整型,只不过是一种超长的整型. int型:32位整型,取值范围为-2^31 ~ (2^31 - 1) .long:在32位系统是32位整型,取值范围为-2^31 ~ (2^ ...

  5. 【转】My App Crashed, Now What? – Part 1

    原文地址:http://www.raywenderlich.com/10209/my-app-crashed-now-what-part-1  By Matthijs Hollemans on Mar ...

  6. androidcarsh

    package com.oval.cft; import java.io.File;import java.io.FileOutputStream;import java.io.PrintWriter ...

  7. BASE64编码的字符进行URL传输丢失特殊字符的问题

    因为BASE64的编码里含有“+”号等特殊字符,在url传输的时候会把+号编程空格,解决这个问题的方法: 请求时把BASE64编码进行url的编码再进行传输 接收时把BASE64编码进行url的解码 ...

  8. linux 软连接和硬链接示意图

    创建软连接 ln -s 1.txt 1-softlink.txt 创建硬链接 ln 1.txt 1-hardlink.txt

  9. Linux下分布式项目部署环境搭建与使用(druid-1.0.25.jar)数据库连接加密

    一.JDK安装 1.执行命令:cd Downloads/ 2.上 传:jdk-8u111-linux-x64.tar.gz 到Downloads 3.执行命令:tar -zxvf jdk-8u111- ...

  10. [问题记录]cocos的lua绑定安装pyyaml报错

    描述:按照readme中的文档操作报错,提示python2.7没有安装,但是确实已经安装了,而且也设置环境变量成功了. 解决: 在D盘新建register.py的文件,内容如下: # # script ...