如何使用 NW.js 将 Web 应用打包为桌面应用的完整指南

与传统的桌面应用开发不同，把Web应用转为桌面版本是一种既高效又方便的开发方法。在此过程中，NW.js是个相当出色的工具，不过不少开发者对此知之甚少。今天，我们就来深入探讨一番。

Web应用开发的困扰

在开发日常工作中所需的管理后台时，为了提升工作效率，开发者们常选用Bootstrap等CSS框架，以及Vue等单页应用框架。这样做能让开发者更专注于业务逻辑。然而，跨浏览器的兼容性问题常常令人头疼。比如，IE浏览器的兼容性不佳，很多时候我们只能简单地判断用户的浏览器类型，如果是IE，就只能提示用户进行切换。

各种浏览器在处理HTML、CSS和JavaScript时存在显著的不同。以某些老旧浏览器为例，它们可能无法正确展示新的CSS特性，这无疑会对用户的体验造成重大影响。

NW.js的基本情况

NW.js源自node-webkit的更名。此技术诞生，旨在允许使用JavaScript进行桌面应用程序的开发。其交互方式独特，与操作系统的交互通过Node.js实现，而与用户的交互则依赖网页开发技术。

国内钉钉的桌面版正是依托它来开发的，像有道云笔记这样的知名插件也推出了基于NW.js的桌面版应用。这一点充分证明了它的实用价值。

类似的解决方案

有与NW.js相仿的选项，比如Electron。Electron是为了制作Atom而诞生的.js工具。Slack的桌面客户端就是采用Electron构建的。尽管它们功能相近，但在资源消耗、启动速度等细节上，还是有一些区别。

 {
  "name": "blog",
  "main": "http://chensd.com/",
  "version": "0.0.1",
  "window": {
    "width": 1024,
    "height": 768,
    "frame": true,
    "toolbar": false,
    "icon": 'assets/icon.png'
  }
}

从某个角度看，决定选用NW.js还是Electron，关键在于项目具体需求。比如，若项目更倾向于与网页交互技术结合，那么NW.js可能更适合。

NW.js的安装准备

打包应用时，得安装几样东西。首先，得建立一个配置文件，通常是Node.js下的.json格式。这里有个基础例子，里面有几个重要设置。比如，main参数指明了程序的入口，一般是一个网址；width设置了应用启动时窗口的尺寸；frame选项用来决定是否显示桌面应用的标题栏；还有其他设置，比如是否在浏览器中展示前进后退按钮和地址栏等。

这些参数的准确配置对整个应用的使用体验有很大影响。

查看效果与执行命令

var NwBuilder = require('nw-builder');
var nw = new NwBuilder({
  files: './package.json', // 包含文件
  platforms: ['win64'], // 打包的平台
  version: '0.12.3' // 使用 NW.js 的版本
});
nw.on('log', console.log); // 日志打印函数
// 开始构建
nw.build().then(function(){
  console.log('done!');
}).catch(function(err){
  console.log(err);
});

在程序目录下，输入nw等特定指令，便可直观看到效果。这些指令并非空有形式，它们会依据配置文件内容，展现出应用的基本样式。若遇到问题，可通过查看输出结果来核对配置文件是否准确无误。这一环节在整个开发流程中，扮演着对前期配置进行关键检验的角色。

NW.js的打包操作

使用Node.js模块nw-builder进行打包。首先，在程序所在目录中安装此模块，接着制作一个.js文件以存放打包设置。比如，按照规范编写配置内容后，保存为.js格式，再通过Node.js执行它，即运行node.js。打包方式有两种。第一种是初次运行时，会从nwjs.io下载编译好的文件，这个过程会耗时。第二种是若想节省时间，可以先到指定网站下载nw的包，然后根据不同版本和系统需求，对文件目录进行放置和配置调整。

你对将网络程序转为桌面版软件有兴趣吗？不妨点个赞，转发一下，更欢迎在评论区留下你的见解或疑问。