NW.js简介

官网：
GitHub：

nw.js 基于Node.js 和 Chromium ，可以看做是node-webkit的缩写，是创建桌面应用的方案之一。相比于Electron，可以直接使用HTML构建应用。

下载及使用

到 nw.js 官网 https://nwjs.io/，下载最新的应用，有normal版和SDK版，随便下载一个即可。

解压后可以看到以下目录结构：
Snipaste_2022-03-08_10-03-18.png
其中：

  • package.json配置了应用的入口文件
  • src是我自己创建的，永远存放html源文件
  • nw.exe是可执行文件

修改 package.json配置入口文件：

  1. {
  2.   "name": "这是一个名称",
  3.   "main": "src/index.html",
  4.   "nodejs": true,
  5.   "window": {
  6.     "title": "这是一个标题",
  7.     "toolbar": true,
  8.     "width": 1920,
  9.     "height": 1080,
  10.     "resizable":true,
  11.     "show_in_taskbar":true,
  12.     "frame":true,
  13.     "kiosk":false
  14.   },
  15.   "webkit":{
  16.     "plugin":true
  17.   }
  18. }

其中：

  • name指定应用名称
  • main指定入口文件
  • window配置视窗参数

配置好后，创建一个入口文件 src/index.html即可。随便输入点内容，双加 nw,exe执行即可。

窗口控制

本来以为会跟浏览器一样，可以通过快捷键来控制窗口，试了才知道，根本不行。

查阅资料，发现nw.js可以使用node模块，可以模拟浏览器的控制方式控制窗口。

按照以下快捷键操作进行控制：

  • F5刷新
  • F11最大化
  • F12调出控制台
  • ESC退出窗口

我们结合浏览器以及node模块引入的写法，可以达到以上控制目的：

  1. let gui = require('nw.gui')
  2. let win = gui.Window.get()
  3. let devToolFlag = false
  5. window.addEventListener('keyup', (e) => {
  6.   // alert(e.keyCode)
  8.   // 按下F11全屏
  9.   if (e.keyCode === 122) {
  10.     win.toggleFullscreen()
  11.   }
  13.   // 按下F12打开控制台
  14.   if (e.keyCode === 123) {
  15.     devToolFlag = !devToolFlag
  16.     if (devToolFlag) {
  17.       win.showDevTools()
  18.     } else {
  19.       win.closeDevTools()
  20.     }
  21.   }
  23.   // 按下F5刷新
  24.   if (e.keyCode === 116) {
  25.     win.reload()
  26.   }
  28.   // 按下ESC关闭窗口
  29.   if (e.keyCode === 27) {
  30.     win.close()
  31.   }
  32. })

通过监听键盘抬起事件，判断其 keyCode，执行不同窗口操作即可。

:::warning 注意：打开控制台需要SDK版本才支持。 :::

调用Node.js方法

在NW.js中，可以直接调用Node.js的方法。

比如：

  1.     const os = require('os')
  2.     console.log(os)
  3.     alert(os.arch())
  4.     alert(os.version())

生成安装包

通常情况下，直接将整个项目打包为压缩文件，解压后运行 nw.exe即可。

如果想打包为安装程序，并生成快捷方式，可以借助WinRAR的自解压程序。

具体操作如下：

  1. 改选“创建自解压格式压缩文件”

Snipaste_2022-04-06_15-30-53.png

  1. 切到“高级”选项卡，点击“自解压选项”

Snipaste_2022-04-06_15-32-03.png

  1. 选择“添加快捷方式”

Snipaste_2022-04-06_15-33-10.png

  1. 输入源文件名、快捷方式名等，可以使用相对路径

Snipaste_2022-04-06_15-34-04.pngSnipaste_2022-04-06_15-36-35.png

打包好后，生成自解压安装文件：
Snipaste_2022-04-06_15-58-58.png

安装完成后，会在桌面生成一个快捷方式：
Snipaste_2022-04-06_16-00-42.png

如果要指定快捷方式的图标，需要在“快捷方式图标”栏填写图标路径，相对于压缩包项目本身的路径，图标需要为.ico扩展名。比如：
Snipaste_2022-04-15_02-56-48.webp

解压时注意，需要在当前解压目录建一个文件夹，否则解压后文件会散落到当前目录：
Snipaste_2022-04-15_03-23-08.png