使用node-webkit(NW.js)封装node.js的windows可执行程序(EXE)

下载和安装node-webkit

官网访问地址

https://nwjs.io/

github访问地址

https://github.com/nwjs/nw.js

WEB应用

新建一个index.html文件,作为我们这个demo的入口页面:

<html>
<head>
    <meta charset="utf-8" />
    <title>Demotitle>
<head>
<body>
    <h1>Hello World!h1>
body>
<html>

创建配置文件 package.json:

{
  "name":"Demo",
  "main":"index.html"
}

其中的main属性就是用来指定入口文件的,这个属性的值可以是本地文件,也可以是远程网址,这样就相当于可以把一个远程的web应用直接变为一个桌面应用了。除了name与main这两个属性外,还有很多其他有用的属性可以配置,比如指定应用的图标,显不显示浏览器的工具栏,指定浏览器的初始大小等等。

关键package.json的语法请参考:
https://github.com/nwjs/nw.js/wiki/Manifest-format#webkit-subfields

生成exe

  • 将index.html和package.json这两个文件压缩到一个zip压缩包里,命名为app.zip

使用node-webkit(NW.js)封装node.js的windows可执行程序(EXE)_第1张图片

  • 把app.zip这个文件的扩展名改为nw,变为 app.nw

  • 将app.nw拷贝到node-webkit的和nw.exe同一目录,进入windows cmd后运行这个命令

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

使用node-webkit(NW.js)封装node.js的windows可执行程序(EXE)_第2张图片

  • 生成app.exe
    使用node-webkit(NW.js)封装node.js的windows可执行程序(EXE)_第3张图片

将生成的文件剪切到新的文件夹,为下面封包做准备:
使用node-webkit(NW.js)封装node.js的windows可执行程序(EXE)_第4张图片

icon

默认情况下创建出来的应用程序(exe)会和nw.exe的图标一样,可以通过resource hacker这个工具来修改nw.exe的图标成你所想要的,比如可以参考:

http://keenwon.com/1311.html

封包

Enigma Virtual Box

官网上推荐用Enigma Virtual Box这个软件来将app.exe和依赖的dll打包成一个exe后发布

下载地址:
https://enigmaprotector.com/en/downloads.html

  • 首先下载和安装这个软件,然后打开它

使用node-webkit(NW.js)封装node.js的windows可执行程序(EXE)_第5张图片

  • 在Enter Input File Name输入app.exe的路径

  • 在Enter Output File Name输入打包出来的可执行文件的输出路径

  • 点击增加,选择nwjs文件夹
    使用node-webkit(NW.js)封装node.js的windows可执行程序(EXE)_第6张图片

  • 导入配置文件,选择执行封包
    使用node-webkit(NW.js)封装node.js的windows可执行程序(EXE)_第7张图片
    使用node-webkit(NW.js)封装node.js的windows可执行程序(EXE)_第8张图片

  • 生成可执行EXE
    总大小182MB,比Inno Setup方案大很多
    使用node-webkit(NW.js)封装node.js的windows可执行程序(EXE)_第9张图片

  • 双击EXE可直接运行
    比Inno Setup方案的优势在于可以直接运行,无需安装
    使用node-webkit(NW.js)封装node.js的windows可执行程序(EXE)_第10张图片

Inno Setup

另一个打包方式,就是用Inno Setup来打包成安装程序,即将一开始的web应用源文件和node-webkit的nw.exe和一些以来dll直接压缩成一个安装文件,我们并不需要上述中间那先打包成app.exe的步骤。用户在使用你的exe后会出现setup wizard把程序安装到Program Files目录中,将nw.exe,dll,web应用释放出来,这个时候所生成的安装文件其实size会小很多。

下载地址:
http://www.jrsoftware.org/isdl.php

  • 下载安装运行后点击File->New即进入创建步骤
    使用node-webkit(NW.js)封装node.js的windows可执行程序(EXE)_第11张图片
    使用node-webkit(NW.js)封装node.js的windows可执行程序(EXE)_第12张图片

  • 填写应用发布的信息:
    使用node-webkit(NW.js)封装node.js的windows可执行程序(EXE)_第13张图片

  • 添加应用程序的打包文件:
    使用node-webkit(NW.js)封装node.js的windows可执行程序(EXE)_第14张图片

  • 执行后续操作,进行编译:
    使用node-webkit(NW.js)封装node.js的windows可执行程序(EXE)_第15张图片

  • 生成可执行EXE
    总大小47.9MB,比Enigma Virtual Box小很多
    使用node-webkit(NW.js)封装node.js的windows可执行程序(EXE)_第16张图片

-在C盘安装成功
使用node-webkit(NW.js)封装node.js的windows可执行程序(EXE)_第17张图片

  • 安装完成后,生成桌面图标
    这里写图片描述

  • 双击图标,程序运行成功
    使用node-webkit(NW.js)封装node.js的windows可执行程序(EXE)_第18张图片

你可能感兴趣的:(前端开发)