文章目录

  • 前言
  • 一、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

点击下载地址,下载适合你的版本

h5打包成ios ipa H5打包成exe_h5打包成ios ipa

2.解压

下载完解压出来,进入解压目录中的Release,

我的路径是: D:\hex_1.1.10_1621_windows32\Release,如图:

h5打包成ios ipa H5打包成exe_前端_02

注意:

  • 应用程序的主程序是 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

  1. 由于运行 hexclient.exe需要一些组件的支持,为了方便运行与下载,我们需要将这些文件打包成一个 exe文件,此时需要使用软件: Enigma virtual box
  2. 下载 Enigma virtual box
    官方下载地址:https://www.enigmaprotector.com/en/aboutvb.html 可以试用,或者自行百度pj版本
  3. 解压后运行 enigmavirtualbox.exe;
  4. 添加 hexclient.exe为以程序文件名称,将 Release目录下的文件夹拖入 enigmavirtualbox的文件框中,再点击 “添加” 将其他文件添加到文件框中;
  5. 点击打包;

打包后将生成一个 hexclient_boxed.exe,这样就可以将这个应用程序 复制到其他任意位置打开了。


总结

抽空补充更换图标压缩体积