【Electron-playground系统】窗口篇

窗口篇

作者：Kurosaki

本文主要讲解Electron 窗口的 API 和一些在开发之中遇到的问题。

官方文档 虽然比较全面，但是要想开发一个商用级别的桌面应用必须对整个 Electron API 有较深的了解，才能应对各种需求。

1. 创建窗口

通过BrowserWindow，来 创建 或者 管理 新的浏览器窗口，每个浏览器窗口都有一个进程来管理。

1.1. 简单创建窗口

const {
    BrowserWindow } = require('electron');
const win = new BrowserWindow();
win.loadURL('https://github.com');

效果如下：

1.1.2. 优化

问题：electron的 BrowserWindow模块在创建时，如果没有配置 show:false，在创建之时就会显示出来，且默认的背景是白色；然后窗口请求 HTML，会出现视觉闪烁。

解决

const {
    BrowserWindow } = require('electron');
const win = new BrowserWindow({
    show:false });

win.loadURL('https://github.com');

win.on('ready-to-show',()=>{
   
    win.show();
})

两者对比有很大的区别

1.2. 管理窗口

所谓的管理窗口，相当于主进程可以干预窗口多少。

• 窗口的路由跳转
• 窗口打开新的窗口
• 窗口大小、位置等
• 窗口的显示
• 窗口类型（无边框窗口、父子窗口）
• 窗口内 JavaScript 的 node 权限，预加载脚本等
• …

这些个方法都存在于BrowserWindow模块中。

1.2.1. 管理应用创建的窗口

BrowserWindow模块在创建窗口时，会返回 窗口实例，这些 **窗口实例 **上有许多功能方法，我们利用这些方法，管理控制这个窗口。

在这里使用Map对象来存储这些 窗口实例。

const BrowserWindowsMap = new Map<number, BrowserWindow>()
let mainWindowId: number;

const browserWindows = new BrowserWindow({
    show:false })
browserWindows.loadURL('https://github.com')
browserWindows.once('ready-to-show', () => {
   
  browserWindows.show()
})
BrowserWindowsMap.set(browserWindow.id, browserWindow)
mainWindowId = browserWindow.id  // 记录当前窗口为主窗口

窗口被关闭，得把Map中的实例删除。

browserWindow.on('closed', () => {
   
  BrowserWindowsMap?.delete(browserWindowID)
})

1.2.2. 管理用户创建的窗口

主进程可以控制窗口许多行为，这些行为会在后续文章一一列举；以下以主进程控制窗口建立新窗口的行为为例。

使用new-window监听新窗口创建

// 创建窗口监听
browserWindow.webContents.on('new-window', (event, url, frameName, disposition) => {
   
  /** @params {string} disposition
  *  new-window : window.open调用
  *  background-tab: command+click
  *  foreground-tab: 右键点击新标签打开或点击a标签target _blank打开
  * /
})

注：关于disposition字段的解释，移步electron文档、electron源码、chrome 源码

扩展new-window

经过实验，并不是所有新窗口的建立， new-window 都能捕捉到的。

以下方式打开的窗口可以被new-window事件捕捉到

window.open('https://github.com')

<a href='https://github.com' target='__blank'>链接</a>

**
渲染进程中使用BrowserWindow创建新窗口，不会被 new-window事件捕捉到
**

const {
    BrowserWindow } = require('electron').remote
const win = new BrowserWindow()
win.loadURL('https://github.com')

_渲染进程访问 __remote_ _，主进程需配置enableRemoteModule:true _
使用这种方式同样可以打开一个新的窗口，但是主进程的new-window捕捉不到。

应用new-window
new-window 控制着窗口新窗口的创建，我们利用这点，可以做到很多事情；比如链接校验、浏览器打开链接等等。默认浏览器打开链接代码如下：

import {
    shell } from 'electron'
function openExternal(url: string) {
   
  const HTTP_REGEXP = /^https?:\/\//
  // 非http协议不打开，防止出现自定义协议等导致的安全问题
  if (!HTTP_REGEXP) {
   
    return false
  }
  try {
   
    await shell.openExternal(url, options)
    return true
  } catch (error) {
   
    console.error('open external error: ', error)
    return false
  }
}
// 创建窗口监听
browserWindow.webContents.on('new-window', (event, url, frameName, disposition) => {
   
  if (disposition === 'foreground-tab') {
   
      // 阻止鼠标点击链接
      event.preventDefault()
      openExternal(url)
  }
})

_关于 __shell_ 模块，可以查看官网 https://www.electronjs.org/docs/api/shell
_

1.3. 关闭窗口

**close** **事件和 ****closed** 事件
close 事件在窗口将要关闭时之前触发，但是在 DOM 的 beforeunload 和 unload 事件之前触发。

// 窗口注册close事件
win.on('close',(event)=>{
   
	event.preventDefault()  // 阻止窗口关闭
})

closed 事件在窗口关闭后出触发，但是此时的窗口已经被关闭了，无法通过 event.preventDefault() 来阻止窗口关闭。

win.on