NW.js构建跨平台桌面应用程序

本文最后更新于:2023年10月21日 晚上

前言

现在JavaScript技术的应用访问越来越广泛。今天要介绍的是如何用JavaScript开发桌面应用。

NW.js

NW.js (原名 node-webkit)是一个基于 Chromium(浏览器引擎) 和 node.js 的开发框架(工具),通过它可以用 HTML 和 JavaScript 编写原生应用程序(桌面应用)。实现了一个用所有 Web 技术来写原生应用程序的新的开发模式。其中Chromium(浏览器引擎)负责界面显示,node.js负责数据处理、操作系统交互。

Chromium 是 Google 的Chrome浏览器背后的引擎,其目的是为了创建一个安全、稳定和快速的通用浏览器。是目前市场占有率最高的浏览器引擎,大部门浏览器都是基于Chromium开发的。Nodejs 是一个让 JavaScript 运行在服务端的开发平台,它让 JavaScript 成为服务端的脚本语言,是目前最受欢迎、发展最快的开发引擎。NW.js把Chromium和Nodejs集成在一起可谓珠联璧合,双剑合璧。

特点

(1)以网络最流行的技术编写原生应用程序的新方法

(2)基于HTML5, CSS3, JS and WebGL而编写

(3)完全支持nodejs所有api及第三方模块

(4)可以使用DOM直接调用nodejs模块

(5)容易打包和分发

(6)支持运行环境包括32位和64位的Window、Linux和Mac OS (苹果)

环境搭建

官网https://nwjs.io/

1.下载适合当前版本的js

【这里下载的SDK版本,方便后续调试】

879695-20180127140924194-578316808.png

2.解压到本地

ac6eddc451da81cbc313efb370b2b41008243135.webp

3.构建自己的project
  index.html和package.json这两个文件必须要有的。

879695-20180127141425240-91657269.png

879695-20180127141716006-253164036.png

879695-20180127143336194-1381472222.png

package.json毕竟是配置文件,我们可以多加一些参数如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
{
"name": "newProgram",
"version": "0.1.0",
"description": "nw.js demo",
"main": "index.html",
"window": {
"title": "nw-demo", // 应用标题
"width": 840, // 应用初始化宽度
"height": 600, // 应用初始化高度
"toolbar": true, // 是否开启调试工具
"resizable": false, // 应用是否可以调整高度以及宽度
"icon": "images/icon.png" // 应用图标路径(相对路径)
},

对于已有的项目

4.把项目放到nw.js解压后的同一目录下

879695-20180127143522194-1702498653.png

5.命令进入到当前文件夹 输入 nw myapp

注意建议使用cmd时使用这个命令。使用powershell必须使用 ./nw 才可以

879695-20180127143754444-753849176.png

879695-20180127143820397-1732723710.png

也可以直接把项目拖到nw.exe

879695-20180127143916662-663720595.png

优化

实际开发中html页面可能比较多,所以我们可以把html、css、js等代码单独一个目录中,没必要都放在解压目录下。如下图,我们在解压目录里创建app目录,然后把html等代码转移到app目录下。

c8177f3e6709c93d4171334bbee99cdad30054e0.webp

代码转以后一定要修改配置文件(package.json),修改启动页面路径。

35a85edf8db1cb13bf762db0fc80324893584b54.webp

重新双击nw.exe即可打开应用

37d12f2eb9389b50c04ba536a4e181dbe6116e7c.webp

打包

6.将应用打包成app.nw文件,进入myapp文件夹中,将所有文件选择打成zip包,然后改名为app.nw

7.合并app.nw和nw.exe:

  将app.nw文件移动到和nw.exe同级目录下,然后执行命令copy /b nw.exe+app.nw app.exe,这时是可以直接执行app.exe的,但换到其它目录就不可以执行了,因为换到其它目录找不到nwjs包内的依赖文件
  
  如果你的编辑器是vscode自动打开的是powershell终端,则上面的命令会执行报错,选择默认shell选择cmd即可!

879695-20180127145430569-322324294.png

【但只能在当前环境执行,在别处使用时需要打包,生成 .exe文件】

8.使用Enigma Virtual Box打成独立的可执行的exe文件
  http://enigmaprotector.com/en/downloads.html

879695-20180127144650756-851548285.png

9.(1)导入项目的.exe文件

  (2)选择输出路径【打包后的文件存放地址】

   (3)把nw.sj的文件拖到这里,【不包含自己的项目】

879695-20180127150238256-525109107.png

10.点击process

879695-20180127150806647-1506194688.png

11.success!

879695-20180127150858522-598072018.png

12.生成的文件
879695-20180127151053725-308952487.png