资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/使用 Electron 创建和管理窗体

使用 Electron 创建和管理窗体

Brenner / 2195人阅读

摘要：使用创建和管理窗体此系列文章的应用示例已发布于可以或下载后运行查看欢迎中的模块允许您创建新的浏览器窗口或管理现有的浏览器窗口每个浏览器窗口都是一个多带带的进程称为渲染器进程这个进程像控制应用程序生命周期的主进程一样，可以完全访问查看完整

使用 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 支持, 谢谢.
云服务器 GPU云服务器 electron使用webrtc 表的创建和管理 jframe创建窗体 创建域名之后如何使用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81690.html

相关文章

  • 使用 Electron 处理窗体崩溃和挂起

    摘要：使用处理窗体崩溃和挂起此系列文章的应用示例已发布于可以或下载后运行查看欢迎模块将在渲染器进程崩溃或挂起时发出事件您可以监听这些事件并给用户重新加载等待或关闭该窗口的机会在浏览器中打开完整的文档进程崩溃后重载窗体支持进程在这个示例中我们 使用 Electron 处理窗体崩溃和挂起 此系列文章的应用示例已发布于 GitHub: electron-api-demos-Zh_CN. 可以 Cl...

    Kyxy 评论0 收藏0

  • 使用webpack + electron + reactJs开发windows桌面应用

    摘要：在开发项目时，可以先用网页的形式开发项目，等到网页项目部分差不多完成后，再注入中，开发网页项目部分和窗体部分的交互在中使用后，将不会打包有关的代码 electron是一两年前挺火的一个框架本质上是一个浏览器，但是集成了很多windows系统的功能，让前端开发也可以直接操作windows的窗体，做成一个实打实的桌面软件 团队主要的技术栈是react，所以考虑用react开发，方便维护。 ...

    khlbat 评论0 收藏0

  • electron+vue制作桌面应用--自定义标题栏

    摘要：会默认显示边框和标题栏，如下图我们来看一下如何自定义一个更加有意思的标题栏，例如网易云音乐这种首先我们要把默认的标题栏删掉，找到主进程中创建窗体部分，时添加参数即可这样会把标题栏和边框一并隐藏然后我们开始制作自己的标题栏创建组件这里 electron会默认显示边框和标题栏，如下图 showImg(https://segmentfault.com/img/bVXwA5?w=412&h=6...

    roundstones 评论0 收藏0

  • electron+vue制作桌面应用--自定义标题栏

    摘要：会默认显示边框和标题栏，如下图我们来看一下如何自定义一个更加有意思的标题栏，例如网易云音乐这种首先我们要把默认的标题栏删掉，找到主进程中创建窗体部分，时添加参数即可这样会把标题栏和边框一并隐藏然后我们开始制作自己的标题栏创建组件这里 electron会默认显示边框和标题栏，如下图 showImg(https://segmentfault.com/img/bVXwA5?w=412&h=6...

    用户83 评论0 收藏0

  • electron+vue制作桌面应用--自定义标题栏

    摘要：会默认显示边框和标题栏，如下图我们来看一下如何自定义一个更加有意思的标题栏，例如网易云音乐这种首先我们要把默认的标题栏删掉，找到主进程中创建窗体部分，时添加参数即可这样会把标题栏和边框一并隐藏然后我们开始制作自己的标题栏创建组件这里 electron会默认显示边框和标题栏，如下图 showImg(https://segmentfault.com/img/bVXwA5?w=412&h=6...

    韩冰 评论0 收藏0

发表评论

登陆后可评论

0条评论

Brenner

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<