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. js的函数作用域跟块级作用域

    js的函数作用域跟块级作用域(原文地址:http://blog.csdn.net/huangjq36sysu/article/details/51085674)

  2. jQuery对html元素取值与赋值

    以下总结了常用的jQuery选择器对html元素取值与赋值 Textbox:  var str = $('#txt').val(); $('#txt').val("Set Lbl Value ...

  3. 22_CopyOnWrite容器

    [简述] Copy-On-Write简称COW,是一种程序设计中的优化策略. JDK里的COW容器分为两种:CopyOnWriteArrayList 和 CopyOnWriteArraySet. Co ...

  4. 139.00.006 Git学习-标签管理Tag

    @(139 - Environment Settings | 环境配置) 一.Why 发布一个版本时,我们通常先在版本库中打一个标签(tag),这样,就唯一确定了打标签时刻的版本.将来无论什么时候,取 ...

  5. 从Event Loop谈JS的运行机制

    这里主要是结合Event Loop来谈JS代码是如何运行的. 事件循环对于我们平时开发可以说是特别重要,可以让我们写出更好的代码. 到这里相信我们已经知道了JS引擎是单线程,而且这里会用到前面说的的几 ...

  6. zookeeper 的监控工具

    zookeeper 的监控工具         公司很多产品会使用zookeeper,比如Meta消息中间件,在测试的过程中,我们经常需要查询zookeeper里面的信息来精确定位问题.目前项目中有开 ...

  7. Struts2学习-json

    Struts2 实现JSON输出有2种办法1.把Action变成Servlet,使用传统做法2.使用Struts 内置功能完成 二. 1.导入配置,pom.xml,要去struts2的官网下载mvnr ...

  8. php 汉字转拼音函数

    function Pinyin($_String, $_Code='UTF8'){ //GBK页面可改为gb2312,其他随意填写为UTF8 $_DataKey = "a|ai|an|ang ...

  9. ZT————pull push mode

    谁能讲讲push和pull模式是什么意思?(参与有分) [问题点数:100分,结帖人mickeyfirst] 收藏 mickeyfirst mickeyfirst 等级: 结帖率:94.12% 楼主 ...

  10. Oracle Update语句

    Oracle没有update from语法,可以通过四种写法实现同样的功能: 一.标准update语法(常用.速度可能最慢) 当更新的表示单个或者被更新的字段不需要关联表带过来,此法是最好的选择. u ...