将H5项目打包成桌面应用

需求:将H5项目封装webkit内核打包成桌面应用,拿到客户端可以直接安装的exe程序。

准备工具:1. NW.js,官网下载对应系统的版本https://nwjs.io/

     2. Resource Hacker,下载地址http://www.angusj.com/resourcehacker/

     3. Inno Setup,下载地址https://jrsoftware.org/isdl.php

 

一、打包应用程序

  1.下载NW.js安装包

    下载安装包,解压到个人的项目目录,打开nwjs-sdk-v0.77.0-win-x64文件夹,文件夹下包含nw.exe程序

    

  2.配置package.json

    在nw.exe所在文件夹中创建package.json配置文件,在文件中配置参数,

    详细参数可查看官方文档:https://nwjs.readthedocs.io/en/latest/For%20Users/Migration/From%200.12%20to%200.13/

 

{
	"main":"index.html",
	"name":"nw-recovery",
	"window":{
		"icon":"logo1.png"
	}
}

  3.创建入口文件index.html

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script>
		window.location.href='https://www.baidu.com'
	</script>
</head>
<body>

</body>
</html>

  4.打包

    将logo.png、index.html、package.json三个文件添加到压缩文件package.zip,修改压缩文件扩展名为.nw并放置到nw.exe运行程序所在目录。

    打开cmd执行命令将nw一起打包成一个可执行文件

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

    执行上面命令之后,在文件夹中生成一个app.exe文件,此时可以双击app.exe运行,但是只能在nw的环境下运行。

二、集成打包安装程序

  1.修改应用程序图标

    安装Resource Hacker后打开软件,使用Resource Hacker自定义图标

    选中IDR_MAINFRAME:1033按Ctrl+R快捷键替换图标

  2.打包安装程序

    安装Inno Setup后打开软件

    1)按Ctrl+N新建

 

    2)设置打包后的应用信息

 

    3)选择要打包的应用程序

 

 

    4)添加app.exe运行依赖文件,也就是nw SDK文件夹中的文件,选择文件夹下的全部文件会使打包后的程序有些大,下面使用的部分文件

 

 

    5)next下一步,直到finish完成

 

    5)完成之后会生成iss文件,添加依赖文件的时候如果添加了嵌入文件夹中的文件,需要将内容修改一下,然后再 Build -> Compile 重新编译生成

    6)打开output路径,找到里面的exe文件就是安装程序,若未配置文件名,默认是mysetup.exe

posted @ 2023-06-27 10:39  Name=DIC  阅读(559)  评论(0编辑  收藏  举报