随着 Electron 技术的流行，Electron 应用在前端工程师中变得越来越普及。而其中使用 Electron 构建桌面应用时，在窗口管理方面会有一些问题。针对这一点，本文介绍了 npm 包 @nicohaco/electron-window-manager，它可以方便地管理 Electron 应用的窗口，并提供了更多的功能和事件来丰富你的应用。
安装
你可以通过 npm 进行安装该 npm 包：
npm install @nicohaco/electron-window-manager
基本使用
首先，需要在 Node 的文件中引用该 npm 包。接着定义 WindowManager，并在实例化之前设置它的配置属性：
-- -------------------- ---- -------
----- ------------- - ---------------------------------------------
-------------------- - -
-------- -
------------- ---------
--------------- --------
----------- --------
-------------- ----------
-
--
----- --------- - --- -----------------------
----- ------------ - --- -------------------- ----
----- ------------ - --- -------------------- ----接下来，我们可以在各个窗口中添加相应的菜单项（如上一个窗口、下一个窗口、新建一个窗口等）：
-- -------------------- ---- -------
----- ------- - ---------------------------
-------
--------------- ------ -
-
------ -----------------------------------
------ -- -- -
--------------------------- --------- - -------------------- --------------------
-
-
--
--------------- --------- -
-
------ -------------------------------------
------------ -----------------------
------ -- -- -
-------------------------
-
--
-
------ ---------------------------------
------------ ------------------------
------ -- -- -
---------------------
-
-
---
------------------------ ------- -
-
------ -----------------------------------
-
---视窗显示与隐藏
接下来，这里是一些管理窗口的基本操作：
appWindow.showWindow(); childWindow1.showWindow(); childWindow2.showWindow(); appWindow.hideWindow(); childWindow1.hideWindow(); childWindow2.hideWindow();
应用退出
当应用退出时，应当将所有的子窗口都关闭：
const manager = WindowManager.getManager();
app.on('before-quit', function(event) {
event.preventDefault();
manager.closeAllWindows();
app.exit();
});窗口聚焦事件
可以通过 WindowManager 的 onFocus 方法来定义窗口的聚焦事件：
const manager = WindowManager.getManager();
manager.onFocus((windowObj) => {
console.log('聚焦的窗口是：', windowObj);
});当某个子窗口获得焦点时，该方法会被触发。你可以使用该方法做一些额外的操作（如在状态栏中显示当前窗口的名字）。
高级使用
窗口拆分
接下来，我们可以使用 splitWindow 方法在主窗口中实现窗口拆分：
const manager = WindowManager.getManager();
appWindow.splitWindow(childWindow1, childWindow2, { layout: 'horizontal' });你可以在应用中实现拆分或滑动窗口。
多语言支持
WindowManager 支持多语言，并且可以很方便地切换语言。
const manager = WindowManager.getManager();
manager.changeLocale('en-US');
manager.changeLocale('zh-CN');预定义主题
除了以上提到的基本设置和事件以外，WindowManager 还支持预定义主题。你可以在主窗口中定义应用的主题，然后方便地修改窗口的外观。
-- -------------------- ---- ------- ----- ------- - --------------------------- ----- --------- - --- ---------------------- - ------ ------ ----- ------ -- ----------- ------------ ----- -- ---- ------ ----- ------- ---- ---------------- ------- ------ ------- --------- --------- ------ ------- -- ------ ---
你也可以自己定义主题。上述定义的预定义主题，light 和 dark，可以在你的应用样式中引用。
监听窗口事件
可以通过 WindowManager 的 on 方法监听窗口的各种事件。
-- -------------------- ---- ------- ----- ------- - --------------------------- ---------------------------- -- -- - ----------------------- --- ------------------------------ -- -- - ----------------------- --- ------------------------- -- -- - ----------------------- --- -------------------------- -- -- - ----------------------- --- --------------------------- -- -- - ---------------------- --- ---------------------------- -- -- - --------------------- ---
示例代码
如果你需要更加深入地学习如何使用 WindowManager，这里有一些示例代码供你参考：
-- -------------------- ---- -------
----- ---- - ----------------
----- -------- - --------------------
----- ------------- - ---------------------------------------------
----- --- - -------------
----- ------------- - -----------------------
----- ---------- - -----
-- -------------
-------------------- - -
-------- -
------------- ---------
--------------- --------
----------- --------
-------------- ----------
-
--
----- --------- - --- ---------------------- -
------ ------
----- ------ -- -----------
------------ ----- -- ----
------ -----
------- ----
---------------- -------
------ -------
--------- ---------
------ ------- -- ------
---
----- ------------ - --- -------------------- --- -
------- ---------------------
---
----- ------------ - --- -------------------- --- -
------- ---------------------
---
----- ------- - ---------------------------
-------
--------------- ------ -
-
------ -----------------------------------
------ -- -- -
--------------------------- --------- - -------------------- --------------------
-
-
--
--------------- --------- -
-
------ -------------------------------------
------------ -----------------------
------ -- -- -
-------------------------
-
--
-
------ ---------------------------------
------------ ------------------------
------ -- -- -
---------------------
-
-
---
------------------------ ------- -
-
------ -----------------------------------
-
---
--------------- ---------- -
---------- - --- ---------------
------ ----
------- ----
----- -----
---
-----------------------
--------------------------
--------------------------
---
--------------------------- ---------- -
----- ------- - ---------------------------
--------------------------
-----------
---结论
WindowManager 可以在 Electron 应用中方便地管理窗口，并且提供了更多的功能和事件来丰富你的应用。通过使用该 npm 包，你可以快速地实现窗口拆分、多语言支持、预定义主题和监控窗口事件等功能。如果你正在构建一个 Electron 应用，并且需要更加权威的窗口管理方法，那么 WindowManager 会是你的不二之选。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671a830d0927023822703