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. vue3.0 配置公共请求地址

    正常请求接口: return request({ url: 'http://192.168.1.0/User/cancelUpgrade', method: 'get', params: data } ...

  2. php导出大数据scv

    1.我系统要导出30w的数据,刚开始我使用的是: ini_set('memory_limit', '1024M');set_time_limit(0); header("Content-ty ...

  3. Hash应用例子

    八.Hash应用例子搜索引擎会通过日志文件把用户每次检索使用的所有检索串都记录下来,每个查询串的长度为1-255字节.假设目前有一千万个记录(这些查询串的重复度比较高,虽然总数是1千万,但如果除去重复 ...

  4. sharding-jdbc读写分离原理解读

    原帖地址:https://blog.csdn.net/yanyan19880509/article/details/78170233 前言 很多时候,为了应付DB的高并发读写,我们会采用读写分离技术. ...

  5. CRM WEB UI 04明细界面添加按钮

    好了,这个是个人测试玩的,略风骚...请自行鉴阅 1.明细的组件控制器中增加全局控制属性字段: 2.概览页中工具栏相关方法,重定义GET_BUTTONS METHOD IF_BSP_WD_TOOLBA ...

  6. ThinkPHP3自动加载公共函数文件

    7d 根目录 ├─Application 应用目录 │ ├─Common 公共模块 │ │ ├─Common 公共函数文件目录 │ │ │ ├─index.html │ │ ├─Config 配置文件 ...

  7. 时间序列(六): 炙手可热的RNN: LSTM

    目录 炙手可热的LSTM 引言 RNN的问题 恐怖的指数函数 梯度消失* 解决方案 LSTM 设计初衷 LSTM原理 门限控制* LSTM 的 BPTT 参考文献: 炙手可热的LSTM 引言 上一讲说 ...

  8. [CodeForces - 614D] D - Skills

    D - Skills Lesha plays the recently published new version of the legendary game hacknet. In this ver ...

  9. List Available DBCC Commands

    DBCC Commands or Database Consistency Checker commands have been with SQL Server from its early ages ...

  10. Nodejs+mysql+Express: 一个简单的博客

    推荐网址: https://github.com/nswbmw/N-blog/blob/backup/book/%E7%AC%AC1%E7%AB%A0%20%E4%B8%80%E4%B8%AA%E7% ...