目录结构与文件
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
是你最终要展示的页面
Hello World! Hello World!
We are using node , Chrome , and Electron .
运行&生成应用
通过electron-prebuilt
运行
如果你通过npm
全局安装了electron-prebuilt
,那么在App文件目录下跑这句就可以运行它:
electron .
如果只是在当前项目下安装了,则要跑:
./node_modules/.bin/electron .
通过Electron Binary运行
在这儿下载
打开包内的App按照提示操作,或者在该文件夹下运行:
$ ./Electron.app/Contents/MacOS/Electron your-app/
就可以通过这个包来运行自己的应用了。
生成应用
应用写完以后,可以参照里的指导进行打包:
项目文件名应该命名为
app
下载Electron资源文件。就是上一步里面的
把项目目录放在Electron资源文件夹下
Mac OS X:
electron/Electron.app/Contents/Resources/app/├── package.json├── main.js└── index.html
Windows & Linux:
electron/resources/app├── package.json├── main.js└── index.html
之后运行Electron.app
就能启动应用
现在,你的应用名称为默认的Electron.app
(或Electron.exe
),可以通过如下方式修改名称:
Windows
直接修改Electron.exe
的名称
OS X
修改应用
Electron.app
的名称修改文件中的
CFBundleDisplayName
,CFBundleIdentifier
,以及CFBundleName
字段。它们的所在位置:
Electron.app/Contents/Info.plist
`Electron.app/Contents/Frameworks/Electron Helper.app/Contents/Info.plist
`
应用打包
使用asar
库来替代你的app
文件夹,这样可以避免暴露你的源码。
生成asar
包
asar
可以把多个文件合并成一个类似于tar的归档文件。
install
$ npm install -g asar
打包
切换到含有你项目文件夹的父级文件夹
# dev/your-app$ cd dev
打包项目
$ asar pack your-app/ app.asar
将生成的app.asar
放在:
// OS Xelectron/Electron.app/Contents/Resources/└── app.asar// Windows & Linuxelectron/resources/└── app.asar
这样你就可以不必放入app
文件夹,而且你的代码都是封装压缩过的。
例子
按照下面步骤来运行官方案例:
# Clone the repository$ git clone https://github.com/atom/electron-quick-start# Go into the repository$ cd electron-quick-start# Install dependencies and run the app$ npm install && npm start