在前端开发中，使用 nw.js（也称之为 node-webkit）作为跨平台应用的平台已经变得越来越普遍。这个 npm 包提供了一种方便的方法，可以让你使用基于 web 技术的应用程序，例如 Angular、React、Vue 等等，同时还能够利用本地文件和操作系统 API。在本篇文章中，我们将带你一步步学习如何使用 nw.js 这个 npm 包。
简介
nw.js 是一款基于 Chromium 和 Node.js 的跨平台桌面应用平台。简单来说，就是它允许你像浏览器一样运行前端代码，同时还具有本地应用程序的能力。它也支持 Windows、Linux 和 macOS 平台。
环境安装
要使用 nw.js，我们需要首先安装它。你可以通过 npm 来安装这个包，也可以通过官方网站下载一个压缩包来手动安装。在这里，我们使用 npm 方式安装。
npm install nw --save-dev
该命令会在项目根目录下，安装 nw.js 包，并将其添加到开发依赖中。
配置 package.json
我们需要在项目的 package.json 配置文件中添加一些脚本来启动 nw.js。在 “scripts” 区域中添加以下代码：
"scripts": {
"start": "nw ."
}这里我们定义了一个名为 “start” 的 npm 脚本，它启动了一个 nw.js 窗口，运行当前目录中的文件。
创建应用窗口
要在 nw.js 中创建一个新窗口，我们使用 nw.Window 实例。在 HTML 中，我们添加以下代码：
<button onclick="spawnWindow()">打开新窗口</button>
然后，在 JavaScript 中，我们添加以下代码：
function spawnWindow() {
// 创建一个新的窗口对象：
var win = nw.Window.open("https://www.baidu.com");
}这将打开一个新的窗口来访问百度的网站。nw.Window.open() 方法需要一个 URL 参数，它会在新窗口中加载 URL。
操作本地文件
nw.js 还提供了访问本地文件和文件系统的 API。让我们来读取一个本地的 JSON 文件。我们需要在 HTML 中添加以下代码：
<button onclick="readJson()">读取 JSON 文件</button>
在 JavaScript 中，我们添加以下代码：
-- -------------------- ---- -------
-------- ---------- -
--- ---------- - --- -------------
----------------- - ---------- -
--- ----------- - ------------------
--- -------- - ------------------------
----------------------
-
------------------------------------- ---------
-该代码中，我们使用 FileReader 实例来读取本地的 example.json 文件，读取完成后，将其内容解析为 JSON 对象，并打印到控制台上。
操作系统 API
除了访问本地文件之外，nw.js 还允许使用诸如操作系统通知、弹出对话框以及打开文件对话框等 API。下面的代码使用 Node.js 模块 “os” 来显示操作系统名称：
var os = require('os');
console.log(os.platform());以下代码通过使用 nw-dialog 模块来弹出信息框：
var nwDialog = require('nw-dialog');
nwDialog.alert('Hello, World!', function () {
console.log('弹出提示框');
});这里我们使用了 nw-dialog npm 包，它提供了许多可用于 nw.js 的简单对话框，例如警告框、确认框、输入框、文件选择框等等。
总结
在这篇文章中，我们了解了如何使用 nw.js 包，来创建一个基于 web 技术的桌面应用程序，并访问本地文件、操作系统信息以及使用 API 弹出对话框等等。nw.js 在开发跨平台应用程序上非常有用，因为它允许开发者使用熟悉的 web 技术，同时还能访问本地系统 API，包括文件系统和硬件设备。希望本文能够帮助你更好地了解和使用 nw.js。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/61399