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. js异常处理

    <script> function myFunction() { try { var x=document.getElementById("demo").value; ...

  2. js 处理 cookie的存储与删除

    <script> //JS操作cookies方法! //写cookies function setCookie(c_name, value, expiredays){ var exdate ...

  3. java.sql.SQLException: Parameter index out of range (3 > number of parameters, which is 2).

    java.sql.SQLException: Parameter index out of range (3 > number of parameters, which is 2). java. ...

  4. iOS架构设计系列之解耦的尝试之变异的MVVM

    最近一段时间,在思考如何合理的架构一个可扩展性良好的界面编程方式.这一部分的成果做成了一个叫ElementKit的库.目前功能在不断的完善中. 关于iOS的架构,看多了MVVM,VIPER,MVC,M ...

  5. Android 编码规范

    1.文件编码:UTF-8 源文件编码格式为 UTF-8. 2.数组初始化:可写成块状结构 数组初始化可以写成块状结构,比如,下面的写法都是OK的: new int[] { 0, 1, 2, 3 } n ...

  6. 文献管理软件zotero的一点使用感受作者： 杨林畅

    作者是我的本科同学叶家鑫 http://www.renren.com/profile.do?id=240875124 文章写于去年12月,我做了一些排版上的修改,括号内的蓝字为我所加 ---- zot ...

  7. Ubuntu Windows双系统重装windows后看不到ubuntu启动引导

    1.下载并安装Easy BCD 2.点击编辑引导菜单,看到只有windows一项 3.点击“添加新条目”,添加引导菜单,选择linux/bsd ,类型选择GRUB 2,然后输入名称,选择Ubuntu所 ...

  8. React中禁止chrome填充密码表单

    当 input 的 type="password" 时,chrome浏览器会以 type="password" 为标识记住输入的用户名和密码, 如果chrome ...

  9. redis：集群配置

    一.redis集群相关 1.概念:redis集群是通过数据分区提供可用性的,这样即使一部分节点失效也可以继续处理请求. 2.原理:集群使用数据分片实现,一个redis集群包括16384个哈希槽,数据库 ...

  10. JavaScript -基础- 函数与对象（三）Date对象

    一.Date对象 1.创建方法 var date_obj=new Date(); alert(date_obj.toLocaleString()) var date_obj=new Date(&quo ...