【nw.js】把网页打包成exe应用

发布于 2021-02-10  26 次阅读


0

有时候需要写点小工具,用js,什么ajax一把梭很快就写好了,而且网页界面还简洁。但是拿给其他人用多多少少会出现点问题,特别是当对方不懂技术的时候。什么跨域、编码、缓存、兼容性等等等等,本来只是一个小工具,用web做只是图简单,还要大费周折搞兼容那不本末倒置了...还不如老老实实用C#拖个WinForm应用。
这个时候,一个简单好用的工具出现了——Nw.js

PS. 当然,如果你一开始就打算用web写一个客户端应用,那不妨试试Electron
后面有空我可能也会更一些相关的文章记录下

1

先讲操作,下载好的nw.js会有一个nw.exe可执行程序,我们将网页拖进去发现可以直接打开。
如果这一步网页无法打开,多半是文件路径的问题。
如果遇到乱码,请在head中添加utf-8的配置

<head>
    <meta http-equiv="Content-type:text/html;charset=utf-8"/>
</head>

然后把你的网页目录准备好,HTML、CSS、JS还有静态资源什么的都放在里面。

接下来创建一个文件,用来配置启动页面、标题栏显示的文字、是否禁用缓存等。
参考nw.js 的中文文档
这里只列一下最简单的,因为详细的上面的文档中都写了。

{
  "main": "index.html",
  "name": "这是标题",
}

然后将整个目录压缩打包成zip格式,并把后缀修改为.nw,假设文件名为package.nw
网上有人说直接将.nw文件拖到nw.exe中也可以运行,但是实测会显示空白页面(最后打包出来没有问题)。

2

接下来需要把网页文件给追加到nw.exe文件后面
Windows系统运行命令如下

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

Linux系统运行命令如下

cat nw package.nw > app && chmod +x app

但是我在windows上使用 copy 命令出现点问题,最后用WSl 切成linux子系统弄的
合并后的app.exe 文件就可以随意打开了
注意需要将nw.exe目录中的一堆库文件一起拖过去才行

Comments


来自像素世界的代码家,创造第九艺术!