文章目录
- 前言
- 一、HEX是什么?
- 二、使用步骤
- 1.下载HEX
- 2.解压
- 3.修改配置清单 manifest.json
- 4.将 Release打包成一个 exe
- 总结
前言
通过 HTML打包工具,将 HTML打包成 exe可执行程序。
提示:以下是本篇文章正文内容,下面案例可供参考
一、HEX是什么?
heX 提供了一种全新的构建桌面应用的方式,可以使用 web 技术快速构建跨平台的桌面应用。heX 基于 CEF 并且融合了 Chromium 与 Node.js,所以我们可以在 web 页面中使用各种 Node.js 原生模块及第三方扩展,同时在这些模块及扩展中还可以访问到 HTML 中的 DOM 元素。此外,heX 甚至可以以一种 web 容器的方式嵌入到桌面应用的工程中。
heX 首页:http://hex.youdao.com
二、使用步骤
1.下载HEX
点击下载地址,下载适合你的版本
2.解压
下载完解压出来,进入解压目录中的Release,
我的路径是: D:\hex_1.1.10_1621_windows32\Release
,如图:
注意:
- 应用程序的主程序是 hexclient.exe,也就是我们要双击执行的应用程序,默认的应用程序是查看当前应用的版本信息 “About heX”;
- manifest.json是清单文件,也就是应用程序配置文件,应用的名称,窗口模式,运行时的默认大小等等都在这里设置;
- 我们需要将写好的 web项目目录复制到 Release目录中。
3.修改配置清单 manifest.json
打开 Release下的 manifest.json文件
修改 "first_page"为 "$(AppDir)/web项目目录/入口文件",如:"$(AppDir)/webProject/index.html";
修改 "application_title"为 "项目名称";
修改 "application_shortname"为 "项目简称";
修改 "icon_path"为 "图标名称"(图标文件应在 Release目录下);
修改 "form" -> "lanuch_state"为 "normal",按 windows默认窗口风格显示;
修改 "form" -> "lanuch_width"为 1600,设置应用程序运行时的默认宽度为1600;
修改 "form" -> "lanuch_height"为 800,设置应用程序运行时的默认高度为800;
ctrl+S,或者点击保存;
修改完配置信息后运行 hexclient.exe,如果能打开你的网页,那恭喜你已经成功了一半了!
4.将 Release打包成一个 exe
- 由于运行 hexclient.exe需要一些组件的支持,为了方便运行与下载,我们需要将这些文件打包成一个 exe文件,此时需要使用软件: Enigma virtual box
- 下载 Enigma virtual box
官方下载地址:https://www.enigmaprotector.com/en/aboutvb.html 可以试用,或者自行百度pj版本 - 解压后运行 enigmavirtualbox.exe;
- 添加 hexclient.exe为以程序文件名称,将 Release目录下的文件夹拖入 enigmavirtualbox的文件框中,再点击 “添加” 将其他文件添加到文件框中;
- 点击打包;
打包后将生成一个 hexclient_boxed.exe,这样就可以将这个应用程序 复制到其他任意位置打开了。
总结
抽空补充更换图标压缩体积