分为两个部分:

第一部分:介绍如何在nwjs中预览js项目的效果
第二部分:介绍如何用nwjs打包js项目

第三部分:自定义应用程序图标

第四部分:使用inno setup打包


第一部分:

1.下载nw.js打包工具,url:https://nwjs.io/downloads/,有两种版本(normal和SDK),这里下载SDK版本,因为sdk是适合本地调试的

2.把下载好的nwjs-sdk进行解压,如下图:

yarn打包改js参数 js打包成apk_应用程序

3.在nwjs当前路径下新建app文件夹,在app文件夹里面新建两个文件index.html和package.json

index.html的内容如下:
 

<!DOCTYPE html>

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<h1>hello</h1>
	</body>
</html>

package.json的内容如下:
 

{
    "name":"nw-demo",
    "version":"0.0.1",
    "main":"index.html"
}

4.桌面方式预览效果

打开nw.exe,然后把app文件夹拖放到nw打开的窗口中,(注意,是直接拖动app文件夹到nw.exe,而不是先打开nw.exe窗口再拖放)效果如下图所示:

yarn打包改js参数 js打包成apk_应用程序_02

 

第二部分:

1.进入app文件夹,全选里面的文件(当前两个文件index.html和package.json),右键选择添加到压缩文件,选择压缩格式为zip,压缩后的名字为app.zip
2.拷贝app.zip和nw.exe同一级目录,然后把app.zip重命名为app.nw
3.执行命令:  copy /b nw.exe+app.nw app.exe,打开app.exe 效果如下:

4.打开app.exe,如果可以正常运行,则使用接下来的inno setup也可以打包成功。

yarn打包改js参数 js打包成apk_yarn打包改js参数_03

 

第三部分:自定义应用程序图标
此步骤可以自定义应用程序图标,如果不需要可以跳过此部分
1.下载resource hacker应用程序
2.解压并打开ResourceHacker.exe

3.选择要更改图标的exe文件,操作如下图:

yarn打包改js参数 js打包成apk_ico_04

yarn打包改js参数 js打包成apk_yarn打包改js参数_05

注:(选择icon第一个图标,右键->replace icon)

yarn打包改js参数 js打包成apk_应用程序_06

选择左面的open file with new icon,然后点击右面的replace,

yarn打包改js参数 js打包成apk_html_07

最后一步点击保存按钮,即可看到对应的文件夹下面的exe图标变了

第四部分,使用inno setup打包,下面截图了关键的部分,其余下一步就行

1.下载inno setup并安装

2.打开inno setup ->file->new

然后按照如下截图进行:

yarn打包改js参数 js打包成apk_应用程序_08

注:(给应用程序取名)

 

yarn打包改js参数 js打包成apk_应用程序_09

注:(browse选择的是nwjs打包后的exe文件,add folder选择的是nwjs的目录,并确认选择所有子目录)

yarn打包改js参数 js打包成apk_html_10

注:(输出目录我选择的是桌面, output base file_name:这个是打包后的应用程序名字)

 

yarn打包改js参数 js打包成apk_html_11

 

yarn打包改js参数 js打包成apk_ico_12

注:(选择的路径是桌面)

 

然后就等待打包完成了:

yarn打包改js参数 js打包成apk_ico_13

然后在桌面的output文件夹中就会生成一个exe文件,点击安装即可使用