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. Oracle PL/SQL游标

    游标的提出: SQL是面向集合的,其结果一般是集合量(多条记录),而PL/SQL的变量一本是标量,其一组变量异常一直只能存放一条记录.所以仅仅使用变量并不能完全满足SQL语句向应用程序输出数据的要求. ...

  2. Oracle11g温习-第十一章：管理undo

    2013年4月27日 星期六 10:40 1.undo tablespace 功能 undo tablespace 功能:用来存放从datafiles 读出的数据块旧的镜像 [             ...

  3. python安装MySQLdb(即mysql-Python)模块的一些问题

    1.超时问题 如果出现:ReadTimeoutError: HTTPSConnectionPool(host='pypi.python.org', port=443): Read timed out ...

  4. Mybatis中，当插入数据后，返回最新主键id的几种方法，及具体用法

    insert元素 属性详解 其属性如下: parameterType ,入参的全限定类名或类型别名 keyColumn ,设置数据表自动生成的主键名.对特定数据库(如PostgreSQL),若自动生成 ...

  5. Linux pwn入门教程——CTF比赛

    Linux pwn入门教程(1)——栈溢出基础 from:https://zhuanlan.zhihu.com/p/38985585   0x00 函数的进入与返回 要想理解栈溢出,首先必须理解在汇编 ...

  6. Intel daal数据预处理

    https://software.intel.com/en-us/daal-programming-guide-datasource-featureextraction-py # file: data ...

  7. C/C++ 运算符优先级（转载）

    最讨厌这个了.在这里记录下. 优先级 操作符 描述 例子 结合性 1 ()[]->.::++-- 调节优先级的括号操作符数组下标访问操作符通过指向对象的指针访问成员的操作符通过对象本身访问成员的 ...

  8. How can I perform the likelihood ratio, Wald, and Lagrange multiplier (score) test in Stata?

      http://www.ats.ucla.edu/stat/stata/faq/nested_tests.htm The likelihood ratio (lr) test, Wald test, ...

  9. laravel 连表查询数据库

    $this->model ->select($field) ->leftJoin('b', 'b.cid', '=', 'a.id') ->orderBy("a.ad ...

  10. Uva LA 3902 - Network 树形DP 难度: 0

    题目 https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page=show_pr ...