提起构建桌面应用，最先想到的肯定是 NW.js ，但却一直不温不火。直到 Electron 的出现，将这一切推向了巅峰，前端的触手伸向了更为广阔的系统应用。
一、Electron 是什么？
Electron 是由 Github 开发，用 HTML，CSS 和 JavaScript 来构建跨平台桌面应用程序的一个开源库。 Electron 通过将 Chromium 和 Node.js 合并到同一个运行时环境中，并将其打包为 Mac，Windows 和 Linux 系统下的应用来实现这一目的。
Chromium 是 Google 为发展 Chrome 浏览器而启动的开源项目，Chromium 相当于 Chrome 的工程版或称实验版（尽管 Chrome 自身也有 β 版阶段），新功能会率先在 Chromium 上实现，待验证后才会应用在Chrome 上，故 Chrome 的功能会相对落后但较稳定。
二、快速启动
先照着官网的教程快速启动一个项目，这是最简单粗暴的入门步骤。
|
1
2
3
4
5
6
|
# 克隆示例项目的仓库
$ git
clone https://github.com/electron/electron-quick-start
# 进入这个仓库
$
cd electron-quick-start
# 安装依赖并运行
$ npm install && npm start
|
三、简单示例
项目启动后，你会看到一个 Hello World! 应用窗口，很简单，就不细说了。我更感兴趣的是 Electron API Demos app ，大家可以去官网下载：
在 Electron API Demos app 中，我们可以查看官方 API 和 一些 Demo 演示，强烈建议去实际感受一下。只有你知道了它的强大之处，你才会兴奋不已，点燃学习的激情。
四、目录结构
好了，言归正传，我们用官方起手项目来做一个简单的说明。先来看看基本目录结构：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
.
├── LICENSE.md
├── README.md
├── index.html
├── main.js
├── node_modules
│ ├── @types
│ ├── ajv
│ ├── ansi-regex
│ ├── ...
│ ├── wrappy
│ ├── xtend
│ └── yauzl
├── package.json
└── renderer.js
|
这里我们主要关注如下这三个文件：
1.main.js，也就是整个应用的入口，主要用来创建桌面应用窗口，并监听主进程的事件。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
const { app, BrowserWindow } =
require(
'electron')
const path =
require(
'path')
const url =
require(
'url')
let mainWindow
function createWindow () {
mainWindow =
new BrowserWindow({
width:
800,
height:
600})
// 启动文件入口，如 index.html
mainWindow.loadURL(url.format({
pathname: path.join(__dirname,
'index.html'),
protocol:
'file:',
slashes:
true
}))
// 开启 Chromium DevTools
mainWindow.webContents.openDevTools()
// 监听窗口关闭事件
mainWindow.on(
'closed',
function () {
mainWindow =
null
})
}
// 加载就绪
app.on(
'ready', createWindow)
// 监听所有窗口关闭的事件
app.on(
'window-all-closed',
function () {
if (process.platform !==
'darwin') {
app.quit()
}
})
// 激活窗口
app.on(
'activate',
function () {
if (mainWindow ===
null) {
createWindow()
}
})
|
2.index.html ，属于渲染进程，单纯的页面而已。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!
title>
head>
<body>
<h1>Hello World!
h1>
We are using Node.js
<script>
document.write(process.versions.node)
script>,
Chromium
<script>
document.write(process.versions.chrome)
script>,
and Electron
<script>
document.write(process.versions.electron)
script>.
<script>
// 当然，我们也可以引入其他 js 文件
require('./renderer.js')
script>
body>
html>
|
3.renderer.js ，属于渲染进程，也就是我们页面的业务逻辑所要加载的 JS，简单的例子可能如下。
|
1
2
3
4
5
6
7
|
let myNotification =
new Notification(
'Jartto', {
body:
'Hello Everybody!'
})
myNotification.onclick =
() => {
console.log(
'Click!')
}
|
主进程和渲染进程下文会做具体说明，这里只需理解大致的代码结构即可。
五、整装代发
在开始 Coding 前，我们需要认识一下桌面应用的基本构成，以及基础模块。这里以 OS X 示例：
上图列出了一个桌面应用应该涵盖的基本特征，当然，还有更多无法视觉感知，但却依然重要的底层模块。下文将一一罗列，并尽量用示例说明。
代码示例都放在 Github 上，欢迎 Star。
六、主进程与渲染进程
学习 Electron 最重要的就是要搞懂主进程和渲染进程，否则某个进程的特有方法很可能会调用失败。
Electron 中，由 package.json 中的 main.js 运行出来的进程为主进程(Main Process)。主进程用于创建 GUI 界面以便 web 页面的展示。Electron 由 Chromium 负责页面的显示，所以当创建一个页面时，就会对应的创建渲染进程(Renderer Process)。
主进程通过创建 BrowserWindow 对象来创建 web 显示页面，BrowserWindow 运行在他自己的渲染进程中。当 BrowserWindow 被销毁时，对应的渲染进程也会终止。
七、进程间通信
既然有两个进程，那么肯定会涉及到进程间相互通讯，这里介绍两个概念：
1.Electron ipcMain 模块ipcMain 模块是类 EventEmitter 的实例。当在主进程中使用它的时候，它控制着由渲染进程(web page)发送过来的异步或同步消息。从渲染进程发送过来的消息将触发事件。
2.Electron ipcRenderer 模块pcRenderer 模块是一个 EventEmitter 类的实例。它提供了有限的方法，你可以从渲染进程向主进程发送同步或异步消息。也可以收到主进程的相应。
在主进程中，也就是 main.js 中，添加如下代码：
|
1
2
3
4
5
6
7
8
9
10
11
|
// 主进程
const ipcMain =
require(
'electron').ipcMain;
ipcMain.on(
'asynchronous-message',
function(event, arg) {
console.log(arg);
// prints "ping"
event.sender.send(
'asynchronous-reply',
'pong');
});
ipcMain.on(
'synchronous-message',
function(event, arg) {
console.log(arg);
// prints "ping"
event.returnValue =
'pong';
});
|
在渲染进程，也就是 ipc/index.js 文件中添加如下代码：
|
1
2
3
4
5
6
7
8
|
// 渲染进程 (web page).
const ipcRenderer =
require(
'electron').ipcRenderer;
console.log(ipcRenderer.sendSync(
'synchronous-message',
'sync-ping'));
// prints "pong"
ipcRenderer.on(
'asynchronous-reply',
function(event, arg) {
console.log(arg);
// prints "pong"
});
ipcRenderer.send(
'asynchronous-message',
'async-ping');
|
详细代码可以查看代码示例：ipc
还有一种进程间的通讯方式：Electron remote 模块。
remote 模块提供了一种在渲染进程（网页）和主进程之间进行进程间通讯（IPC）的简便途径。
通过 remote 调用主进程中 BrowserWindow 来创建应用窗口：
|
1
2
3
4
5
6
|
// 渲染进程
const remote =
require(
'electron').remote;
const BrowserWindow = remote.BrowserWindow;
let win =
new BrowserWindow({
width:
100,
height:
100 });
win.loadURL(
'http://www.jartto.wang');
|
详细代码可以查看代码示例：remote
八、BrowserWindow 模块
在主进程 main.js 中，我们也看到了 BrowserWindow 的使用，简单的调用窗口很容易，更复杂的应用可能需要我们去翻阅文档，熟读 API。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
// 在主进程中.
const {BrowserWindow} =
require(
'electron')
// 或者从渲染进程中使用 `remote`.
// const {BrowserWindow} = require('electron').remote
let win =
new BrowserWindow({
width:
800,
height:
600})
win.on(
'closed', () => {
win =
null
})
// 加载远程 URL
win.loadURL(
'http://jartto.wang')
// 或加载本地 HTML 文件
win.loadURL(
`file://${__dirname}/app/index.html`)
|
九、使用 Webview
与 iframe 不同，webview 和你的应用运行的是不同的进程。它不拥有渲染进程的权限，并且应用和嵌入内容之间的交互全部都是异步的，因为这能保证应用的安全性不受嵌入内容的影响。
webview 运行在渲染进程中，我们添加如下的 js 代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
window.onload =
function() {
var webview =
document.getElementById(
"foo");
var indicator =
document.querySelector(
".indicator");
var loadstart =
function() {
indicator.innerText =
"loading...";
}
var loadstop =
function() {
indicator.innerText =
"";
}
webview.addEventListener(
"did-start-loading", loadstart);
webview.addEventListener(
"did-stop-loading", loadstop);
webview.addEventListener(
"dom-ready",
function() {
// webview.openDevTools();
console.log(webview.getTitle());
});
}
|
并在 html 中添加两个容器：
|
1
2
|
<div class="indicator">
div>
<webview id="foo" src="http://www.jartto.wang/">
webview>
|
为了避免太过丑陋，我们增加如下 css 代码：
|
1
2
3
4
5
|
body {
margin:
0; }
#foo {
width:
100%;
height:
100vh;
}
|
ok，webview 的使用就这么简单的搞定了。
详细代码可以查看代码示例：webview
十、Dialog 模块
Dialog 模块提供了 API 来展示原生的系统对话框，例如打开文件框，alert 框，这样 web 应用可以给用户带来跟系统应用相同的体验。下面给出简单的示例：
1.打开选择文件和目录
|
1
2
3
|
var win = ...;
// BrowserWindow in which to show the dialog
const dialog =
require(
'electron').dialog;
console.log(dialog.showOpenDialog({
properties: [
'openFile',
'openDirectory',
'multiSelections' ]}));
|
2.错误框提示
|
1
2
3
4
5
6
7
8
9
10
11
|
const dialog =
require(
'electron').dialog;
dialog.showErrorBox(
'Jartto',
'Hello world');
// 或者传入更多的参数
// console.log(dialog.showMessageBox({
// browserWindow: mainWindow,
// options: {
// type: 'error',
// title: 'Jartto',
// message: 'Hello World',
// }
// }));
|
详细代码可以查看代码示例：main.js
十一、Global-Shortcut 模块
global-shortcut 模块可以便捷的为您设置(注册/注销)各种自定义操作的快捷键，下面我们来为应用注册一个 ctrl+x 的全局快捷键，当我们按下快捷键，系统弹窗消息反馈给我们：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
const globalShortcut =
require(
'electron').globalShortcut;
const dialog =
require(
'electron').dialog;
app.on(
'ready',
function(){
createWindow();
// Register a 'ctrl+x' shortcut listener.
var ret = globalShortcut.register(
'ctrl+x',
function() {
dialog.showErrorBox(
'Jartto',
'ctrl+x is pressed')
})
if (!ret) {
dialog.showErrorBox(
'Jartto',
'registration failed')
}
// Check whether a shortcut is registered.
console.log(globalShortcut.isRegistered(
'ctrl+x'));
})
app.on(
'will-quit',
function() {
// Unregister a shortcut.
globalShortcut.unregister(
'ctrl+x');
// Unregister all shortcuts.
globalShortcut.unregisterAll();
});
|
详细代码可以查看代码示例：main.js
十二、Menu 模块
Menu 分为三种，每种菜单的用法也不一样，下面我们分别举例说明：
1.系统菜单
|
1
2
3
4
5
6
7
8
|
// 窗口菜单
const remote =
require(
'electron').remote;
const Menu = remote.Menu;
let template = [...];
// 省略参数，具体请查看 demo
let menu = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(menu);
|
2.上下文菜单
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
const remote =
require(
'electron').remote;
const Menu = remote.Menu;
const MenuItem = remote.MenuItem;
// 右键菜单
var menu =
new Menu();
menu.append(
new MenuItem({
label:
'MenuItem1',
click:
function() {
console.log(
'item 1 clicked'); } }));
menu.append(
new MenuItem({
type:
'separator' }));
menu.append(
new MenuItem({
label:
'MenuItem2',
type:
'checkbox',
checked:
true }));
window.addEventListener(
'contextmenu',
function (e) {
e.preventDefault();
menu.popup(remote.getCurrentWindow());
},
false);
|
3.托盘菜单
|
1
2
3
4
5
6
7
8
9
|
let appIcon =
new Tray(path.normalize(__dirname +
'/image/icon.png'));
let contextMenu = Menu.buildFromTemplate([
{
label:
'菜单一',
type:
'radio' },
{
label:
'菜单二',
type:
'radio' },
{
label:
'菜单三',
type:
'radio',
checked:
true },
{
label:
'关于',
type:
'radio' }
]);
appIcon.setContextMenu(contextMenu);
|
详细代码可以查看代码示例：menu
十三、Electron power-monitor
power-monitor 模块是用来监听能源区改变的。只能在主进程中使用。在 app 模块的 ready 事件触发之后就不能使用这个模块了。
|
1
2
3
4
5
6
7
|
// 能源区变化，系统挂起和恢复，交流电和电池切换时
require(
'electron').powerMonitor.on(
'suspend',
function() {
console.log(
'The system is going to sleep');
});
require(
'electron').powerMonitor.on(
'on-ac',
function() {
console.log(
'The system is using AC power');
});
|
详细代码可以查看代码示例：main.js
十四、系统托盘 Tray
在 OS X 中，托盘一般会出现在显示器右上角的位置，一个简单的示例可能如下：
|
1
2
3
4
5
6
7
8
9
10
|
appIcon =
new Tray(path.normalize(__dirname +
'/image/icon.png'));
var contextMenu = Menu.buildFromTemplate([
{
label:
'Item1',
type:
'radio' },
{
label:
'Item2',
type:
'radio' },
{
label:
'Item3',
type:
'radio',
checked:
true },
{
label:
'Item4',
type:
'radio' }
]);
console.log(appIcon);
appIcon.setToolTip(
'This is my application.');
appIcon.setContextMenu(contextMenu);
|
如果想同时支持展示不同分辨率的图片，你可以将拥有不同 size 的图片放在同一个文件夹下，不用 DPI 后缀.例如 :
|
images/
├── icon.png
|
详细代码可以查看代码示例：main.js
十五、Electron desktopCapturer 模块
desktopCapturer 模块可用来获取可用资源，这个资源可通过 getUserMedia 捕获得到。这样，我们就可以随便捕获其他的窗口，以及显示屏内容了。这里我们来抓取名称是 Screen 2 的屏幕，代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
// 在渲染进程中.
var desktopCapturer =
require(
'electron').desktopCapturer;
desktopCapturer.getSources({
types: [
'window',
'screen']},
function(error, sources) {
console.log(
'sources', sources);
if (error)
throw error;
for (
var i =
0; i < sources.length; ++i) {
if (sources[i].name ==
"Screen 2") {
navigator.webkitGetUserMedia({
audio:
false,
video: {
mandatory: {
chromeMediaSource:
'desktop',
chromeMediaSourceId: sources[i].id,
minWidth:
1280,
maxWidth:
1280,
minHeight:
720,
maxHeight:
720
}
}
}, gotStream, getUserMediaError);
return;
}
}
});
function gotStream(stream) {
console.log(stream,
'stream');
document.querySelector(
'video').src = URL.createObjectURL(stream);
}
function getUserMediaError(e) {
console.log(
'getUserMediaError');
}
|
在 html 中，需要添加 video 元素：
|
1
|
<video> desktop capturer
video>
|
学习过程中，我尝试了去捕获一个视频窗口，这样的话，我们就可以抓取不同窗口的内容放在同一个窗口中，是不是有点类似监控系统呢。
sources 是一个 Source 对象数组, 每个 Source 表示了一个捕获的屏幕或单独窗口，并且有如下属性 :
- id String - 在 navigator.webkitGetUserMedia 中使用的捕获窗口或屏幕的 id . 格式为 window:XX 或 screen:XX，XX 是一个随机数.
- name String - 捕获窗口或屏幕的描述名 . 如果资源为屏幕，名字为 Entire Screen 或 Screen ; 如果资源为窗口, 名字为窗口的标题.
- thumbnail NativeImage - 缩略图.
详细代码可以查看代码示例：desktopCapturer
十六、Electron webFrame 模块
接着继续上面的话题，我们要将所有窗口都捕获在一个窗口显示，那么你可能会用到 web-frame ，该模块允许你自定义如何渲染当前网页。例如，放大当前页到 200%。
|
1
2
|
let webFrame =
require(
'electron').webFrame;
webFrame.setZoomFactor(
2);
|
详细代码可以查看代码示例：webFrame
十七、Electron clipboard 模块
clipboard 模块提供方法来供复制和粘贴操作，非常实用的一个功能。下面例子展示了如何将一个字符串写入 clipboard :
|
1
2
|
const clipboard =
require(
'electron').clipboard;
clipboard.writeText(
'Hello Jartto!');
|
详细代码可以查看代码示例：clipboard
十八、Electron crashReporter 模块
crash-reporter 模块开启发送应用崩溃报告，这个就没什么好说了，收集反馈信息为了更好的用户体验。
|
1
2
3
4
5
6
7
8
|
const crashReporter =
require(
'electron').crashReporter;
crashReporter.start({
productName:
'Jartto',
companyName:
'Jartto blog',
submitURL:
'http://jartto.com/url-to-submit',
autoSubmit:
true
});
|
十九、Electron screen 模块
screen 模块检索屏幕的 size，显示，鼠标位置等的信息。在 app 模块的 ready 事件触发之前不可使用这个模块。
|
1
2
3
4
5
6
7
8
9
10
11
|
const electron =
require(
'electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
var mainWindow;
app.on(
'ready',
function() {
var electronScreen = electron.screen;
var size = electronScreen.getPrimaryDisplay().workAreaSize;
mainWindow =
new BrowserWindow({
width: size.width,
height: size.height });
});
|
二十、Electron shell 模块
shell 模块提供了集成其他桌面客户端的关联功能。
|
1
2
3
4
5
6
|
在渲染进程中使用
const { shell } =
require(
'electron')
// 播放声音
shell.beep();
// shell.openItem('/Users/Jartto/Documents/my-demo');
shell.openExternal(
'http://jartto.wang');
|
详细代码可以查看代码示例：shell
二十一、Notification 通知模块
所有三个操作系统都提供了应用程序向用户发送通知的手段。 Electron 允许开发者使用 HTML5 Notification API 发送通知，并使用当前运行的操作系统的本地通知 API 来显示它。
注意: 由于这是一个 HTML5 API，它只能在渲染器进程中使用。 如果你想在主进程中显示通知，请查看 Notification 模块.
|
1
2
3
4
5
6
7
|
let myNotification =
new Notification(
'Jartto', {
body:
'Hello Everybody!'
})
myNotification.onclick =
() => {
console.log(
'通知被点击')
}
|
详细代码可以查看代码示例：notification
二十二、在 Dock 中显示
在 OS X 中 Dock 默认会被打开，我们还可以在主进程中做一些额外的控制，如隐藏、设置菜单等操作。
|
1
2
|
app.dock.hide();
app.dock.setMenu(menu);
|
二十三、Demo 汇总
所有的示例代码都在这里，为了方便切换启动页面，我们通过不同的目录来区分，你只需要更改 main.js 中 path 中的路径即可，如下：
|
1
2
3
4
5
|
mainWindow.loadURL(url.format({
pathname: path.join(__dirname,
'${dir-name}/index.html'),
protocol:
'file:',
slashes:
true
}))
|
Demo 目录结构如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
|
.
├── LICENSE.md
├── README.md
├── clipboard
│ ├── index.html
│ └── index.js
├── desktopCapturer
│ ├── index.css
│ ├── index.html
│ └── index.js
├── file
│ ├── index.html
│ └── index.js
├── image
│ ├── icon.png
│ ├── [email protected]
│ └── [email protected]
├── index.html
├── ipc
│ ├── index.html
│ └── index.js
├── main.js
├── menu
│ ├── index.html
│ ├── index.js
│ └── index1.js
├── node_modules
│ ├── @types
│ ├── _@[email protected]@@types
│ ├── [email protected]@ajv
│ ├── ...
│ ├── wrappy
│ ├── xtend
│ └── yauzl
├── notification
│ ├── index.html
│ └── index.js
├── offline
│ └── index.html
├── package.json
├── remote
│ ├── index.html
│ └── index.js
├── renderer.js
├── shell
│ ├── index.html
│ └── index.js
├── webFrame
│ ├── index.html
│ └── index.js
└── webview
├── index.html
└── index.js
|
你可以更改 ${dir-name} 来切换不同的启动项，查看演示。
二十四、代码调试
要开发一个完整的 Electron 应用，肯定会用到代码调试，这里暂且分为两部分调试：
1.对 GUI 的调试，也就是主进程的调试，可以借助开发工具，这里我用 VS Code 来举例说明：
- 在
.vscode目录下添加launch.json文件，如果有的话，直接第二步； -
打开
launch.json，写入如下配置；123456789101112{"version": "0.2.0","configurations": [{"type": "node","request": "launch","name": "Electron Main","protocol": "auto","program": "${workspaceFolder}/electron-quick-start/main.js"},]} -
运行
debug，就可以了;
2.渲染进程调试，可以开启调试工具：
|
1
2
|
// 主进程中使用
mainWindow.webContents.openDevTools()
|
之后的调试就向你在 Chrome 中使用 DevTool 一样，简单而又高效。
二十五、打包发布
Electron 应用开发完成之后，打包生产相应平台应用，通常推荐的工具有 electron-packager 和 asar。
1.用 electron-packager 为所有系统打包你的应用很简单。简单来说，electron-packager 帮你完成所有用Electron 打包你应用的工作，最终生成你要发布的平台的安装包。
它可以作为 CLI 应用或构建过程的一部分，更复杂的构建情况不在本文所涉及范围内，但我们如果能用打包脚本，会使打包更简单。用 electron-packager 比较麻烦，打包应用的基本命令是：
|
1
|
electron-packager |
具体的参数说明如下：
location of project是你项目文件夹的位置；name of project定义你的项目名；platform决定要构建的平台（all 包括 Windows ，Mac 和 Linux ）；architecture决定构建哪个构架下（x86或x64，all表示两者）；electron version让你选择要用的Electron版本；
第一次打包用时比较久，因为要下载平台的二进制文件，随后的打包将会快的多。
在 OS X 下打包应用的命令如下：
|
1
|
electron-packager ~/Projects/jartto-demo MyElectron --all --version=0.30.2 --out=~/Desktop --overwrite --icon=~/Projects/jartto-demo/app/img/app-icon.icns
|
命令的选项理解起来都比较简单。为了获得精美的图标，你首先要找一款类似这个软件可以把 PNG 文件转换到这些格式的工具，把它转换成 .icns 格式（ Mac 用）或者 .ico 格式（ Window 用）。如果在非 Windows 系统给Windows 平台的应用打包，你需要安装 wine（ Mac 用户用 brew ，Linux 用户用 apt-get）。
每次都打这么长的命令很不方便，可以在 package.json 中加另一个脚本。首先，把 electron-packager 作为开发依赖安装：
|
1
|
npm install --save-dev electron-packager
|
现在我们可以在 package.json 中添加脚本：
|
1
2
3
4
|
"scripts": {
"start": "electron .",
"package": "electron-packager ./ MyElectron --all --out ~/Desktop/jartto-demo --version 0.30.2 --overwrite --icon=./app/img/app-icon.icns"
}
|
在命令行里执行下面的命令：
|
1
|
npm run-script package
|
这个打包命令会启动 electron-packager，在当前目录下找到目标应用文件，打包，保存到桌面。如果你用的是Windows 系统，需要修改脚本，不过改动很小。
2.使用 asar
安装 asar
|
1
2
|
npm i asar -g
npm i asar --save-dev
|
编辑 package.json
|
1
2
3
4
5
|
"scripts": {
"start": "electron .",
"build": "electron-packager . MyFirstApp --ignore=node_modules/electron-* --platform=win32 --arch=x64 --version=0.32.3",
"package": "asar pack MyFirstApp-win32-x64/resources/app MyFirstApp-win32-x64/resources/app.asar && rm -rf MyFirstApp-win32-x64/resources/app"
}
|
然后执行：
|
1
|
npm run package
|
二十六、Electron 源代码结构
当然，如果你需要深入了解 Electron ，官方也提供了一些帮助，我们可以通过如下的结构来深入学习。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
Electron
├──atom - Electron 的源代码
| ├── app - 系统入口代码
| ├── browser - 包含了主窗口、UI 和其他所有与主进程有关的东西，它会告诉渲染进程如何管理页面
| | ├── lib - 主进程初始化代码中 JavaScript 部分的代码
| | ├── ui - 不同平台上 UI 部分的实现
| | | ├── cocoa - Cocoa 部分的源代码
| | | ├── gtk - GTK+ 部分的源代码
| | | └── win - Windows GUI 部分的源代码
| | ├── default_app - 在没有指定 app 的情况下 Electron 启动时默认显示的页面
| | ├── api - 主进程 API 的实现
| | | └── lib - API 实现中 Javascript 部分的代码
| | ├── net - 网络相关的代码
| | ├── mac - 与 Mac 有关的 Objective-C 代码
| | └── resources - 图标，平台相关的文件等
| ├── renderer - 运行在渲染进程中的代码
| | ├── lib - 渲染进程初始化代码中 JavaScript 部分的代码
| | └── api - 渲染进程 API 的实现
| | └── lib - API 实现中 Javascript 部分的代码
| └── common - 同时被主进程和渲染进程用到的代码，包括了一些用来将 node 的事件循环
| | 整合到 Chromium 的事件循环中时用到的工具函数和代码
| ├── lib - 同时被主进程和渲染进程使用到的 Javascript 初始化代码
| └── api - 同时被主进程和渲染进程使用到的 API 的实现以及 Electron 内置模块的基础设施
| └── lib - API 实现中 Javascript 部分的代码
├── chromium_src - 从 Chromium 项目中拷贝来的代码
├── docs - 英语版本的文档
├── docs-translations - 各种语言版本的文档翻译
├── spec - 自动化测试
├── atom.gyp - Electron 的构建规则
└── common.gypi - 为诸如 `node` 和 `breakpad` 等其他组件准备的编译设置和构建规则
|
二十七、学习资源
学习过程中，发现了很多不错的资源，分享给大家，共同进步吧：
Electron 官方文档
Electron 中文文档
Electron 的入门学习
用 Electron 开发桌面应用
Electron-Docs
vue，electron 实现网易云音乐客户端
awesome electron
使用 Electron 构建跨平台的抓取桌面程序
electron-builder
gulp-electron
二十八、写在最后
由于篇幅实在是太长了，所以我打算把开发中遇到的问题留在后续文章中说明。这里先剧透一下，后续应该还会有两篇总结性的文章，标题已经想好了，我会在 github 持续更新。先留个传送门吧！
- 初探 Electron - 升华篇
- 初探 Electron - 实践篇