在前端开发中，我们经常会用到 NW.js（原名 node-webkit） 来打包前端应用程序。但是 NW.js 自带的框架并不太美观，难以满足用户的审美要求和需求。而 nw-custom-frame 就是一款可以自定义 NW.js 窗口样式的 npm 包。
1. 安装 nw-custom-frame
安装 nw-custom-frame 非常简单，只需要在命令行中输入以下命令即可：
npm install nw-custom-frame --save
2. 使用 nw-custom-frame
2.1 引入 nw-custom-frame
在您的项目中引入 nw-custom-frame 时，需要在您的 index.html 中添加以下代码：
<!-- 引入 nw-custom-frame 样式表 --> <link rel="stylesheet" href="node_modules/nw-custom-frame/nw-custom-frame.css"> <!-- 引入 nw-custom-frame 脚本 --> <script src="node_modules/nw-custom-frame/nw-custom-frame.js"></script>
2.2 自定义样式
nw-custom-frame 提供了一个默认的样式表。您可以自定义样式，覆盖默认的样式。以下是一些您可以定制的样式：
-- -------------------- ---- -------
-- ---- --
---------------- ------ -
------ -----
---------- -----
------------ -----
-
-- ---- --
---------------- ------- -
------ -----
------- -----
------- ----
-
-- ---- --
---------------- -------------------- -
-------- ----
---------- -----
-2.3 初始化 nw-custom-frame
一旦 nw-custom-frame 样式表和脚本被加载后，您需要在您的 javascript 文件中初始化它：
-- -------------------- ---- -------
----- ------------- - ---------------------------
--------------------
------ --- ------ ----- ------- -- ------
----- -------------------- -- ----------
---------- -
-- ---------
- ------ ------- -------- -- ------ ------ -- --
- ------ ------- -------- -- ------ ----- -- --
- ------ ------- -------- -- ------ ----- --- -- - ------ ----- ---- -- -
-
---2.4 示例代码
以下是一个完整的示例代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------- ------ ----- --------------
----- ---------------- --------------------------------------------------------
------- ---------------------------------------------------------------
-------
------
---------- ---------------------
--------
----- ------------- - ---------------------------
--------------------
------ --- ------ ----- ------- -- ------
----- -------------------- -- ----------
---------- -
-- ---------
- ------ ------- -------- -- ------ ------ -- --
- ------ ------- -------- -- ------ ----- -- --
- ------ ------- -------- -- ------ ----- --- -- - ------ ----- ---- -- -
-
---
---------
-------
-------3. 结语
nw-custom-frame 是一款非常好用的 npm 包，在 NW.js 应用程序中可以提供自定义窗口样式的需求。通过正确的使用 nw-custom-frame 包并调整样式表，可以实现多种不同风格的窗口样式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057bc181e8991b448eb9b2