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. 第二阶段——个人工作总结DAY10

    1.昨天做了什么:昨天其实什么也没实现. 2.今天打算做什么:今天就软件,等到审核过了,再看看软件最后后台是怎么实现的. 3.遇到的困难:后台自己都没有实现.

  2. Django之转发和重定向

    https://blog.csdn.net/gscsd_t/article/details/79389167 转发和重定向: 转发:一次请求和响应,请求的地址没有发生变化,如果此时刷新页面,就会出现重 ...

  3. php 字符编码转换

    <?php/** * Created by PhpStorm. * User: yxp * Date: 2016/11/8 * Time: 16:47 */ /** * 将非GBK字符集的编码转 ...

  4. jquery获取和设置值

    1.html html() :   取得第一个匹配元素的html内容. html(value): 设置每一个匹配元素的html内容 2text text() :  取得所有匹配元素的内容,结果是由所有 ...

  5. Oracle传输表空间介绍

    传输表空间通过拷贝数据文件的方式,实现可跨平台的数据迁移,效率远超expdp/impdp, exp/imp等工具.还可以应用跨平台&数据库版本迁移表数据.归档历史数据和实现表空间级时间点数据恢 ...

  6. jqgrid取所有行的值,jqgrid取行对应列(name)的值,jqgrid取多行值对应列转json的方法

    1.jqgrid取所有行的值(#gridTable指对应table的ID) var obj = $("#gridTable").jqGrid("getRowData&qu ...

  7. spring多个AOP执行先后顺序(面试问题:怎么控制多个aop的执行循序)

    转载:spring多个AOP执行先后顺序(面试问题:怎么控制多个aop的执行循序) 众所周知,spring声明式事务是基于AOP实现的,那么,如果我们在同一个方法自定义多个AOP,我们如何指定他们的执 ...

  8. httpd.conf文件格式解析

    apache http server,俗称apache,程序名httpd,默认配置文件/etc/httpd/conf/httpd.conf:该文件通过其中的Include conf.d/*.conf指 ...

  9. 微信订阅号,获取用户openid

    在微信后台,启用服务器配置. 服务器URL地址,要通过Token的验证. private void Auth() { string token = ConfigurationManager.AppSe ...

  10. sql中,如何获取一个数的整数部分和余数部分

    我们测试一下,我要得到的结果是多少周(整数),多少天(余数) 1.获取指定日期到当前日期之间的天数 首先用DATEDIFF() 函数获取指定日期到当前日期的天数 --获取指定日期到当前日期的天数 se ...