使用 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 支持, 謝謝.