使用 Electron 建立和管理窗体

使用 Electron 建立和管理窗体

此系列文章的应用示例已发布于 GitHub: electron-api-demos-Zh_CN. 能够 Clone 或下载后运行查看. 欢迎 Star .

Electron 中的 BrowserWindow 模块容许您建立新的浏览器窗口或管理现有的浏览器窗口.

每一个浏览器窗口都是一个单独的进程, 称为渲染器进程. 这个进程, 像控制应用程序生命周期的主进程同样，能够彻底访问 Node.js API.

查看 完整的 API 文档 .

建立一个新窗体

支持: Win, macOS, Linux | 进程: Main

经过 BrowserWindow 模块能够在应用程序中建立新窗口. 这个主进程模块能够和渲染器进程与 remote 模块一块儿使用, 如本示例中所示.

建立新窗口时有不少参数. 示例中用了一部分, 完整的列表请查看 API 文档.

渲染器进程

const BrowserWindow = require('electron').remote.BrowserWindow
const path = require('path')

const newWindowBtn = document.getElementById('new-window')

newWindowBtn.addEventListener('click', function (event) {
  const modalPath = path.join('file://', __dirname, '../../sections/windows/modal.html')
  let win = new BrowserWindow({ width: 400, height: 320 })
  win.on('close', function () { win = null })
  win.loadURL(modalPath)
  win.show()
})

高级技巧

使用不可见的浏览器窗口来运行后台任务.

您能够将新的浏览器窗口设置为不显示 (即不可见), 以便将该渲染器进程做为 JavaScript 的一种新线程附加在应用程序后台运行. 您能够经过在定义新窗口时将 show 属性设置为 false 来执行此操做.

var win = new BrowserWindow({
  width: 400, height: 225, show: false
})

管理窗体状态

支持: Win, macOS, Linux | 进程: Main

在这个示例中, 咱们建立一个新窗口, 并监听 move 和 resize 事件. 点击示例按钮, 并更改新窗口大小和位置, 而后在上方查看输出的大小和位置信息.

有不少方法用于控制窗口的状态, 如大小, 位置和焦点状态以及监听窗口更改的事件. 完整的列表请查看 API 文档.

渲染器进程

const BrowserWindow = require('electron').remote.BrowserWindow
const path = require('path')

const manageWindowBtn = document.getElementById('manage-window')
let win

manageWindowBtn.addEventListener('click', function (event) {
  const modalPath = path.join('file://', __dirname, '../../sections/windows/manage-modal.html')
  win = new BrowserWindow({ width: 400, height: 275 })
  win.on('resize', updateReply)
  win.on('move', updateReply)
  win.on('close', function () { win = null })
  win.loadURL(modalPath)
  win.show()
  function updateReply () {
    const manageWindowReply = document.getElementById('manage-window-reply')
    const message = `大小: ${win.getSize()} - 位置: ${win.getPosition()}`
    manageWindowReply.innerText = message
  }
})

窗体事件: 获取和失去焦点

支持: Win, macOS, Linux | 进程: Main

在这个示例中, 咱们建立一个新窗体并监听它的 blur 事件. 点击示例按钮建立一个新的模态窗体, 而后点击父级窗体来切换焦点. 你能够经过点击 示例获取焦点 按钮来让示例窗体再次得到焦点.

渲染器进程

const BrowserWindow = require('electron').remote.BrowserWindow
const path = require('path')

const manageWindowBtn = document.getElementById('listen-to-window')
const focusModalBtn = document.getElementById('focus-on-modal-window')
let win

manageWindowBtn.addEventListener('click', function () {
  const modalPath = path.join('file://', __dirname, '../../sections/windows/modal-toggle-visibility.html')
  win = new BrowserWindow({ width: 600, height: 400 })
  win.on('focus', hideFocusBtn)
  win.on('blur', showFocusBtn)
  win.on('close', function () {
    hideFocusBtn()
    win = null
  })
  win.loadURL(modalPath)
  win.show()
  function showFocusBtn (btn) {
    if (!win) return
    focusModalBtn.classList.add('smooth-appear')
    focusModalBtn.classList.remove('disappear')
    focusModalBtn.addEventListener('click', function () { win.focus() })
  }
  function hideFocusBtn () {
    focusModalBtn.classList.add('disappear')
    focusModalBtn.classList.remove('smooth-appear')
  }
})

建立一个无框窗体

支持: Win, macOS, Linux | 进程: Main

无框窗口就是一个没有 "chrome" 的窗口, 好比工具栏，标题栏，状态栏，边框等. 你能够在建立窗体时经过设置 frame 为 false 来建立一个无框的窗体.

渲染器进程

const BrowserWindow = require('electron').remote.BrowserWindow
const newWindowBtn = document.getElementById('frameless-window')

const path = require('path')

newWindowBtn.addEventListener('click', function (event) {
  const modalPath = path.join('file://', __dirname, '../../sections/windows/modal.html')
  let win = new BrowserWindow({ frame: false })
  win.on('close', function () { win = null })
  win.loadURL(modalPath)
  win.show()
})

窗体也能够有一个透明的背景. 经过设置 transparent 参数为 true, 你也能够让你的无框窗口透明:

var win = new BrowserWindow({
  transparent: true,
  frame: false
})

更多内容, 请查阅 无框窗体文档 .

若是这边文章对您有帮助, 感谢 下方点赞 或 Star GitHub: electron-api-demos-Zh_CN 支持, 谢谢.