主进程创建并关闭多个渲染进程

主脚本指定了运行主进程的 Electron 应用程序的入口 ,通常是man.js文件, Electron 应用程序只能有一个主进程。

1. 为了管理应用程序的生命周期事件以及创建和控制浏览器窗口，需要从 electron 包导入了 app 和 BrowserWindow 模块 ,

const { app, BrowserWindow } = require('electron')

2. 定义一个创建新的浏览窗口的函数并将 nodeIntegration 设置为 true，将 index.html 文件加载到窗口中,

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
//注意: 设置 nodeIntegration 选项为 true 表示渲染过程中可以访问Node.js API 
      nodeIntegration: true
    }
  })

  win.loadFile('index.html')
}

3. 调用 createWindow方法，在 electron app 第一次被初始化时创建一个新的窗口

app.whenReady().then(createWindow)

4. 添加一个新的侦听器，当应用程序不再有任何打开窗口时试图退出。由于操作系统的窗口管理行为，此监听器在 macOS 上是禁止操作的。

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

5. 添加一个新的侦听器，只有当应用程序激活后没有可见窗口时，才能创建新的浏览器窗口。例如，在首次启动应用程序后或重启运行中的应用程序。

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

--------------------------------------------分割线------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------创建多个窗口---------------------------------------------------------------------

若要创建一个窗口，请调用 BrowserWindow 类，再次创建一个BrowserWindow实例,但只能在主进程中使用：我们可以修改以上代码


const {
	app,
	BrowserWindow
} = require('electron')

//全局访问
let win
let win22

function createWindow() {
	win = new BrowserWindow({
		width: 800,
		height: 600,
		frame: false,
		webPreferences: {
			nodeIntegration: true
		}
	})

	win.loadFile('index.html')
	win.once('ready-to-show', () => {
		win.show()
	})

	win22 = new BrowserWindow({
		width: 800,
		height: 600,
		frame: false,
		webPreferences: {
			nodeIntegration: true
		}
	})

	win22.loadFile('index.html')
	win22.once('ready-to-show', () => {
		win.show()
	})

}

app.whenReady().then(createWindow)

app.on('window-all-closed', () => {
	if (process.platform !== 'darwin') {
		app.quit()
	}
})

app.on('activate', () => {
	if (BrowserWindow.getAllWindows().length === 0) {
		createWindow()
	}
})

BrowserWindow对象可调用的成员有很多, 比如id获取唯一窗口id,close()成员方法关闭窗口等~

--------------------------------------------------------------------------------------删除多个窗口---------------------------------------------------------------------

在主进程中将多个窗口的id分别发送给各自的渲染窗口,主->渲染通讯使用BrowserWindow实例属性webContents的send()方法实现

const {
	app,
	BrowserWindow
} = require('electron')
let win
let win22

function createWindow() {
	win = new BrowserWindow({
		width: 800,
		height: 600,
		frame: false,
		webPreferences: {
			nodeIntegration: true
		}
	})

	win.loadFile('index.html')
	win.once('ready-to-show', () => {
		win.webContents.send('init_win_id', win.id);
		win.show()
	})

	win22 = new BrowserWindow({
		width: 800,
		height: 600,
		frame: false,
		webPreferences: {
			nodeIntegration: true
		}
	})

	win22.loadFile('index.html')
	win22.once('ready-to-show', () => {
		win22.webContents.send('init_win_id', win22.id);
		win22.show()
	})

}

app.whenReady().then(createWindow)

app.on('window-all-closed', () => {
	if (process.platform !== 'darwin') {
		app.quit()
	}
})

app.on('activate', () => {
	if (BrowserWindow.getAllWindows().length === 0) {
		createWindow()
	}
})

在各自的渲染窗口中获取winid.并在关闭窗口事件中将之传给主进程,由主进程关闭渲染进程

以下是主进程获取到需要关闭的窗口id以后需要执行的操作

const {
	ipcMain
} = require('electron')
ipcMain.on('close_window', (event, arg) => {
 let winid;
  winid = arg
  console.log(winid);
//根据id获取 BrowserWindow实例,然后调用close()方法
  BrowserWindow.fromId(winid).close();
 
})

来源：oschina

链接：https://my.oschina.net/u/4225107/blog/4940363

标签

electron