1629399642-8c0b183367793ac

公司领导说要出一款crm,还要是 exe,但是基本思路其实就是界面由 UI设计,前端使用 HTML/JS/CSS编写,前后端分离,跨域实现前后端交互,通过 HTML打包工具,将 HTML打包成 exe可执行程序。前两周时间大概整理了下面几种打包工具:

  1. NodeWebkit
  2. HEX

今天主要是想和大家简单介绍第三种工具:HEX,而在接下去的一段时间里面,还会陆续把前面提到的另外两种工具介绍一遍。

“HEX,一个允许你采用前端技术(HTML,CSS,JavaScript)开发桌面应用软件的跨平台解决方案。是你开发桌面应用的一种新的选择,意在解决传统桌面应用开发中繁琐的UI和交互开发工作,使其变的简单而高效。特别适合重UI,重交互的桌面应用软件。”

———— from weakish sf.gg

一、下载HEX

在这里 下载地址 下载适合你的版本,我下的heX windows32这个版本的,二进制包,免安装版的。

1629399676-50507f72f498662

二、解压

下载完解压出来,进入解压目录中的Release,我的路径是: F:\commonSoft\HEX\hex_1.1.10_1621_windows32\Release,如果你下载的版本和我一样的话,那应该就是这样的:

1629399676-f154055ea1d3323

有几个需要你们明确的点:

  1. 应用程序的主程序是 hexclient.exe,也就是我们要双击执行的应用程序,默认的应用程序是查看当前应用的版本信息 “About heX”;
  2. manifest.json是清单文件,也就是应用程序配置文件,应用的名称,窗口模式,运行时的默认大小等等都在这里设置;
  3. 我们需要将写好的 web项目目录 copy到 Release目录中(截图时,我已经把 hexclient.exe更名为 client.exe了):
1629399676-643ee2429fb0870

三、修改配置清单 manifest.json

打开 Release下的 manifest.json文件

  1. 修改 “first_page”为 “$(AppDir)/web项目目录/入口文件”,如:”$(AppDir)wccy_web_front/index.html”;
  2. 修改 “application_title”为 “项目名称”;
  3. 修改 “application_shortname”为 “项目简称”;
  4. 修改 “icon_path”为 “图标名称”(图标文件应在 Release目录下);
  5. 修改 “form” -> “lanuch_state”为 “normal”,按 windows默认窗口风格显示;
  6. 修改 “form” -> “lanuch_width”为 1334,设置应用程序运行时的默认宽度为1334;
  7. 修改 “form” -> “lanuch_height”为 800,设置应用程序运行时的默认高度为800;

Ctrl+s,或者点击保存;

1629399676-89f49711ac05417
1629399676-dd460d8d8022c5a

修改完配置信息后运行 hexclient.exe:

1629399676-67d247dc85fc6e4

四、将 Release打包成一个 exe

由于运行 hexclient.exe需要一些组件的支持,为了方便运行与下载,我们需要将这些文件打包成一个 exe文件,此时需要使用软件: Enigma virtual box

  1. 下载 Enigma virtual box 下载地址 ← 左边这个下载地址已经废了,试试这个 新的下载地址 (修改于2020.08.11 早);
  2. 解压后运行 enigmavirtualbox.exe;
  3. 添加 hexclient.exe为以程序文件名称(截图时已将 hexclient.exe更名为 client.exe);
  4. 将 Release目录下的文件夹拖入 enigmavirtualbox的文件框中,再点击 “添加” 将其他文件添加到文件框中;
  5. 点击打包;
1629399676-dd672f81f799179

打包后将生成一个 hexclient_boxed.exe(截图时已将 hexclient.exe更名为 client.exe),这样就可以将这个应用程序 copy到其他任意位置打开了。

1629399676-000b6957bf75f06

有需要的话,可以将它压缩后做传输,压缩后大小在30M左右。

五、替换 exe原始图标

1629399676-000b6957bf75f06

我们打包完后的 exe文件的默认图标是原始的图标,需要替换成我们自己的图标,这个过程需要用到WinRAR 下载地址,替换的过程如下:

1629399677-f6453a3509d617c

最后的应用程序:

1629399677-331f5befe4780d3

 

 

 

简要说明

