NW.js 教程：使用 Node.js 和 Chromium 构建桌面应用及打包发布

简介

NW.js 核心特性与优势

NW.js（原名为 node-webkit）是一款结合了 Chromium 浏览器内核与 Node.js 运行时的应用开发平台。借助该平台，开发者可以利用 HTML 和 JavaScript 技术栈来构建原生桌面应用程序。它打破了传统 Web 技术的局限，允许在 DOM 环境中直接调用 Node.js 的模块，从而确立了一种完全基于 Web 技术栈开发原生应用的新型开发模式。

NW.js 提供了一种全新的应用开发思路，允许开发者使用目前网络上最主流的技术栈来编写原生应用程序。

该框架完全基于 HTML5、CSS3、JavaScript 以及 WebGL 技术进行构建，确保应用具备现代化的视觉呈现与交互能力。

NW.js 完整支持 Node.js 的所有 API 以及丰富的第三方模块，开发者可以直接在应用中调用系统级功能。

通过 NW.js，开发者可以直接利用 DOM 操作来调用 Node.js 模块，实现了前端界面与后端逻辑的无缝交互。

NW.js 应用具备易于打包和分发的特性，简化了从开发环境到最终用户设备的部署流程。

NW.js 支持广泛的运行环境，包括 32 位和 64 位的 Windows、Linux 以及 Mac OS 操作系统，确保了应用的跨平台兼容性。

以下是 NW.js 的具体使用方法与步骤：

NW.js 环境下载与配置

一、下载 NW.js 运行环境

首先，访问 NW.js 官网（http://nwjs.io/）下载所需的版本。

在下载页面中，通常包含 normal（普通版）和 sdk（开发版）两种类型。Normal 版仅包含运行时，适合最终分发；SDK 版则包含调试工具箱等开发辅助工具。建议开发者将两者都下载下来，以便在不同阶段使用。

下载地址为：https://nwjs.io/downloads/

其次，下载 Enigma Virtual Box 软件（官网：http://enigmaprotector.com/），该工具用于后续的打包合并操作。

二、配置 package.json 文件


{
 "name": "nw-demo",
 "version": "0.0.1",
 "main": "index.html"
}

在项目根目录下创建或编辑 package.json 文件，以下是更多可用的配置选项说明：


{
 "main": "app/index.html", 
 "name": "WeixinMenuEditor",
 "description": "使用nw.js封装的一个微信公众号菜单编辑器App",
 "version": "0.0.1",
 "keywords": [ "微信", "菜单编辑器" ], 
 "window": {
 "title": "微信菜单编辑器",
 "icon": "app/static/img/weixin_logo.jpg",
 "toolbar": true,
 "frame": true,
 "width": 1008,
 "height": 750,
 "position": "center",
 "min_width": 400,
 "min_height": 200
 },
 "webkit": {
 "plugin": true,
 "java": false,
 "page-cache": false 
 },
 "chromium-args" :"-allow-file-access-from-files"
}

title：字符串类型，用于设置应用窗口的默认标题。
width/height：数值类型，定义主窗口的初始宽度和高度。
toolbar：布尔值，控制是否显示浏览器的导航工具栏。
icon：字符串路径，指定窗口左上角显示的图标文件。
position：字符串类型，设置窗口打开时的初始位置，可选值包括“null”、“center”（居中）或“mouse”（跟随鼠标）。
min_width/min_height：数值类型，限制窗口可调整的最小宽度和高度。
max_width/max_height：数值类型，限制窗口可调整的最大宽度和高度。
resizable：布尔值，决定用户是否可以手动调整窗口大小。
always-on-top：布尔值，若设为 true，窗口将始终置顶显示。
fullscreen：布尔值，控制应用启动时是否以全屏模式显示。
show_in_taskbar：布尔值，决定应用是否在系统任务栏中显示图标。
frame：布尔值，若设置为 false，应用程序将以无边框模式运行。
"chromium-args"：字符串类型，用于传递启动参数。例如设置值为“-allow-file-access-from-files”，相当于给 Chrome 浏览器添加启动参数，允许 AngularJS 等前端框架直接访问本地 JSON 文件。

应用打包与发布流程

三、生成 exe 可执行文件

首先确认项目目录结构，确保包含必要的 HTML、JS 文件以及配置好的 package.json。

NW.js 核心特性与优势

将包含项目内容的文件夹压缩为 zip 格式，并将压缩后的文件重命名为 nw（例如 app.nw）。随后，在命令行中输入以下命令，将 nw.exe 与 app.nw 合并生成单个 exe 文件：


copy /b nw.exe+app.nw firstApp.exe

四、打发包发布

打开之前下载的 Enigma Virtual Box 程序（enigmavb.exe），启动界面应显示如下布局：

NW.js 核心特性与优势

在“Enter Input File Name”输入框中，选择上一步生成的 test.exe 文件；“Enter Output Name”可以保持默认设置。

点击下方的“Add”按钮，将 nwjs 文件夹（注意：文件夹名称可能不是 nwjs，即第一步下载的 NW.js 环境文件夹）中除 nw.exe、test.nw 以及 test.exe 之外的所有文件添加进去。点击“Process”按钮，等待处理成功。此时，在指定路径下会生成一个新的 exe 文件（例如 newtest.exe）。该文件已包含所有依赖，可在任意 Windows 环境下直接运行，方便分享给他人使用。

常见问题与解决方案

以下是 NW.js 使用过程中可能遇到的一些常见问题及解决方案：

1. 如果希望快捷键仅在当前应用获取焦点时才执行，可以参考使用 JavaScript 库来设置快捷键，避免全局冲突。


