Electron_01
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的更多相关文章
随机推荐
- 第二阶段——个人工作总结DAY10
1.昨天做了什么:昨天其实什么也没实现. 2.今天打算做什么:今天就软件,等到审核过了,再看看软件最后后台是怎么实现的. 3.遇到的困难:后台自己都没有实现.
- Django之转发和重定向
https://blog.csdn.net/gscsd_t/article/details/79389167 转发和重定向: 转发:一次请求和响应,请求的地址没有发生变化,如果此时刷新页面,就会出现重 ...
- php 字符编码转换
<?php/** * Created by PhpStorm. * User: yxp * Date: 2016/11/8 * Time: 16:47 */ /** * 将非GBK字符集的编码转 ...
- jquery获取和设置值
1.html html() : 取得第一个匹配元素的html内容. html(value): 设置每一个匹配元素的html内容 2text text() : 取得所有匹配元素的内容,结果是由所有 ...
- Oracle传输表空间介绍
传输表空间通过拷贝数据文件的方式,实现可跨平台的数据迁移,效率远超expdp/impdp, exp/imp等工具.还可以应用跨平台&数据库版本迁移表数据.归档历史数据和实现表空间级时间点数据恢 ...
- jqgrid取所有行的值,jqgrid取行对应列(name)的值,jqgrid取多行值对应列转json的方法
1.jqgrid取所有行的值(#gridTable指对应table的ID) var obj = $("#gridTable").jqGrid("getRowData&qu ...
- spring多个AOP执行先后顺序(面试问题:怎么控制多个aop的执行循序)
转载:spring多个AOP执行先后顺序(面试问题:怎么控制多个aop的执行循序) 众所周知,spring声明式事务是基于AOP实现的,那么,如果我们在同一个方法自定义多个AOP,我们如何指定他们的执 ...
- httpd.conf文件格式解析
apache http server,俗称apache,程序名httpd,默认配置文件/etc/httpd/conf/httpd.conf:该文件通过其中的Include conf.d/*.conf指 ...
- 微信订阅号,获取用户openid
在微信后台,启用服务器配置. 服务器URL地址,要通过Token的验证. private void Auth() { string token = ConfigurationManager.AppSe ...
- sql中,如何获取一个数的整数部分和余数部分
我们测试一下,我要得到的结果是多少周(整数),多少天(余数) 1.获取指定日期到当前日期之间的天数 首先用DATEDIFF() 函数获取指定日期到当前日期的天数 --获取指定日期到当前日期的天数 se ...