{
    "first_page": "chrome://version",       // 首页,可以是 URL 或者一个本地文件路径
    "application_title": "Hello heX!",      // 程序默认标题,alert 等窗口使用
    "application_shortname": "test",        // 应用程序别名
    "use_grit_package": true,               // 使用打包资源
    "icon_path": "",                        // 程序默认图标路径
    "use_node": true,                       // 是否开启 Node.js
    "version": "1.0",                       // 程序版本信息
    "locale": "zh-CN",                      // 浏览器区域设置
    "multiple_process": false,              // 是否为多进程模式
    "launch_node_in_all_pages": false,      // 在打开的所有页面中使用 Node.JS
    "load_node_manually": false,            // 是否手动加载 Node.js
    "disable_async_node_apis": false,       // 是否禁用 Node.JS 异步 API
    "remote_debugging_port": 65432,         // 远程调试端口
    "disable_debug_log": true,              // 是否禁止生成 Chromium 调试信息
    "quit_after_main_window_closed": false, // 是否在主窗口关闭后退出
    "cache_path": "data",                   // 缓存路径
    "npapi_plugin_directory": "",           // NPAPI 插件路径
    "disable_ime_composition": false,       // 禁用 IME composition
    "extensions": [                         // heX 扩展名称列表
      "hex_dialog",
      "hex_sleep",
      "hex_shortcut"
    ],
    "extension_path": "",                   // heX 扩展的路径
    "single_instance": true,                // 是否为单一实例模式
    "window_class_name": "A_HEXCLIENT",     // 主窗口类名
    "form": {
        "style": "captionless",             // 窗口类型:标准、无标题、桌面 Widget
        "plain": false,                     // 是否为扁平窗口
        "system_buttons": true,             // 是否显示默认的系统控制按钮
        "transmission_color": "none",       // 穿透颜色
        "transparent_browser": true,        // 是否为透明浏览器
        "fixed": false,                     // 窗体是否可以调整大小
        "disable_form_apis": false,         // 是否禁用所有窗口相关 API
        "opacity": "none",                  // 窗口透明度
        "hook_system_command": false,       // 是否拦截窗口的系统命令
        "launch_state": "normal",           // 启动初始状态
        "launch_width": 800,                // 启动初始宽度
        "launch_height": 600,               // 启动初始高度
        "launch_x": "screen_centered",      // 启动初始 X 轴位置
        "launch_y": "screen_centered",      //  启动初始 Y 轴位置
        "min_width": 0,                     // 最小宽度
        "min_height": 0,                    // 最小高度
        "max_width": 0,                     // 最大宽度
        "max_height": 0,                    // 最大高度
        "border_width": 5                   // 模拟边框区域宽度
    },
    "browser": {
        "no_proxy_server": false,
        "winhttp-proxy-resolver": false,
        "disable_gpu": true,
        "disable_3d_apis": false,
        "disable_databases": false,
        "disable_experimental_webgl": false,
        "disable_file_system": false,
        "disable_geolocation": false,
        "disable_gpu_process_prelaunch": true,
        "disable_java": false,
        "disable_javascript": false,
        "disable_javascript_i18n_api": false,
        "disable_local_storage": false,
        "disable_logging": false,
        "disable_plugins": false,
        "disable_renderer_accessibility": false,
        "disable_session_storage": false,
        "disable_speech_input": false,
        "disable_web_sockets": false,
        "in_process_gpu": false,
        "in_process_plugins": false,
        "enable_media_stream": true,
        "web_security_disabled": true,
        "file_access_from_file_urls_allowed": true,
        "universal_access_from_file_urls_allowed": true
    }
}

