1、通过 https://electron.atom.io/  下载  electron-v1.4.15-win32-x64.zip 之后

2、通过

asar pack “你的项目文件夹” app.asar 将项目压缩并改名为 app.asar

3、把自己的项目 放在 以上解压文件的 resource 文件夹下

4、点击 electron.exe 运行项目

实例项目：

　　

Electron App的目录结构如下：

your-app/

├── package.json

├── main.js

└── index.html

其中的package.json和Node Modules里表现的一样，而main.js则是启动你App的脚本，它将会开启主进程。package.json的一个例子：

{

  "name"    : "your-app",

  "version" : "0.1.0",

  "main"    : "main.js"

}

注：当package.json里不存在main时，Electron将会默认使用index.js

main.js应当创建一个窗口并处理系统事件。一个典型的例子如下：

'use strict';

const electron = require('electron');

const app = electron.app;  // 控制App生命周期的模块

const BrowserWindow = electron.BrowserWindow;  // 创建原生窗口的模块

// 保持对窗口对象的全局引用。如果不这么做的话，JavaScript垃圾回收的时候窗口会自动关闭

var mainWindow = null;

// 当所有的窗口关闭的时候退出应用

app.on('window-all-closed', function() {

  // 在 OS X 系统里，除非用户按下Cmd + Q，否则应用和它们的menu bar会保持运行

  if (process.platform != 'darwin') {

    app.quit();

  }

});

// 当应用初始化结束后调用这个方法，并渲染浏览器窗口

app.on('ready', function() {

  // 创建一个窗口

  mainWindow = new BrowserWindow({width: 800, height: 600});

  // 加载index.js

  mainWindow.loadURL('file://' + __dirname + '/index.html');

  // 打开 DevTools

  mainWindow.webContents.openDevTools();

  // 窗口关闭时触发

  mainWindow.on('closed', function() {

    // 如果你的应用允许多个屏幕，那么可以把它存在Array里。

    // 因此删除的时候可以在这里删掉相应的元素

    mainWindow = null;

  });

});

最后，index.html是你最终要展示的页面

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8">

    <title>Hello World!</title>

  </head>

  <body>

    <h1>Hello World!</h1>

    We are using node <script>document.write(process.versions.node)</script>,

    Chrome <script>document.write(process.versions.chrome)</script>,

    and Electron <script>document.write(process.versions.electron)</script>.

  </body>

</html>

运行&生成应用

通过electron-prebuilt运行

如果你通过npm全局安装了electron-prebuilt，那么在App文件目录下跑这句就可以运行它：

electron .

Electron_01的更多相关文章

随机推荐

  1. linux上安装vmtools

    在虚拟机和宿主机之间来说操作得一直按ctrl+alt,显得比较麻烦. 那么就只要安装一个工具就可以让我们的操作更加的简易,我对vmtools安装步骤做了以下图解. 在导航栏找到这个标签,选择安装vmt ...

  2. 安卓——Activity生命周期

      在xml 设计页面添加标签 xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:a ...

  3. nodejs利用sequelize-auto 根据数据库的table 生成model

    1.打开cmd命令窗口,安装sequelize-auto npm install -g sequelize-auto 在使用sequelize-auto之前需要安装全局的mysql(举例mysql) ...

  4. Jackson 工具类使用及配置指南

    目录 前言 Jackson使用工具类 Jackson配置属性 Jackson解析JSON数据 Jackson序列化Java对象 前言 Json数据格式这两年发展的很快,其声称相对XML格式有很对好处: ...

  5. vs 编译库文件 Qt编译库文件

    QT 库能不能用 需要关注是minGW 还是MSVC编译的 Qt MinGW与MSVC对比  转:https://blog.csdn.net/u013185164/article/details/48 ...

  6. 关于JAVA的一些知识点

    1.java.lang.Runtime.getRuntime().availableProcessors() Returns the number of processors available to ...

  7. linux jdk install and tomcat install

      1● linux安装jdk1.8 Download jdk1.8   export JAVA_HOME=/usr/java/jdk1.8.0_181 export JRE_HOME=${JAVA_ ...

  8. Win10系列：C#应用控件基础2

    HyperlinkButton控件 HyperlinkButton控件是以超链接文本形式显示的按钮,可以为其NavigateUri属性设置一个URI地址,当单击超链接文本按钮时,将会使用浏览器打开在H ...

  9. 浅谈Linux系统运维工程师必备技能

    一.什么是运维工程师 相信读者们必定听说过Linux,也听说过运维工程师.那么运维工程师是个什么概念呢? 百度百科上的官方解释如下: 运维工程师(Operations)在国内又称为运维开发工程师(De ...

  10. linux：NFS

    1.简介 2.安装 安装分为服务端和客户端 [1]我们先拿一台机做服务端 yum install nfs-utils rpcbind -y 然后我们查查看安装没有,查询一个包是否被安装# rpm -q ...