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. 如何让div覆盖canvas元素

    第一步 请让该div和canvas同样处于同一画布,都用position:absolute; 然后设置canvas的z-index="-1",是的,你没看错 然后把要覆盖canva ...

  2. 消息循环中的TranslateMessage函数和DispatchMessage函数,特别注意WM_TIMER消息

    原文:http://www.cnblogs.com/xingrun/p/3583357.html TranslateMessage函数 函数功能描述:将虚拟键消息转换为字符消息.字符消息被送到调用线程 ...

  3. xlwings: Write Excel macro using python instead of VBA

    i want to write Excel macros to deal with the data, but i am not familiar with VBA language. so i de ...

  4. html5自我总结

    2017年7月30日 合抱之木,生于毫末.九层之台,起于累土.软件行业要熟记和训练的东西有很多,在此,写一下如何快速搭建html及自我见解(这里只介绍我自己用到的,还有部分存在但是用不到的就不讲解了) ...

  5. 使用UIWebView中html标签显示富文本

    使用UIWebView中html标签显示富文本 用UIWebView来渲染文本并期望达到富文本的效果开销很大哦! Work 本人此处直接加载自定义字体"新蒂小丸子体",源码不公开, ...

  6. [问题记录]libpomelo的安装

    1. 描述: 按照github上的操作完成 Windows in your libpomelo project root directory open git bash and type in mkd ...

  7. Docker_2 常用命令

    Docker的组成 容器与镜像 docker常用命令 辅助信息 Docker的组成 Docker Daemon Docker Client Docker Hub 使用Docker Client时,输入 ...

  8. linux中进入mysql时报错Access denied for user 'root'@'localhost' (using password: YES)解决方案

    之前在linux中装完mysql后直接在命令行窗口输入mysql就会进入数据库了,但是今天输入mysql命令后直接报错,如下图: 之后输入:mysql -uroot -p 提示输入密码:***** 还 ...

  9. 【转】Java中的String,StringBuilder,StringBuffer三者的区别

    https://www.cnblogs.com/su-feng/p/6659064.html 最近在学习Java的时候,遇到了这样一个问题,就是String,StringBuilder以及String ...

  10. 【深入理解JAVA虚拟机】第二部分.内存自动管理机制.1.内存区域

    1.内存区域 根据<Java虚拟机规范(Java SE 7版)> 的规定,Java虚拟机所管理的内存将会包括以下几个运行时数据区域,如图所示.  程序计数器 当前线程所执行的字节码的行号指 ...