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. 四则运算web最终版

    经过若干时间的奋战,终于完成了web版四则运算程序.团队成员:井小普.张贺. 设计思想: 在之前的程序基础上两人结合开发web系统. 首先,进行登录注册界面的编写,不同用户,对应不同的错题库,答题记录 ...

  2. 15. 3Sum C++

    参考资料: https://leetcode.com/problems/3sum/discuss/7402/Share-my-AC-C%2B%2B-solution-around-50ms-O(N*N ...

  3. [LeetCode] 104. Maximum Depth of Binary Tree ☆(二叉树的最大深度)

    描述 Given a binary tree, find its maximum depth. The maximum depth is the number of nodes along the l ...

  4. 网页定位点击事件js响应函数教程（Chrome）

    一.背景说明 在前端页面调试或者渗透测试(尤其是XSS)时,我们经常想定位js函数位置:比如点击了某个位置弹出了一个对话框,这是哪个文件的哪个js函数在响应. 本文以Chrome浏览器定位点击事件响应 ...

  5. Win32汇编环境搭建教程（MASM32 SDK）

    一.说明 常用的32位汇编编译器有微软的MASM.Borland的TASM和NASM. 编译器 开发者 优点 缺点 MASM 微软 微软自家软件和系统兼容性好:支持invoke/.if等伪指令将汇编变 ...

  6. radio选择

    input标签radio单选 <tr> <th style="font-weight: bolder;text-align: right;width:18%" & ...

  7. Win10系列：VC++绘制文本

    20.7.2小节介绍了如何使用Direct2D在应用窗口中绘制图片,本小节将基于20.7.2小节的项目进一步介绍如何实现文本的绘制.打开D2DBasicAnimation.h头文件,并在D2DBasi ...

  8. 设计一个高质量的API接口

    参考网址:http://url.cn/5UaTeyv 前言 在设计接口时,有很多因素要考虑,如接口的业务定位,接口的安全性,接口的可扩展性.接口的稳定性.接口的跨域性.接口的协议规则.接口的路径规则. ...

  9. js 动态绑定鼠标事件

    <script> function getElementsByClassName(n) { var classElements = [],allElements = document.ge ...

  10. Java 从服务器下载文件到本地（页面、后台、配置都有）

    先来看实现效果: 有一个链接如下: 点击链接下载文件:  第一种方法:Servlet实现 一.HTML页面部分: 1.HTML页面中的一个链接 <a id="downloadTempl ...