資訊專欄INFORMATION COLUMN
摘要：使用創(chuàng)建和管理窗體此系列文章的應(yīng)用示例已發(fā)布于可以或下載后運(yùn)行查看歡迎中的模塊允許您創(chuàng)建新的瀏覽器窗口或管理現(xiàn)有的瀏覽器窗口每個(gè)瀏覽器窗口都是一個(gè)多帶帶的進(jìn)程稱為渲染器進(jìn)程這個(gè)進(jìn)程像控制應(yīng)用程序生命周期的主進(jìn)程一樣，可以完全訪問查看完整
使用 Electron 創(chuàng)建和管理窗體
此系列文章的應(yīng)用示例已發(fā)布于 GitHub: electron-api-demos-Zh_CN. 可以 Clone 或下載后運(yùn)行查看. 歡迎 Star .
Electron 中的 BrowserWindow 模塊允許您創(chuàng)建新的瀏覽器窗口或管理現(xiàn)有的瀏覽器窗口.
每個(gè)瀏覽器窗口都是一個(gè)多帶帶的進(jìn)程, 稱為渲染器進(jìn)程. 這個(gè)進(jìn)程, 像控制應(yīng)用程序生命周期的主進(jìn)程一樣，可以完全訪問 Node.js API.
查看 完整的 API 文檔 .
創(chuàng)建一個(gè)新窗體支持: Win, macOS, Linux | 進(jìn)程: Main
通過 BrowserWindow 模塊可以在應(yīng)用程序中創(chuàng)建新窗口. 這個(gè)主進(jìn)程模塊可以和渲染器進(jìn)程與 remote 模塊一起使用, 如本示例中所示.
創(chuàng)建新窗口時(shí)有很多參數(shù). 示例中用了一部分, 完整的列表請(qǐng)查看 API 文檔.
渲染器進(jìn)程
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()
})
高級(jí)技巧
使用不可見的瀏覽器窗口來運(yùn)行后臺(tái)任務(wù).
您可以將新的瀏覽器窗口設(shè)置為不顯示 (即不可見), 以便將該渲染器進(jìn)程作為 JavaScript 的一種新線程附加在應(yīng)用程序后臺(tái)運(yùn)行. 您可以通過在定義新窗口時(shí)將 show 屬性設(shè)置為 false 來執(zhí)行此操作.
var win = new BrowserWindow({
width: 400, height: 225, show: false
})
管理窗體狀態(tài)
支持: Win, macOS, Linux | 進(jìn)程: Main
在這個(gè)示例中, 我們創(chuàng)建一個(gè)新窗口, 并監(jiān)聽 move 和 resize 事件. 點(diǎn)擊示例按鈕, 并更改新窗口大小和位置, 然后在上方查看輸出的大小和位置信息.
有很多方法用于控制窗口的狀態(tài), 如大小, 位置和焦點(diǎn)狀態(tài)以及監(jiān)聽窗口更改的事件. 完整的列表請(qǐng)查看 API 文檔.
渲染器進(jìn)程
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
}
})
窗體事件: 獲取和失去焦點(diǎn)
支持: Win, macOS, Linux | 進(jìn)程: Main
在這個(gè)示例中, 我們創(chuàng)建一個(gè)新窗體并監(jiān)聽它的 blur 事件. 點(diǎn)擊示例按鈕創(chuàng)建一個(gè)新的模態(tài)窗體, 然后點(diǎn)擊父級(jí)窗體來切換焦點(diǎn). 你可以通過點(diǎn)擊 示例獲取焦點(diǎn) 按鈕來讓示例窗體再次獲得焦點(diǎn).
渲染器進(jìn)程
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")
}
})
創(chuàng)建一個(gè)無框窗體
支持: Win, macOS, Linux | 進(jìn)程: Main
無框窗口就是一個(gè)沒有 "chrome" 的窗口, 比如工具欄，標(biāo)題欄，狀態(tài)欄，邊框等. 你可以在創(chuàng)建窗體時(shí)通過設(shè)置 frame 為 false 來創(chuàng)建一個(gè)無框的窗體.
渲染器進(jìn)程
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()
})
窗體也可以有一個(gè)透明的背景. 通過設(shè)置 transparent 參數(shù)為 true, 你也可以讓你的無框窗口透明:
var win = new BrowserWindow({
transparent: true,
frame: false
})
更多內(nèi)容, 請(qǐng)查閱 無框窗體文檔 .
如果這邊文章對(duì)您有幫助, 感謝 下方點(diǎn)贊 或 Star GitHub: electron-api-demos-Zh_CN 支持, 謝謝.
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/81690.html
摘要：使用處理窗體崩潰和掛起此系列文章的應(yīng)用示例已發(fā)布于可以或下載后運(yùn)行查看歡迎模塊將在渲染器進(jìn)程崩潰或掛起時(shí)發(fā)出事件您可以監(jiān)聽這些事件并給用戶重新加載等待或關(guān)閉該窗口的機(jī)會(huì)在瀏覽器中打開完整的文檔進(jìn)程崩潰后重載窗體支持進(jìn)程在這個(gè)示例中我們 使用 Electron 處理窗體崩潰和掛起 此系列文章的應(yīng)用示例已發(fā)布于 GitHub: electron-api-demos-Zh_CN. 可以 Cl...
摘要：在開發(fā)項(xiàng)目時(shí)，可以先用網(wǎng)頁的形式開發(fā)項(xiàng)目，等到網(wǎng)頁項(xiàng)目部分差不多完成后，再注入中，開發(fā)網(wǎng)頁項(xiàng)目部分和窗體部分的交互在中使用后，將不會(huì)打包有關(guān)的代碼 electron是一兩年前挺火的一個(gè)框架本質(zhì)上是一個(gè)瀏覽器，但是集成了很多windows系統(tǒng)的功能，讓前端開發(fā)也可以直接操作windows的窗體，做成一個(gè)實(shí)打?qū)嵉淖烂孳浖?團(tuán)隊(duì)主要的技術(shù)棧是react，所以考慮用react開發(fā)，方便維護(hù)。 ...
摘要：會(huì)默認(rèn)顯示邊框和標(biāo)題欄，如下圖我們來看一下如何自定義一個(gè)更加有意思的標(biāo)題欄，例如網(wǎng)易云音樂這種首先我們要把默認(rèn)的標(biāo)題欄刪掉，找到主進(jìn)程中創(chuàng)建窗體部分，時(shí)添加參數(shù)即可這樣會(huì)把標(biāo)題欄和邊框一并隱藏然后我們開始制作自己的標(biāo)題欄創(chuàng)建組件這里 electron會(huì)默認(rèn)顯示邊框和標(biāo)題欄，如下圖 showImg(https://segmentfault.com/img/bVXwA5?w=412&h=6...
摘要：會(huì)默認(rèn)顯示邊框和標(biāo)題欄，如下圖我們來看一下如何自定義一個(gè)更加有意思的標(biāo)題欄，例如網(wǎng)易云音樂這種首先我們要把默認(rèn)的標(biāo)題欄刪掉，找到主進(jìn)程中創(chuàng)建窗體部分，時(shí)添加參數(shù)即可這樣會(huì)把標(biāo)題欄和邊框一并隱藏然后我們開始制作自己的標(biāo)題欄創(chuàng)建組件這里 electron會(huì)默認(rèn)顯示邊框和標(biāo)題欄，如下圖 showImg(https://segmentfault.com/img/bVXwA5?w=412&h=6...
摘要：會(huì)默認(rèn)顯示邊框和標(biāo)題欄，如下圖我們來看一下如何自定義一個(gè)更加有意思的標(biāo)題欄，例如網(wǎng)易云音樂這種首先我們要把默認(rèn)的標(biāo)題欄刪掉，找到主進(jìn)程中創(chuàng)建窗體部分，時(shí)添加參數(shù)即可這樣會(huì)把標(biāo)題欄和邊框一并隱藏然后我們開始制作自己的標(biāo)題欄創(chuàng)建組件這里 electron會(huì)默認(rèn)顯示邊框和標(biāo)題欄，如下圖 showImg(https://segmentfault.com/img/bVXwA5?w=412&h=6...
閱讀 2366·2021-11-25 09:43
閱讀 2874·2021-11-24 09:39
閱讀 2937·2019-08-30 11:10
閱讀 1146·2019-08-29 16:34
閱讀 610·2019-08-29 13:25
閱讀 3369·2019-08-29 11:21
閱讀 2872·2019-08-26 11:39
閱讀 2404·2019-08-26 11:34
