文章首发于：clawhub.club

Main进程一个显著的作用就是创建app的窗口，如图：
image.png
看看代码中主进程都有啥：
image.png
就两个文件，其中index.dev.js：里面写着说开发的时候debug使用

This file is used specifically and only for development. It installs electron-debug & vue-devtools. There shouldn’t be any need to modify this file, but it can be used to extend your development environment

另一个就是创建app窗口的文件了：

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
'use strict'

import {
  app,
  BrowserWindow
} from 'electron' // 从electron引入app和BrowserWindow

/**
 * Set `__static` path to static files in production
 * https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-static-assets.html
 */
if (process.env.NODE_ENV !== 'development') {
  global.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
}

let mainWindow
const winURL = process.env.NODE_ENV === 'development' ?
  `http://localhost:9080` :
  `file://${__dirname}/index.html`

function createWindow() { // 创建窗口
  /**
   * Initial window options
   */
  mainWindow = new BrowserWindow({
    height: 563,
    useContentSize: true,
    width: 1000
  }) // 创建一个窗口

  mainWindow.loadURL(winURL) // 加载窗口的URL -> 来自renderer进程的页面

  mainWindow.on('closed', () => {
    mainWindow = null
  })
}

app.on('ready', createWindow) // app准备好的时候创建窗口

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') { // 当操作系统不是darwin（macOS）的话
    app.quit() // 退出应用
  }
})

app.on('activate', () => {
  if (mainWindow === null) {
    createWindow()
  }
})

app模块

app模块是electron的主干，掌管着很多生命周期钩子与事件钩子：

生命周期钩子：

  • will-finish-launching 在应用完成基本启动进程之后触发
  • ready 当electron完成初始化后触发
  • window-all-closed 所有窗口都关闭的时候触发，在windows和linux里，所有窗口都退出的时候通常是应用退出的时候
  • before-quit 退出应用之前的时候触发
  • will-quit 即将退出应用的时候触发
  • quit 应用退出的时候触发

事件钩子：

  • active（仅macOS）当应用处于激活状态时
  • browser-window-created 当一个BrowserWindow被创建的时候
  • browser-window-focus 当一个BrowserWindow处于激活状态的时候

常用方法：

  • app.quit() 用于退出应用
  • app.getPath(name) 用于获取一些系统目录，对于存放应用的配置文件等很有用
  • app.focus() 用于激活应用，不同系统激活逻辑不一样

官方文档 在这里。

BrowserWindow

常用配置：

1
2
3
4
5
6
height: 563,
useContentSize: true,
width: 1000,
frame: false,
show: false,
backgroundColor: '#2e2c29'

frame这个选项，默认是true。如果选择了false则会创建一个frameless窗口，创建一个没有顶部工具栏、没有border的窗口。

事件钩子：

  • closed 当窗口被关闭的时候
  • focus 当窗口被激活的时候
  • show 当窗口展示的时候
  • hide 当窗口被隐藏的时候
  • maxmize 当窗口最大化时
  • minimize 当窗口最小化时

方法：

  • BrowserWindow.getFocusedWindow() [静态方法]获取激活的窗口
  • win.close() [实例方法，下同]关闭窗口
  • win.focus() 激活窗口
  • win.show() 显示窗口
  • win.hide() 隐藏窗口
  • win.maximize() 最大化窗口
  • win.minimize() 最小化窗口
  • win.restore() 从最小化窗口恢复

当前页面：
image.png