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. vivadio关联notepad++的关键式

    D:\Program Files\Notepad++\notepad++.exe +[line number] [file name]

  2. Oracle 11.2.0.4.0 Dataguard部署和日常维护(5)-Datauard 主备切换和故障转移篇

    1. dataguard主备切换   1.1. 查看当前主备库是否具备切换条件 on slave select sequence#,first_time,next_time,archived,appl ...

  3. ECharts 报表事件联动系列四：柱状图，折线图，饼状图实现联动

    代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

  4. Day2----Jmeter 压测

    一.jmeter 压测1.一般压测时间为10-15分钟就行,设置时间在调度器配置--持续时间中设置,例如:想压10分钟,则持续时间输入:600 1.线程数:发送请求的用户数,即并发数 2.Ram-up ...

  5. 使用Redis数据库（1）（三十三）

    Spring Boot中除了对常用的关系型数据库提供了优秀的自动化支持之外,对于很多NoSQL数据库一样提供了自动化配置的支持,包括:Redis, MongoDB, Elasticsearch, So ...

  6. h5的坑

    转自 http://www.mahaixiang.cn 解决各种坑 http://www.mahaixiang.cn/ydseo/1529.html

  7. js之单例

    所谓单例,指的是只有一个实例的对象. js通过对象字面量的方式来创建单例对象. var sig = { name:value, method:function(){ } }

  8. laravel获取当前的url以及当前的基础域名方法汇总

    原文地址:https://phpartisan.cn/news/58.html 来源于:laravel获取当前的url以及当前的基础域名方法汇总 - Laravel学习网 laravel中我们常常需要 ...

  9. learning ddr RTT

    Rtt: Dynamic ODT.DDR3引入的新特性.在特定的应用环境下为了更好的在数据总线上改善信号完整性, 不需要特定的MRS命令即可以改变终结强度(或者称为终端匹配).在MR2中的A9和A10 ...

  10. (路-莫)-Python基础一

    一,Python介绍 1,python的出生与应用 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆(中文名字:龟叔)为了在阿姆斯特丹打 ...