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 .