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. blog项目知识点梳理

    1.获取图片验证码: def get_validCode_img(request): # 方式1: # import os # path= os.path.join(settings.BASE_DIR ...

  2. miniui 使用心得

    MiniUI demo实例使用心得:1.渲染速度很快2快速维护数据 3多种编辑方式 如 弹窗 直接下方显示form 下方显示tab 等4.树形 编辑 联动 5验证表单6文本框内 选择框 保存的多个选项 ...

  3. HTTP及RFC解析。

    HTTP协议描述的是发送方与接收方的通信协议,通过两方的自觉遵守而存在,当然有不少的浏览器并没有百分百遵守这份协议.HTTP是运行于应用层的协议,基于TCP协议而运作.基本上是客户/服务器对答模式,其 ...

  4. Python3模块-random、hashlib和base64

    random模块 random.random()用于生成一个浮点数x,范围为0 =< x < 1 import random >>>print(random.random ...

  5. 3.Liunx网络管理命令

    大纲: 1.网络信息:hostname.netstat.ifconfig ,route 2.网络配置:netconfig 3.网络测试:ping

  6. volatile原理解析

    Java并发编程:volatile关键字解析 volatile 有序性.可见性 volatile可以保证一定程度上有序性,即volatile前面的代码先于后面的代码先执行. 但是前.后代码,各自里面的 ...

  7. nodejs sequelize 对应数据库操作符的定义

    const Op = Sequelize.Op [Op.and]: {a: } // 且 (a = 5) [Op.or]: [{a: }, {a: }] // (a = 5 或 a = 6) [Op. ...

  8. Mac下安装和配置Maven

    1.下载Maven 官网:http://maven.apache.org/download.cgi 下载版本:apache-maven-3.5.3-bin.tar.gz 2.配置环境变量 打开term ...

  9. zabbix3.4.7监控linux进程

    利用zabbix proc.num方法监控Linux服务进程 proc.num[<name>,<user>,<state>,<cmdline>] 监控用 ...

  10. nyoj-0708-ones(dp)

    nyoj-0708-ones 题意:用1,+,*,(,). 这四个符号组成表达式表达数s(0 <= s <= 10000),且1最少时1的的个数 状态转移方程: dp[i] = min(d ...