将 html 项目打包成可执行 exe 文件

项目需求:做一个基于web页面的浏览器指纹管理系统,类似于ads,于是有了这篇文章。

环境需求:nwjsEnigmaVirtualBox和一个 web 页面

文章目录

前言

用 nwjs 打包web文件的一个小案例,仅供学习参考,大佬勿喷。

以下是本篇文章正文内容,下面案例可供参考

一、nwjs

nwjs 是一款跨平台轻量级桌面应用开发软件,可以把一个堆 html 文件打包成一个 exe 可执行文件。更多信息自行百度吧。

二、nwjs 使用步骤

1.下载 nwjs

nwjs 可以在官网上下载,也可以从我的网盘下。

链接:https://pan.baidu.com/s/1pnNw5RzGQBBP5qby0eK54A
提取码:zn3y

2.使用

(1)目录结构

这里我用的是 nwjs-sdk-v0.49.0-win-x64 这个 sdk 版本,目录结构如下:

《将 html 项目打包成可执行 exe 文件》

(2)使用步骤及注意事项

SDK 下载下来后,接下来就是打包 html 文件。在打包 web 文件前,需要在入口文件的同级目录添加一个 package.json 文件,内容如下:

《将 html 项目打包成可执行 exe 文件》
这其中,main 参数填的是软件的主入口文件,也就是可执行文件打开后会进入 main 参数里填的这个 html 界面。

其他参数图中也有描述,更多参数自行去官网查看官方文档。然后开始打包 web 文件。我的 html 源文件结构如下:
《将 html 项目打包成可执行 exe 文件》这里我遇到两个坑,详细描述如下:

1)压缩文件

打包过程需要把 web 源文件打包成压缩文件,然后改成 .nw 后缀。刚开始的时候我是把 loginHTML 文件夹压缩,发现根本不能运行。找了一些资料,终于在 B 站的一个视频 中找到正确教程。下面分析原因:
我第一次压缩的时候,是 loginHTML 文件夹压缩的,正如视频所说,点击压缩包预览其结构是这样的:

loginHTML
······css
······image
······js
······layui
···login.html
···package.json

这样子压缩进去的第一层目录是 loginHTML ,而制作可执行文件需要第一层目录就能读到 package.json 文件,所以正确的目录结构应该是这样:

···css
···image
···js
···layui
login.html
package.json

如此我们只需要进入源文件目录,Ctrl+A 全选之后压缩就行。

2)压缩方式

第二个坑就是压缩方式,按照上述的压缩方法压缩后,我发现还是不行。看了一些资料,发现有个网友提到压缩方式。而我之前用的是 7z 的压缩方式,于是赶紧换成 zip 的压缩方式,然后就一次点亮了,干得漂亮 (rinidaye)。

(3)执行命令 copy /b nw.exe+ooo.nw xxx.exe

改完后缀把文件放到 SDK 的文件夹里,然后用命令行执行 copy /b nw.exe+ooo.nw xxx.exeooo 是你的压缩文件名,xxx 是你要生成的 exe 文件名,成功的话会在 SDK 文件夹生成一个可执行文件,运行该文件即可。

(4)小技巧

每次都打开命令行运行太麻烦,写一个批处理,内容就是 copy /b nw.exe+app.nw app.exe,每次要打包什么文件的时候把所要打包的 .nw 文件名换成 app 即可,生成出来的 app.exe 就是想要的可执行文件,也可改名。

三、EnigmaVirtualBox 打包环境依赖

上述打包好的可执行文件是需要依赖的,如果换一个环境那就不能执行了,所以需要把环境依赖也打包成 exe 文件,我这里用的是 EnigmaVirtualBox 。软件自己去网上找吧,百度出来一大堆。软件打开后长这样:

《将 html 项目打包成可执行 exe 文件》
添加完参数,点击打包即可。

总结

所有步骤如下:

  1. 下载 SDK
  2. 压缩 html 源文件,记得从内层目录全选并且用 zip 压缩
  3. 执行 copy /b nw.exe+ooo.nw xxx.exe 命令
  4. 用 EnigmaVirtualBox 打包可执行文件以及文件依赖
    原文作者:hfp_93
    原文地址: https://blog.csdn.net/hfp_93/article/details/118789592
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