Electron_01 - 快速启动

自己创建 Electron 应用

1. 使用 npm 初始化一个项目

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$ mkdir my-app

$ cd my-app

$ npm init --y
Wrote to E:\my-app\package.json:
{
"name": "my-app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}

修改入口文件为 main.js 并且添加 start 脚本引导 Node 来执行 Electron

2. 安装 Electron

官方推荐的安装方法是把它作为应用中的开发依赖项,以在不同的应用中使用不同的 Electron 版本。

1
npm install electron --save-dev

3. 简易的 Electron 主进程

1.在 min.js 中引入 Electron

  • 使用所有 API 和功能
1
const electron = require('electron')
  • 按需引入
1
const { app, BrowserWindow } = require('electron')

Electron 模块所提供的功能都是通过命名空间暴露出来的

在应用程序准备就绪后打开一个窗口

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function createWindow () {
// 创建浏览器窗口
let win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})

// 加载index.html文件
win.loadFile('index.html')
}

app.on('ready', createWindow)

完善上述例子,完善应用可能遇到的所有系统事件,那么一个简单的 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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
const { app, BrowserWindow } = require('electron')

// 保持对window对象的全局引用,如果不这么做的话,当JavaScript对象被
// 垃圾回收的时候,window对象将会自动的关闭
let win

function createWindow () {
// 创建浏览器窗口。
win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})

// 加载index.html文件
win.loadFile('index.html')

// 打开开发者工具
win.webContents.openDevTools()

// 当 window 被关闭,这个事件会被触发。
win.on('closed', () => {
// 取消引用 window 对象,如果你的应用支持多窗口的话,
// 通常会把多个 window 对象存放在一个数组里面,
// 与此同时,你应该删除相应的元素。
win = null
})
}

// Electron 会在初始化后并准备
// 创建浏览器窗口时,调用这个函数。
// 部分 API 在 ready 事件触发后才能使用。
app.on('ready', createWindow)

// 当全部窗口关闭时退出。
app.on('window-all-closed', () => {
// 在 macOS 上,除非用户用 Cmd + Q 确定地退出,
// 否则绝大部分应用及其菜单栏会保持激活。
if (process.platform !== 'darwin') {
app.quit()
}
})

app.on('activate', () => {
// 在macOS上,当单击dock图标并且没有其他窗口打开时,
// 通常在应用程序中重新创建一个窗口。
if (win === null) {
createWindow()
}
})

// 在这个文件中,你可以续写应用剩下主进程代码。
// 也可以拆分成几个文件,然后用 require 导入。

4. 创建想展示的 index.html

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>

5. 启动应用

创建并初始化完成 main.jsindex.htmlpackage.json 之后,
就可以在当前工程的根目录执行 npm start 命令来启动刚刚编写好的 Electron 应用了。

1
2
3
4
$ npm start

> my-app@1.0.0 start E:\my-app
> electron .

基础结构

所以一个最基础的 Electron 应用 应有以下目录结构:

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

快速启动

官方 DEMO Electron-quick-start

1
2
3
4
5
6
7
8
# 克隆示例项目的仓库
$ git clone https://github.com/electron/electron-quick-start

# 进入这个仓库
$ cd electron-quick-start

# 安装依赖并运行
$ npm install && npm start

使用 Electron-forge 创建项目

1
2
3
4
5
6
7
$ npm i -g @electron-forge/cli

$ electron-forge init my-app

$ cd my-app

$ npm start