简介

NW.js 基于 Chromium 和 Node.js 创建桌面应用程序的框架. NW.js 利用 Web 技术结合 Node.js 及其模块进行桌面应用开发。在最简单的情况下，可以使用常规 Web 工作流程来开发 Web 应用。最后使用生成器将所有内容编译为一个桌面应用，然后像浏览器一样使用。

特性

  • 使用 HTML5、CSS3 和 WebGL 等 web 技术，编写原生应用的新途径
  • 全面支持所有浏览器特性
  • 全面支持 Node.js 的 API 及所有第三方模块
  • 可以从 DOM 和 Web Worker 层面，调用 Node.js 的模块
  • JavaScript 源码保护
  • 一次编写，就可以运行在多平台上，包括：Linux、Mac OS X 和 Windows

快速入门

项目结构

首先我们新建一个目录 nw-start 及项目结构和文件。

  1. nw-start/
  2. ├── src/
  3. │   ├── app/
  4. │   │  └── index.js
  5. │   ├── styles/
  6. │   │  └── common.css
  7. │   ├── views/
  8. │   │  └── index.html
  9. │   └── package.json
  10. └── package.json

快速开始

这里要注意一点，对于 NW 而言需要一个项目的描述文件 package.json ，和 npm 的描述文件重名，这里需要区别理解。
在 src/ 目录下创建 package.json 作为项目的描述文件，具体配置项可以查看这里。

  1. {
  2.   "name": "NWStart", /* APP 名称, 必选 */
  3.   "description": "Simple file.",
  4.   "version": "0.1.0",
  5.   "main": "index.html", /* APP 主入口, 必选 */
  6.   "window": { /* APP 窗口属性 */
  7.     "toolbar": false,
  8.     "width": 600,
  9.     "height": 600
  10.   }
  11. }

在 src/views/ 目录下创建 index.html ，作为入口。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <title>Document</title>
  7.   <link rel="stylesheet" href="../styles/common.css">
  8. </head>
  9. <body>
  10.   <h1>NW.js</h1>
  11.   <script src="../app/index.js"></script>
  12. </body>
  13. </html>

安装 NW.js

有多种方式安装 SDK，这里我们使用 npm 包调用。

  1. npm install -D nw nw-builder

添加 script

  1. "scripts":{
  2.   "dev":"nw src/",
  3.   "build":"nwbuild --platforms win64,osx64,linux64 --buildDir dist/ src/"
  4. }

运行

执行开发命令。

  1. npm run dev

可以看到一个桌面应用成功跑起来了。
开始 NW.js - 图1

打包

这里我们使用 nw-builder ，它支持Windows，Linux和macOS的输出，在我们的示例中，我们为所有这些平台构建了一个64位版本的软件包。
执行打包命令。

  1. npm run build

执行完成后，查看 dist/ 目录，可以看到打包后的文件

  1. dist/
  2. └── nw-start/
  3.     ├── linux32/
  4.     ├── linux64/
  5.     ├── osx64/
  6.     ├── win32/
  7.     └── win64/

至此，我们已经成功跑通 nw.js 的全链路了。

参考