极客实验室

Geek Lab

0%

Electron学习笔记

Posted on In

Electron简单上手

Electron是Github发布的跨平台桌面应用开发工具，基于Web技术（NodeJS + Chromium）

安装

推荐使用npm安装

1
2
3
4
5
# 在全局环境安装`electron`命令
npm install electron-prebuilt -g

# 以依赖的方式安装
npm install electron-prebuilt --save-dev

创建应用

Electron项目的基本结构如下：

1
2
3
4
your-app/
├- package.json
├- main.js
└- index.html

其中package.json的格式和nodejs的模块中package.json完全相同，由main字段指定应用的起始脚本，用来运行主进程。下面是一个package.json的例子：

1
2
3
4
5
{
    "name"    : "your-app",
    "version" : "0.1.0",
    "main"    : "main.js"
}

提示:如果main字段不存在，Electron会尝试加载index.js。
在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
'use strict';

const electron = require('electron');
const app = electron.app;  // 用来控制应用的模块
const BrowserWindow = electron.BrowserWindow;  // 创建浏览器窗口的模块

var mainWindow = null;

// 当所有窗口关闭的时候
app.on('window-all-closed', function() {
  if (process.platform != 'darwin') {
    app.quit();
  }
});

// Electron加载完成后，该方法会被调用
// 加载完成后创建一个浏览器窗口
app.on('ready', function() {
  // 创建一个浏览器窗口
  mainWindow = new BrowserWindow({width: 800, height: 600});

  // 加载index.html 
  mainWindow.loadURL('file://' + __dirname + '/index.html');

  // 打开开发者工具窗口
  mainWindow.webContents.openDevTools();

  // 当窗口关闭时，向上冒泡（Closed）事件
  mainWindow.on('closed', function() {
    mainWindow = null;
  });
});

最后index.html是你将看到的web页面：

1
2
3
4
5
6
7
8
9
10
11
12
13
<!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>

运行

在应用所在的目录，即package.json所在的目录，运行一下命令：

1
electron .