2024-02-22 记录一则NW.js桌面开发

nw.js，一个和Electron类似的桌面开发框架，相较于后者，我认为前者在打包这块更快速、简便。

在开发前，先把nw的环境给配置好，前往nw的官网下载：http://nwjs.org.cn/download.html

2025-02-21 更新：上面的链接似乎无法打开了，nw的官网似乎换地址了：https://nwjs.io/

sdk的下载链接：https://dl.nwjs.io/v0.96.0/nwjs-v0.96.0-win-x64.zip(如果你无法打开上面的下载链接的话就点这个)

我下的是sdk版的，normal版的没有调试，sdk的有，建议在开发中还是用sdk的为好，下载完了直接解压，到时候预览以及打包什么的都要用到里面的nw.exe。

开发过程就和平常开发前端网页一样，目录如下：

先新建一个文件夹，然后在里面添加两个文件：index.html

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>nw.js</title>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

接着再新建个package.json，里面填写一些必要的配置，

{
    "name": "nw-demo",
    "version": "0.0.1",
    "main": "index.html",
    "window": {
        "title": "nw-demo",
        "toolbar": false,
        "frame": true,
        "show_in_taskbar": true,
        "width": 800,
        "height": 500,
        "position": "mouse",
        "min_width": 400,
        "min_height": 200,
        "max_width": 800,
        "max_height": 600
    }
}

如何运行？把test文件拖到nw.exe上面，然后松开手，

哎！它会弹出一个窗口，这个窗口就是你刚才写得helloworld。

这时候就完成一半了，剩下的一半就是打包的操作：

把test文件夹压缩成test.nw，然后在nw.exe的目录里打开cmd，注意：是cmd而不是powershell（如何不在c盘打开cmd？你可以先打开cmd，然后再输入D:就能进入D盘）

好了，进入nw.exe对应的盘的cmd，然后输入命令：

copy /b nw.exe+test.nw test.exe

注意上面的代码中的加号+，它没有空格，copy /b的作用就是把多个文件合并成一个单独的文件，不会影响被操纵的文件

回车，然后你就能在nw.exe目录里找到test.exe，双击它，就能显示你写的helloworld。

结语：这种打包，只能在nw.exe的运行环境里面运行，也就是说还是处于开发环境的，上到生产还需其他步骤。

package.json配置（内容由ai整理）：

1. 基础字段

`name`

类型: 字符串
描述: 应用程序的名称。
示例:
json

深色版本
```
"name": "MyApp"
```

`main`

类型: 字符串
描述: 指定 NW.js 应用的入口文件（通常是 HTML 文件）。
示例:
```
"main": "index.html"
```

`description`

类型: 字符串
描述: 应用程序的描述信息。

示例:

"description": "这是一个基于 NW.js 的桌面应用"

`version`

类型: 字符串
描述: 应用程序的版本号，遵循语义化版本控制（如 1.0.0）。
示例:
```
"version": "1.0.0"
```

2. 窗口配置 (`window`)

window 对象用于定义主窗口的行为和外观。

`title`

类型: 字符串
描述: 窗口标题。
示例:
```
"title": "我的应用"
```

`width` 和 `height`

类型: 数字
描述: 设置窗口的初始宽度和高度（单位为像素）。
示例:
```
"width": 800,
"height": 600
```

`min_width` 和 `min_height`

类型: 数字
描述: 设置窗口的最小宽度和高度。
示例:
```
"min_width": 400,
"min_height": 300
```

`max_width` 和 `max_height`

类型: 数字
描述: 设置窗口的最大宽度和高度。
示例:
```
"max_width": 1200,
"max_height": 900
```

`position`

类型: 字符串
描述: 窗口的初始位置，可以设置为 center（居中）或自定义坐标。
示例:
```
"position": "center"
```

`toolbar`

类型: 布尔值
描述: 是否显示工具栏（默认为 false）。
示例:
```
"toolbar": false
```

`frame`

类型: 布尔值
描述: 是否显示窗口边框（默认为 true）。
示例:
```
"frame": true
```

`resizable`

类型: 布尔值
描述: 是否允许用户调整窗口大小（默认为 true）。
示例:
```
"resizable": true
```

`transparent`

类型: 布尔值
描述: 是否启用透明背景（需要配合 CSS 使用）。
示例:
```
"transparent": false
```

`show_in_taskbar`

类型: 布尔值
描述: 是否在任务栏显示窗口（默认为 true）。
示例:
```
"show_in_taskbar": true
```

`icon`

类型: 字符串
描述: 窗口图标的路径。
示例:
```
"icon": "assets/icon.ico"
```

3. Node.js 配置

`nodejs`

类型: 布尔值
描述: 是否启用 Node.js 环境（默认为 false）。
示例:
```
"nodejs": true
```

`node-remote`

类型: 字符串或数组
描述: 指定哪些 URL 不加载 Node.js 环境（适用于第三方网站）。

示例:

"node-remote": ["http://example.com", "https://*.github.com"]

4. Chromium 参数

`chromium-args`

类型: 字符串
描述: 传递给 Chromium 的命令行参数。
常用参数:
- --disable-web-security: 禁用同源策略。
- --incognito: 以隐身模式运行。
- --start-maximized: 窗口最大化启动。

示例:

"chromium-args": "--disable-web-security --start-maximized"

5. WebKit 配置

`webkit`

类型: 对象
描述: 配置 WebKit 的行为。

`plugin`

类型: 布尔值
描述: 是否启用插件支持（如 Flash）。
示例:
```
"webkit": {
  "plugin": false
}
```

`page-cache`

类型: 布尔值
描述: 是否启用页面缓存。
示例:
```
"webkit": {
  "page-cache": true
}
```

6. 其他配置

`single-instance`

类型: 布尔值
描述: 是否允许多个实例运行（默认为 false）。
示例:
```
"single-instance": true
```

`webkit-settings`

类型: 对象
描述: 配置 WebKit 的高级设置。

示例:

"webkit-settings": {
  "javascript-can-open-windows-automatically": true,
  "default_font_size": 16,
  "default_fixed_font_size": 13
}

问题1：为什么窗口右上角没有全屏按钮？

回答：因为你在package.json里面指定了宽高，请把width删掉试试

posted @ 2024-02-22 10:41 叶乘风阅读(544) 评论(0) 收藏举报

刷新页面返回顶部

叶乘风

需求反馈可致电：15915815021 或发送邮件至 : 15915815021@163.com

2024-02-22 记录一则NW.js桌面开发

1. 基础字段

name

main

description

version

2. 窗口配置 (window)

title

width 和 height

min_width 和 min_height

max_width 和 max_height

position

toolbar

frame

resizable

transparent

show_in_taskbar

icon