nwjs打包js为桌面应用的操作

最新推荐文章于 2025-03-26 15:01:18 发布

风/xin云

最新推荐文章于 2025-03-26 15:01:18 发布

阅读量1.4k

点赞数 2

分类专栏： nodejs

本文链接：https://blog.youkuaiyun.com/zhouyonggo/article/details/89494640

版权

nodejs 专栏收录该内容

1 篇文章

订阅专栏

分为两个部分：

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

第三部分：自定义应用程序图标
第四部分：使用inno setup打包

第一部分：
1.下载nw.js打包工具，url:https://nwjs.io/downloads/,有两种版本(normal和SDK),这里下载SDK版本，因为sdk是适合本地调试的
2.把下载好的nwjs-sdk进行解压，如下图：
nwjs-sdk的目录

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窗口再拖放)效果如下图所示：
nwjs打开app后的预览效果

第二部分：

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也可以打包成功。

使用nwjs打包后的app预览效果