// 加载本地ui库
 var gui = require('nw.gui');
 var option = {
 key: "Ctrl+R",
 active: function () {
  alert("全局快捷键" + this.key + "按下");
 },
 failed: function (msg) {
  //创建快捷键失败
  alert(msg);
 }
 };
 // 创建快捷键
 var shortcut = new gui.Shortcut(option);
 // 注册全局快捷键
 gui.App.registerGlobalHotKey(shortcut);
 // 解除注册，在应用结束的时候执行
 gui.App.unregisterGlobalHotKey(shortcut);

2. NW.js 中页面多次刷新可能导致异常，这是由于刷新页面后重新加载 JS 文件导致变量被重新赋值引发的 Bug。

3. NW.js 读取和保存文件：


<html>
<head>
 <meta charset="utf-8"/>
 <title>nw.js实现文件读写</title>
</head>
<body>
 <input id="readFile" type="file" >读取文件</input>
 <!-- 默认文件名为filename.html -->
 <input id="writeFile" nwsaveas="filename.html" type="file">保存文件</input>
 <p></p>
 <script>
 //nw.js提供的读写文件模块
 var fs = require("fs");
 //读文件
 var chooser = document.querySelector('#readFile');
 chooser.addEventListener("change", function (evt) {
  //用户选择的文件
  var filePath = this.value.toString();
  document.querySelector("p").innerHTML = "读取文件从" + filePath;
  fs.readFile(filePath, function (err, data) {
   if (err) {
   layer.msg("读取文件失败! :" + err.message);
   return;
   } else {
   console.log(data);
   alert(data);
   }
  })
  });
 //写文件
 chooser = document.querySelector('#writeFile');
 chooser.addEventListener("change", function (evt) {
  //用户选择的文件
  var filePath = this.value.toString();
  document.querySelector("p").innerHTML = "写入文件到：" + filePath;
  //把hello写入文件
  fs.writeFile(filePath, "Hello!\n", function (err) {
   if (err) {
   alert("保存失败!");
   }
  }); 
  });
 </script>
</body>
</html>

3. 在使用 NW.js 的 'fs' 模块直接保存 Canvas 为本地图片时，网上常见的方法都是弹出系统选择框让用户手动保存。若需要直接保存图片到指定路径且不弹出对话框，可以参考 kailniris 提供的解决方案，代码如下：


var fs = require('fs');
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
 <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
 </canvas>
base64Data = c.toDataURL("image/png").replace(/^data:image\/png;base64,/, "")
fs.writeFile("c:/Dev/test.png", base64Data, 'base64', function (err) {
 if (err) {
 console.log("err", err);
 } else {
 return res.json({ 'status': 'success' });
 }
});

利用 html2canvas 将 HTML 页面转换为图片数据，再调用 Node.js 的 fs 模块保存到本地。以下是完整代码示例（需导入 html2canvas.js 和 jquery）：


//要保存图片的文件路径
  var filePath = templateDir + filename + '.html';
  //要保存的html页面
  var editerDocument = window.editor.edit.iframe.get().contentWindow.document;
  html2canvas(editerDocument.body, {
  onrendered: function (canvas) {
   var base64Data = canvas.toDataURL("image/png").replace(/^data:image\/png;base64,/, "")
   var fs = require("fs");
   fs.writeFile(templateDir + filename + '.png', base64Data, 'base64', function (err) {
   if (err) {
    alert("保存模板失败!");
   }
   $('#model_template_name').modal("hide");
   layer.msg("模板已保存为" + filename);
   });
  }
  });

4. 在 app.js 中引用 Node.js 内置模块的方法：


//调用NodeJs内置模块
 $scope.fs = require('fs'); 
 　　　　//读取配置文件
 $scope.readConfig = function () {
  try {
  var configStr = $scope.fs.readFileSync(config.weixin.path, 'utf8');
  console.log(configStr);
  var obj = eval('(' + configStr + ')');
  $scope.weixin.appid = obj.appid;
  $scope.weixin.appsecret = obj.appsecret;
  $scope.weixin.qrcodeurl = obj.qrcodeurl;
  }
  catch (e) {
  console.log(e);
  alert("读取微信配置文件失败");
  }
 }
 //写入配置文件
 $scope.writeConfig = function () {
  try {
  var configStr = JSON.stringify($scope.weixin);
  $scope.fs.writeFileSync(config.weixin.path, configStr, {encoding: 'utf8'});
  return true;
  }
  catch (e) {
  console.log(e);
  alert("写入微信配置文件失败");
  return false;
  }
 }

5. 引用第三方模块（如 wechat-api）的方法：


//调用NodeJs第三方模块
 $scope.wechatApi = require('wechat-api');
 $scope.query = function () {
  var api = new $scope.wechatApi($scope.weixin.appid, $scope.weixin.appsecret);
  api.getMenu(function (err, result) {
  if (err) {
   console.log(err);
   alert("查询菜单异常");
  } else {
   load(result);
   $scope.$apply();//需要手动刷新
  }
  });
 };

更多详细文档可参考 http://liuxp.me/nwjs/References/Window/ 提供的中文文档。

总结

以上介绍了 NW.js 的简介与使用方法，希望这对大家有所帮助。如有任何疑问，欢迎留言，小编会及时回复。感谢大家对本站的支持！

NW.js 应用开发入门：从配置到打包发布全流程指南

NW.js 核心特性与优势

NW.js 环境下载与配置

应用打包与发布流程

常见问题与解决方案

实用工具推荐