HTML5封装成桌面应用

雨点打透心脏的1/2处 2022-01-19 01:51 283阅读 0赞

### HTML5封装成桌面应用 ###

*   *  1、准备工作：
     *  2、封装
     *  3、打包

## 1、准备工作： ##

1.  web项目地址
2.  nw.js[下载网址][Link 1]
3.  reshacker(度娘自行下载)
4.  Inno Setup(度娘自行下载安装，有中文版)

## 2、封装 ##

1、解压目录结构如下：2![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlbmdkZXJvbmd5YW4_size_16_color_FFFFFF_t_70]  
2、在解压好的根目录新建文件package.json，并编辑信息：  
\{  
“main”: “[https://www.baidu.com][https_www.baidu.com]”,  
“name”: “百度”,  
“description”: “百度”,  
“version”: “1.0.0”,  
“keywords”: \[ “abc”, “abc” \],  
“window”: \{  
“title”: “百度”,  
“icon”: “favicon.png”,  
“toolbar”: true,  
“frame”: true,  
“width”: 1200,  
“height”: 600  
“position”: “center”,  
“min\_width”: 1200,  
“min\_height”: 600,  
“show\_in\_taskbar”:true  
\},  
“webkit”: \{  
“plugin”: true  
\},  
“chromium-args”:"–incognito"  
\}  
main即为你要封装的网址。其他字段含义参照[文档超链接][Link 2]，注意icon使用png格式，我的使用的是128\*128像素。图片放在根目录。  
3、修改nw.exe。打开下载好的ResHacker，点击文件按钮，打开nw.exe进行反编译  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlbmdkZXJvbmd5YW4_size_16_color_FFFFFF_t_70 1]  
打开图标组–>IDR\_MAINFRAME–>右键替换资源，选择自己的log图片  
打开版本信息，修改相关信息。  
全部修改完成后另存为一个exe文件，放在根目录，将原来nw.exe删除。

## 3、打包 ##

1、打开安装好的Inno Setup ，选择用脚本向导创建新的文件脚本文件，点确定  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlbmdkZXJvbmd5YW4_size_16_color_FFFFFF_t_70 2]  
2、不要勾选创建新的空脚本文件，直接点击下一步![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlbmdkZXJvbmd5YW4_size_16_color_FFFFFF_t_70 3]  
3、填写相关信息，点下一步  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlbmdkZXJvbmd5YW4_size_16_color_FFFFFF_t_70 4]  
4、直接默认，点击下一步  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlbmdkZXJvbmd5YW4_size_16_color_FFFFFF_t_70 5]  
5、应用程序主执行文件选择刚刚生成的exe文件，其他应用程序将nwjs的根目录的所有文件和文件将全部添加至此  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlbmdkZXJvbmd5YW4_size_16_color_FFFFFF_t_70 6]  
6、随后全部点击下一步一直到完成即可，弹出“现在你要立刻编译新脚本吗”，点击否（因为还有一件事没做完）  
7、找到编译文件添加locales和swiftshader这两个文件的位置，分别在“$\{app\}”后拼接\\locales和\\swiftshader。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlbmdkZXJvbmd5YW4_size_16_color_FFFFFF_t_70 7]  
8、点击编译按钮进行编译，选择编译文件存放位置。进行打包，即可生成setup.exe文件。至此已完成所有操作。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlbmdkZXJvbmd5YW4_size_16_color_FFFFFF_t_70 8]

[Link 1]: https://nwjs.io/downloads/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlbmdkZXJvbmd5YW4_size_16_color_FFFFFF_t_70]: /images/20220119/9d226ff075ab460b8eca361f40b7b938.png
[https_www.baidu.com]: https://www.baidu.com
[Link 2]: https://nwjs.org.cn/doc/api/Manifest-Format.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlbmdkZXJvbmd5YW4_size_16_color_FFFFFF_t_70 1]: /images/20220119/3d301cf18f954781ad3f5b71b37e8ce6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlbmdkZXJvbmd5YW4_size_16_color_FFFFFF_t_70 2]: /images/20220119/e8e110ec7ddd4dd2a6d9208a9788266b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlbmdkZXJvbmd5YW4_size_16_color_FFFFFF_t_70 3]: /images/20220119/ed26799de1714e0287947a78fe5c69ee.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlbmdkZXJvbmd5YW4_size_16_color_FFFFFF_t_70 4]: /images/20220119/e671af31157a4a8fb2b49e73f52b5c09.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlbmdkZXJvbmd5YW4_size_16_color_FFFFFF_t_70 5]: /images/20220119/fdb3be68038643c2897209fedde1b266.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlbmdkZXJvbmd5YW4_size_16_color_FFFFFF_t_70 6]: /images/20220119/54affbe878174c09954d7e82bca86c21.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlbmdkZXJvbmd5YW4_size_16_color_FFFFFF_t_70 7]: /images/20220119/fe3adc2be72245968e3e7cdc55855657.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlbmdkZXJvbmd5YW4_size_16_color_FFFFFF_t_70 8]: /images/20220119/fc934a91d22548c8b86d7fed778007b7.png