Electron——基础窗口创建

BrowserWindow 创建控制浏览器窗口进程：主进程

一、创建程序窗口

// 在主进程中
const {BrowserWindow} = require('electron')

// 或者在渲染进程中使用 `remote`
// const {BrowserWindow} = require('electron').remote（不建议用，性能差）

let win = new BrowserWindow({width: 800, height: 600})
win.on('closed', () => {
  win = null
})

// 加载一个远程地址
win.loadURL('https://github.com')

// 或者加载一个本地文件
win.loadURL(`file://${__dirname}/app/index.html`)

一、new BrowserWindow([options])的配置项

width： Integer -窗口宽度,单位像素. 默认是 800
height： Integer - 窗口高度,单位像素. 默认是 600.
x： Integer - 窗口相对于屏幕的左偏移位置.默认居中.
y： Integer - 窗口相对于屏幕的顶部偏移位置.默认居中.
useContentSize： Boolean - width和 height使用web网页size, 这意味着实际窗口的size应该包括窗口框架的size，稍微会大一点，默认为 false
center： Boolean - 窗口屏幕居中.
minWidth： Integer - 窗口最小宽度，默认为 0
minHeight： Integer - 窗口最小高度，默认为 0
maxWidth： Integer - 窗口最大宽度，默认无限制.
maxHeight： Integer - 窗口最大高度，默认无限制.
resizable： Boolean - 是否可以改变窗口size，默认为 true
movable： Boolean - 窗口是否可以拖动. 在 Linux 上无效. 默认为 true
minimizable： Boolean - 窗口是否可以最小化. 在 Linux 上无效. 默认为 true
maximizable： Boolean - 窗口是否可以最大化. 在 Linux 上无效. 默认为 true
closable： Boolean - 窗口是否可以关闭. 在 Linux 上无效. 默认为 true
alwaysOnTop： Boolean - 窗口是否总是显示在其他窗口之前. 在 Linux 上无效. 默认为 false
fullscreen： Boolean - 窗口是否可以全屏幕. 当明确设置值为 false，全屏化按钮将会隐藏，在 macOS 将禁用. 默认 false
fullscreenable： Boolean - 在 macOS 上，全屏化按钮是否可用，默认为 true
skipTaskbar： Boolean - 是否在任务栏中显示窗口. 默认是false
kiosk： Boolean - kiosk 方式. 默认为 false
title： String - 窗口默认title. 默认 "Electron"
icon：NativeImage - 窗口图标, 如果不设置，窗口将使用可用的默认图标.
show： Boolean - 窗口创建的时候是否显示. 默认为 true
frame： Boolean - 指定 false来创建一个Frameless Window. 默认为 true
acceptFirstMouse： Boolean - 是否允许单击web view来激活窗口 . 默认为 false
disableAutoHideCursor： Boolean - 当 typing 时是否隐藏鼠标.默认 false
autoHideMenuBar： Boolean - 除非点击 Alt，否则隐藏菜单栏.默认为 false
enableLargerThanScreen： Boolean - 是否允许改变窗口大小大于屏幕. 默认是 false
backgroundColor： String -窗口的 background color 值为十六进制,如 #66CD00(支持透明度). 默认为在 Linux 和 Windows 上为 #000(黑色) , Mac上为 #FFF(或透明).
hasShadow： Boolean - 窗口是否有阴影. 只在 macOS 上有效. 默认为 true
darkTheme： Boolean - 为窗口使用 dark 主题, 只在一些拥有 GTK+3 桌面环境上有效. 默认为 false
transparent： Boolean - 窗口透明. 默认为 false
type： String - 窗口type, 默认普通窗口.
titleBarStyle： String - 窗口标题栏样式.
webPreferences： Object - 设置界面特性.

事件

BrowserWindow 对象可触发下列事件:

注意: 一些事件只能在特定os环境中触发，已经尽可能地标出.

Event: "page-title-updated"

event Event

当文档改变标题时触发,使用 event.preventDefault() 可以阻止原窗口的标题改变.

Event: "close"

event Event

在窗口要关闭的时候触发. 它在DOM的 beforeunload and unload 事件之前触发.使用 event.preventDefault() 可以取消这个操作

通常你想通过 beforeunload 处理器来决定是否关闭窗口，但是它也会在窗口重载的时候被触发. 在 Electron 中，返回一个空的字符串或 false 可以取消关闭.例如:

window.onbeforeunload = function(e) {
  console.log("I do not want to be closed");

  // Unlike usual browsers, in which a string should be returned and the user is
  // prompted to confirm the page unload, Electron gives developers more options.
  // Returning empty string or false would prevent the unloading now.
  // You can also use the dialog API to let the user confirm closing the application.
  e.returnValue = false;
};

Event: "closed"

当窗口已经关闭的时候触发.当你接收到这个事件的时候，你应当删除对已经关闭的窗口的引用对象和避免再次使用它.

Event: "unresponsive"

在界面卡死的时候触发事件.

Event: "responsive"

在界面恢复卡死的时候触发.

Event: "blur"

在窗口失去焦点的时候触发.

Event: "focus"

在窗口获得焦点的时候触发.

Event: "maximize"

在窗口最大化的时候触发.

Event: "unmaximize"

在窗口退出最大化的时候触发.

Event: "minimize"

在窗口最小化的时候触发.

Event: "restore"

在窗口从最小化恢复的时候触发.

Event: "resize"

在窗口size改变的时候触发.

Event: "move"

在窗口移动的时候触发.

注意：在 OS X 中别名为 moved.

Event: "moved" OS X

在窗口移动的时候触发.

Event: "enter-full-screen"

在的窗口进入全屏状态时候触发.

Event: "leave-full-screen"

在的窗口退出全屏状态时候触发.

Event: "enter-html-full-screen"

在的窗口通过 html api 进入全屏状态时候触发.

Event: "leave-html-full-screen"

在的窗口通过 html api 退出全屏状态时候触发.

Event: "app-command" Windows

在请求一个App Command的时候触发. 典型的是键盘媒体或浏览器命令, Windows上的 "Back" 按钮用作鼠标也会触发.

someWindow.on("app-command", function(e, cmd) {
  // Navigate the window back when the user hits their mouse back button
  if (cmd === "browser-backward" && someWindow.webContents.canGoBack()) {
    someWindow.webContents.goBack();
  }
});

Event: "scroll-touch-begin" OS X

在滚动条事件开始的时候触发.

Event: "scroll-touch-end" OS X

在滚动条事件结束的时候触发.