使用 Electron 創建和管理窗體

Brenner 發布于2019-08-20 14:30 / 2230人閱讀

摘要：使用創建和管理窗體此系列文章的應用示例已發布于可以或下載后運行查看歡迎中的模塊允許您創建新的瀏覽器窗口或管理現有的瀏覽器窗口每個瀏覽器窗口都是一個多帶帶的進程稱為渲染器進程這個進程像控制應用程序生命周期的主進程一樣，可以完全訪問查看完整

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81690.html

使用 Electron 處理窗體崩潰和掛起

摘要：使用處理窗體崩潰和掛起此系列文章的應用示例已發布于可以或下載后運行查看歡迎模塊將在渲染器進程崩潰或掛起時發出事件您可以監聽這些事件并給用戶重新加載等待或關閉該窗口的機會在瀏覽器中打開完整的文檔進程崩潰后重載窗體支持進程在這個示例中我們使用 Electron 處理窗體崩潰和掛起此系列文章的應用示例已發布于 GitHub: electron-api-demos-Zh_CN. 可以 Cl...

Kyxy 2019-08-20 14:31 評論0 收藏0
使用webpack + electron + reactJs開發windows桌面應用

摘要：在開發項目時，可以先用網頁的形式開發項目，等到網頁項目部分差不多完成后，再注入中，開發網頁項目部分和窗體部分的交互在中使用后，將不會打包有關的代碼 electron是一兩年前挺火的一個框架本質上是一個瀏覽器，但是集成了很多windows系統的功能，讓前端開發也可以直接操作windows的窗體，做成一個實打實的桌面軟件團隊主要的技術棧是react，所以考慮用react開發，方便維護。 ...

khlbat 2019-08-23 15:05 評論0 收藏0
electron+vue制作桌面應用--自定義標題欄

摘要：會默認顯示邊框和標題欄，如下圖我們來看一下如何自定義一個更加有意思的標題欄，例如網易云音樂這種首先我們要把默認的標題欄刪掉，找到主進程中創建窗體部分，時添加參數即可這樣會把標題欄和邊框一并隱藏然后我們開始制作自己的標題欄創建組件這里 electron會默認顯示邊框和標題欄，如下圖 showImg(https://segmentfault.com/img/bVXwA5?w=412&h=6...

roundstones 2019-08-30 13:50 評論0 收藏0
electron+vue制作桌面應用--自定義標題欄

摘要：會默認顯示邊框和標題欄，如下圖我們來看一下如何自定義一個更加有意思的標題欄，例如網易云音樂這種首先我們要把默認的標題欄刪掉，找到主進程中創建窗體部分，時添加參數即可這樣會把標題欄和邊框一并隱藏然后我們開始制作自己的標題欄創建組件這里 electron會默認顯示邊框和標題欄，如下圖 showImg(https://segmentfault.com/img/bVXwA5?w=412&h=6...

用戶83 2019-08-21 17:18 評論0 收藏0
electron+vue制作桌面應用--自定義標題欄

摘要：會默認顯示邊框和標題欄，如下圖我們來看一下如何自定義一個更加有意思的標題欄，例如網易云音樂這種首先我們要把默認的標題欄刪掉，找到主進程中創建窗體部分，時添加參數即可這樣會把標題欄和邊框一并隱藏然后我們開始制作自己的標題欄創建組件這里 electron會默認顯示邊框和標題欄，如下圖 showImg(https://segmentfault.com/img/bVXwA5?w=412&h=6...

韓冰 2019-08-01 17:52 評論0 收藏0