详细说明

  • first_page$(AppDir) 代表当前程序路径(包含“/”),也可以是 file 协议 URL 或者本地路径。
  • application_shortname:应用程序别名,将会影响到使用打包资源时读取的资源包 PAK 文件名及 URL。
  • use_grit_package:使用 PAK 格式的资源包。参见:heX 打包生成工具说明
  • icon_path:程序默认图标路径,必须是一个本地路径。
  • use_node:设置为 true 则开启 Node.js,与移除 node 动态库效果一样。
  • launch_node_in_pages:默认情况下,通过 window.open() 弹出的子窗口中将不会启动 Node.js,开启此配置项后则始终在弹出的子窗口中启动 Node.js。
  • load_node_manually:当需要自定义 Node.js 启动时机的时候开启此配置项,这时需要在页面中通过加入 <script></script> 标签或者用 JavaScript 动态插入 node.js 文件。
  • disable_async_node_apis:此时 Node.js 的 event loop 将停止运行。
  • disable_debug_log:此时将不会再生成 debug.log 文件。
  • quit_after_main_window_closed:默认情况下,只有所有的浏览器窗口都关闭后,程序才会退出。
  • npapi_plugin_directory:当此项为空时会默认使用当前工作路径作为 NPAPI 插件加载路径。
  • disable_ime_composition:开启后将禁用输入法输入时的 Composition String,参见:http://msdn.microsoft.com/en-us/library/windows/desktop/dd317765(v=vs.85).aspx
  • extensions:列出当前程序想要加载的 heX 扩展名称,以逗号分隔。若扩展不存在或者加载错误则自动跳过。
  • extension_path:指定需要加载的 heX 扩展的路径,若为空则使用当前工作路径。
  • single_instance:开启单一实例模式后,启动新的实例之后会自动激活当前已经启动的实例,并且触发 instanceCreated 事件,此配置要求 window_class_name 不为空,并且为单进程模式。
  • window_class_name:自定义主窗口的窗口类名。
  • form 对象

    • style:有三种取值,不区分大小写:
      • standard:标准窗口,与系统主题一致。
      • captionless:无标题栏的窗口,可以自绘标题栏。
      • desktop_widget:桌面 Widget 窗口,将会固定在桌面上,不会随着显示桌面而最小化。
    • plain:开启此配置后窗口将以扁平化状态呈现,此配置只针对非标准型窗口。对于 Windows XP,则不会显示窗口阴影;对于 Windows Vista 及更新的系统,则不会显示 Aero 效果(再系统支持及开启 Aero 的情况下)。
    • system_button:对于支持 Aero 的 Windows,开启此配置项后,将会始终显示 Aero 框架所带的最小化、最大化、关闭控制按钮。此配置项仅在支持 Aero 的 Windows、开启了 transparent_browser 及 style 不为 standard 的情况下可以看到效果。
    • transmission_color:穿透颜色可能有两类取值,none 表示关闭,#RRGGBB 表示一个 HTML 的颜色值,如 #0000FF,也支持简写 #666,属性值不区分大小写。浏览器窗口中遇到穿透颜色所指的颜色值时将不再响应鼠标事件,直接穿透到其下方的窗口,并且在视觉上可以直接看到下方的窗口。此配置项可以制作不规则窗口。
    • transparent_browser:对于支持并且开启了 Aero 的 Windows 系统,开启此配置项后,整个浏览器区域将变为透明。但需要 HTML 元素的背景色为透明时才能看到效果。
    • fixed:开启此配置项后窗口将不能被调整大小。
    • opacity:透明度可能有两类取值,none 表示关闭,0-255 的整数值表示 透明 到 不透明
    • launch_state:启动的初始状态可能有下面几种取值:
      • normal 表示默认
      • minimized 表示最小化状态
      • maximized 表示最大化状态
      • hidden 表示隐藏状态
      • fullscreen 表示全屏状态
    • launch_width:启动的初始宽度值可能有下面两种取值:
      • system_default 表示采用系统默认的宽度
      • 整数值 表示像素为单位的宽度值
    • launch_height:启动的初始高度值可能有下面两种取值:
      • system_default 表示采用系统默认的高度
      • 整数值 表示像素为单位的高度值
    • launch_x:启动的初始 X 轴位置可能有下面几种取值:
      • system_default 表示采用系统默认的 X 轴位置
      • parent_centered 表示相对父窗口水平居中
      • screen_centered 表示相对屏幕水平居中
      • 整数值 表示像素为单位的 X 轴位置
    • launch_y:启动的初始 Y 轴位置可能有下面几种取值:
      • system_default 表示采用系统默认的 Y 轴位置
      • parent_centered 表示相对父窗口垂直居中
      • screen_centered 表示相对屏幕垂直居中
      • 整数值 表示像素为单位的 Y 轴位置
    • min_width:窗口的最小宽度,单位为像素,0 代表无限制
    • min_height:窗口的最小高度,单位为像素,0 代表无限制
    • max_width:窗口的最大宽度,单位为像素,0 代表无限制
    • max_height:窗口的最大高度,单位为像素,0 代表无限制
    • border_width:在为标准窗口模式下,模拟出来的边框区域宽度,在此宽度之内可以调整窗口的大小
  • browser 对象

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。

最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。 若排除这种情况,可在对应资源底部留言,或联络我们。

对于会员专享、整站源码、程序插件、网站模板、网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。

如果您已经成功付款但是网站没有弹出成功提示,请联系站长提供付款信息为您处理

源码素材属于虚拟商品,具有可复制性,可传播性,一旦授予,不接受任何形式的退款、换货要求。请您在购买获取之前确认好 是您所需要的资源