YLong软件

HTML打包EXE使用附件功能调用外部程序扩展你的EXE - 附实战演练实现录频功能

Wed, 29 Apr 2026 19:11:05 +0800

HTML打包EXE工具支持附件文件功能，可以将额外的文件或文件夹与HTML项目一起打包进EXE。打包后的附件会和EXE放在同一目录下，运行时可以直接访问。配合 HTMLPackHelper.open() API，可以实现从HTML页面中启动外部程序的功能。

本文通过一个实际案例——将开源截图录屏工具 ScreenToGif 打包进EXE，点击按钮即可启动，来完整演示附件文件功能的使用方法。

下载最新版本

功能入口

在打包工具快速打包标签页中，可以找到附件文件配置项：

点击配置附件按钮，会弹出附件管理对话框。

附件管理对话框

在对话框中可以进行以下操作：

添加文件：选择一个或多个文件作为附件
添加文件夹：选择整个文件夹作为附件（文件夹内所有内容都会被打包）
移除：删除不需要的附件项
清空：一键清除所有附件

对话框中会显示每个附件的类型标记：

🔵 文件：单个文件
🟠 文件夹：整个目录
🔴 不存在：文件路径无效（打包时会跳过）

附件文件的存放位置

打包后，附件文件会被放到与EXE同级的目录下。例如：

MyApp/
├── MyApp.exe
├── ScreenToGif.exe      ← 附件文件
├── tools/               ← 附件文件夹
│   ├── tool1.exe
│   └── tool2.bat
└── ...（其他打包生成的文件）

如果选择的是安装版EXE，附件文件会被包含在安装包中，安装后同样位于应用安装目录下。如果选择的是绿色版EXE, 附件文件会被嵌入到EXE里面, 可以使用相对于EXE的路径去获取.

实战演示：集成 ScreenToGif 截图录屏工具

关于 ScreenToGif

ScreenToGif是一款开源免费的屏幕录制工具（MIT 协议），支持：

屏幕录制并导出为 GIF/视频
区域截图
内置编辑器，可添加文字、边框等

它是一个单文件便携版EXE（约几MB），非常适合作为附件打包。

第一步：准备HTML文件

创建一个 index.html 文件，包含一个启动 ScreenToGif 的按钮：

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>我的工具箱</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            body {
                font-family: 'Microsoft YaHei', 'Segoe UI', sans-serif;
                background: #f0f2f5;
                min-height: 100vh;
                padding: 40px 20px;
            }
            .header {
                text-align: center;
                margin-bottom: 30px;
            }
            .header h1 {
                font-size: 22px;
                color: #333;
                font-weight: 600;
            }
            .header p {
                color: #999;
                font-size: 13px;
                margin-top: 6px;
            }
            .tool-list {
                max-width: 480px;
                margin: 0 auto;
            }
            .tool-item {
                background: #fff;
                border: 1px solid #e8e8e8;
                border-radius: 8px;
                padding: 16px 20px;
                margin-bottom: 12px;
                display: flex;
                align-items: center;
                justify-content: space-between;
            }
            .tool-info {
                display: flex;
                align-items: center;
                gap: 12px;
            }
            .tool-icon {
                width: 40px;
                height: 40px;
                background: #e6f7ff;
                border-radius: 8px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 20px;
                flex-shrink: 0;
            }
            .tool-name {
                font-size: 15px;
                font-weight: 500;
                color: #333;
            }
            .tool-desc {
                font-size: 12px;
                color: #999;
                margin-top: 2px;
            }
            .btn-open {
                background: #1890ff;
                color: #fff;
                border: none;
                border-radius: 4px;
                padding: 6px 16px;
                font-size: 13px;
                cursor: pointer;
                white-space: nowrap;
                flex-shrink: 0;
            }
            .btn-open:hover {
                background: #40a9ff;
            }
        </style>
    </head>
    <body>
        <div class="header">
            <h1>我的工具箱</h1>
            <p>点击"打开"按钮即可启动对应工具</p>
        </div>
        <div class="tool-list">
            <div class="tool-item">
                <div class="tool-info">
                    <div class="tool-icon">🎬</div>
                    <div>
                        <div class="tool-name">ScreenToGif</div>
                        <div class="tool-desc">屏幕录制工具，支持录屏、截图、GIF导出</div>
                    </div>
                </div>
                <button class="btn-open" onclick="openTool('ScreenToGif.exe')">打开</button>
            </div>
        </div>

        <script>
            function openTool(fileName) {
                if (window.HTMLPackHelper) {
                    window.HTMLPackHelper.open(fileName);
                } else {
                    alert('请在打包后的EXE中运行，当前环境不支持此功能');
                }
            }
        </script>
    </body>
</html>

核心代码只有一行：

window.HTMLPackHelper.open('ScreenToGif.exe');

第二步：打包配置

打开HTML打包EXE工具
本地html主文件：选择上面创建的 index.html
附件文件：点击配置附件 → 添加文件 → 选择下载好的 ScreenToGif.exe
在高级配置中勾选启用API（必须开启，否则 HTMLPackHelper 不可用）

点击打包，选择保存位置

第三步：运行效果

打包完成后，运行生成的EXE：

程序启动后显示工具箱界面

点击启动 ScreenToGif 按钮
ScreenToGif 程序被成功启动

open API 说明

HTMLPackHelper.open(itemPath) 用于打开一个文件或启动一个程序。

路径规则

路径类型	示例	说明
相对路径	`"ScreenToGif.exe"`	相对于EXE所在目录
相对路径（子目录）	`"tools/mytool.exe"`	EXE所在目录下的子目录
绝对路径	`"C:\\Windows\\notepad.exe"`	直接使用绝对路径

大多数情况下使用相对路径即可，因为附件文件打包后就在EXE同级目录下。

前置条件

使用 HTMLPackHelper.open() 需要在打包时勾选启用API选项（位于高级配置标签页）。如果未开启API，window.HTMLPackHelper 将为 undefined。

建议在调用前做一下判断：

if (window.HTMLPackHelper) {
    window.HTMLPackHelper.open('ScreenToGif.exe');
} else {
    alert('当前环境不支持此功能');
}

不仅可以打开EXE

open API 本质上调用的是系统的默认打开方式，因此不限于EXE文件：

// 打开一个附件PDF文档
window.HTMLPackHelper.open('使用手册.pdf');

// 打开一个附件文件夹
window.HTMLPackHelper.open('data');

// 打开一个附件图片
window.HTMLPackHelper.open('help.png');

注意事项

启用API：使用 HTMLPackHelper.open() 前必须在高级配置中勾选启用API
文件体积：附件文件会增加打包后的EXE体积，建议使用便携版/单文件版工具
路径中的空格：如果文件名包含空格，直接传入即可，不需要额外处理
安装版EXE：附件文件同样会被包含在安装包中，安装后位于安装目录下
杀毒软件：部分杀毒软件可能对打包的EXE中包含其他EXE文件产生误报，建议发布前测试

HTML打包EXE安装包配置教程 - 自定义安装目录和桌面快捷方式名

Tue, 28 Apr 2026 19:41:17 +0800

HTML打包EXE工具在选择安装版EXE格式时，支持自定义安装目录和桌面快捷方式名称。本文简单介绍这两个配置项的作用和默认行为。

下载最新版本

配置位置

在打包工具中切换到高级配置标签页，底部有一个安装包配置面板，包含两个配置项：

默认安装目录

这个配置项决定了用户安装时的默认安装路径，完整路径为：

C:\Program Files (x86)\{你填写的内容}

不填时：自动使用打包时保存的EXE文件名作为安装目录名。例如你保存的安装包文件名为 MyApp-setup.exe，那么默认安装路径就是 C:\Program Files (x86)\MyApp-setup。

填写后：使用你填写的名称。例如填写 我的应用，安装路径就是 C:\Program Files (x86)\我的应用。

桌面快捷方式名

这个配置项决定了安装完成后桌面上快捷方式显示的名称。

不填时：同样使用打包时保存的EXE文件名。例如保存的文件名为 MyApp-setup.exe，桌面快捷方式就显示为 MyApp-setup。

填写后：使用你填写的名称。例如填写 我的应用，桌面快捷方式就显示为 我的应用。

使用建议

大多数情况下建议填写这两个配置项，给用户一个清晰的应用名称，而不是使用默认的文件名。特别是当保存的文件名包含版本号或 -setup 等后缀时，填写一个简洁的应用名会更美观。

注意：安装包配置仅在格式设置选择安装版EXE时生效，选择绿色版EXE时无需关注此配置。

HTML打包/EXE加密的一机一码网络验证常见问题汇总

Mon, 27 Apr 2026 20:30:45 +0800

本文汇总了 HTML打包EXE工具和 EXE一机一码加密大师在使用网络验证功能时的常见问题与解答，帮助你快速定位和解决遇到的问题。

下载最新版本

一机一码机制

Q：网络验证的「一机一码」是什么意思？

一机一码是指每个激活码激活时会绑定用户的机器码，绑定后该激活码只能在这一台机器上使用。即使激活码被泄露给其他人，也无法在其他电脑上使用，有效防止激活码被多人共享。

Q：用户换了电脑，之前的激活码还能用吗？

不能。 激活码绑定的是原来那台电脑的机器码，更换电脑后机器码会改变，原激活码无法使用。你需要为用户生成一个新的激活码。

Q：用户重装系统后，激活码还有效吗？

一般情况下，重装系统不会影响机器码，激活码仍然有效。但如果用户更换了主要硬件（如主板、硬盘等），机器码可能会改变，此时需要重新提供新的激活码。

Q：一个激活码可以在多台电脑上使用吗？

不可以。 这是一机一码机制的核心——一个激活码只能绑定一台机器。如果需要在多台机器上使用，需要为每台机器分别生成激活码。

激活码管理

Q：如何批量生成激活码？

在管理后台的生成激活码页面，设置好过期时间、允许打开次数、App ID 等参数后，将生成数目设为你需要的数量（最多一次 100 个），点击生成即可批量创建。

Q：激活码可以设置有效期吗？

可以。 生成激活码时可以选择有效时长，支持 1小时到 3年，也可以选择永久有效或自定义分钟数。有效期从用户激活时开始计算，而不是从生成时开始。

Q：激活码过期了怎么办？

过期的激活码无法续期，需要为用户生成新的激活码。用户使用新激活码重新激活即可。

Q：如何禁用某个用户的激活码？

在管理后台的激活码管理页面，找到对应的激活码，点击禁用按钮即可。禁用后用户打开软件时验证会失败。如需恢复，点击启用即可。

Q：删除和禁用激活码有什么区别？

禁用：临时操作，可以随时恢复启用
删除：永久操作，删除后无法恢复

如果只是想暂时阻止某个用户使用，建议使用禁用功能。

配置与打包

Q：App ID 有什么作用？怎么设置？

App ID 用于区分不同的软件项目。在打包/加密时设置一个 App ID（如 myapp1），在管理后台生成激活码时也需要填写相同的 App ID。不同的软件建议使用不同的 App ID，方便独立管理。

Q：App ID 填错了会怎样？

如果管理后台生成激活码时填写的 App ID 与打包/加密时设置的 App ID 不一致，用户激活时会验证失败。请确保两端的 App ID 完全一致。

Q：后台地址和密钥填写后，点击打开管理后台没反应？

请检查以下几点：

是否完整粘贴了后台地址和密钥，包括 leapeverurl_ 和 leapeverkey_ 前缀
是否有多余的空格或换行符
是否手动修改了内容（请勿手动修改，直接完整粘贴）

Q：可以在多台电脑上使用同一组后台地址和密钥吗？

可以。 后台地址和密钥与你的账号绑定，可以在不同的电脑上使用同一组凭证进行打包和管理激活码。

用户激活相关

Q：用户激活时提示失败是什么原因？

常见原因包括：

激活码与 App ID 不匹配：确保激活码是针对该软件的 App ID 生成的
激活码已被使用：该激活码已经在另一台机器上激活过
激活码已过期：检查激活码的有效期
激活码已被禁用：在后台检查激活码状态
网络问题：用户的网络无法连接验证服务器

Q：用户激活时需要联网吗？

需要。 网络验证顾名思义需要联网才能完成激活和验证。如果用户的环境无法联网，建议改用离线一机一码验证方式。

Q：用户每次打开软件都需要联网验证吗？

激活成功后，软件会在本地保存验证信息。后续打开软件时会尝试联网验证，如果短暂无网络通常不会影响使用，但长期离线可能导致验证失效。

Q：可以设置允许试用吗？

可以。 在打包/加密时可以设置允许试用次数，用户在未输入激活码的情况下可以试用软件指定次数。试用次数用完后必须输入激活码才能继续使用。

后台部署与共用

Q：网络验证后台可以同时给 HTML打包EXE 和 EXE一机一码加密大师使用吗？

可以。 网络验证后台后部署完成后，HTML打包EXE工具和 EXE一机一码加密大师可以共用同一个后台地址和密钥。两款软件的网络验证功能使用的是同一套验证系统，只需将后台地址和密钥分别填入两款工具的网络验证配置页面即可。

通过设置不同的 App ID 来区分不同的软件项目，管理后台可以统一管理所有软件的激活码。

Q：两款软件共用后台时，激活码是通用的吗？

不是通用的。 虽然后台是同一个，但激活码是通过 App ID 来区分的。HTML打包EXE打包的软件和EXE加密大师加密的软件如果设置了不同的 App ID，它们的激活码互不通用。只有 App ID 相同的软件之间，激活码才能通用。

Q：购买网络验证服务后需要自己部署服务器吗？

不需要。 购买后会直接收到后台地址和密钥，使用的是官方服务器，无需自行部署。将收到的 leapeverurl_xxxxxxxx 和 leapeverkey_xxxxxxxx 粘贴到工具中即可使用。

Q：可以部署自己的网络验证服务器吗？

可以。 如果有特殊需求，可以定制部署独立的验证后台。具体价格请访问购买页面或联系客服：查看详细价格

续费与费用

Q：网络验证服务到期后，已激活的用户会受影响吗？

不会。 服务到期后，已激活的用户可以继续正常使用软件。但你将无法通过管理后台生成新的激活码或管理已有激活码。

Q：续费后数据会丢失吗？

不会。 续费后使用相同账号购买即可，原有的激活码数据会自动恢复，无需重新配置。

Q：网络验证和离线一机一码哪个更适合我？

场景	推荐方式
用户量大，需要批量分发激活码	网络验证
需要远程管理和禁用用户	网络验证
用户环境无法联网	离线一机一码
不想维护后台，用户量少	离线一机一码
需要设置激活码有效期	网络验证

更多对比详情可参考：离线一机一码验证和网络验证的区别

安全性

Q：后台地址和密钥可以分享给别人吗？

不建议。 后台地址和密钥是你专属的管理凭证，分享后他人可以管理你的全部激活码（包括生成、删除、禁用等操作）。请妥善保管。

Q：激活码被泄露了怎么办？

由于是一机一码机制，即使激活码被泄露，也只能在已绑定的那台机器上使用。如果激活码尚未被使用就泄露了，可以在管理后台删除该激活码并重新生成新的。

Q：用户可以通过修改系统时间来绕过有效期吗？

不能。 网络验证的有效期是由服务器端控制的，不依赖用户本地的系统时间，因此修改本地时间无法绕过有效期限制。

HTML打包EXE透明窗口教程 - 打造炫酷无边框透明桌面应用

Sun, 26 Apr 2026 20:41:30 +0800

使用HTML打包EXE工具的无边框窗口功能，结合CSS透明背景和 -webkit-app-region 拖动属性，可以打造出炫酷的透明桌面应用程序。告别千篇一律的标准窗口，让你的应用拥有独特的视觉风格。

下载最新版本

实现原理

透明窗口的实现需要两个关键步骤配合：

打包工具端：勾选「无边框窗口」选项，去掉系统默认的标题栏和窗口边框
HTML/CSS端：将页面背景设为透明，让窗口呈现透明效果；同时使用 -webkit-app-region: drag 让用户可以拖动窗口

打包工具配置

在打包工具主界面切换到高级配置标签页，勾选无边框窗口选项：

配置项	说明
无边框窗口	勾选后，打包的EXE文件将没有窗口边框和标题栏

提示：勾选无边框窗口后，系统自带的标题栏（包括最小化、最大化、关闭按钮）将被移除，需要在HTML中自行实现这些功能。

设置透明背景

在HTML文件中，将 html 和 body 的背景色设置为透明：

html,
body {
    margin: 0;
    padding: 0;
    background: transparent !important;
}

这样窗口中没有内容覆盖的区域将直接透明，可以看到桌面背景。

实现窗口拖动

无边框窗口去掉了系统标题栏，用户无法通过标题栏拖动窗口。此时需要使用 -webkit-app-region 属性来指定可拖动区域：

/* 设置整个容器可拖动 */
.drag-area {
    -webkit-app-region: drag;
}

/* 按钮、输入框等交互元素需要排除拖动，否则无法点击 */
button,
input,
a,
.no-drag {
    -webkit-app-region: no-drag;
}

关键规则

属性值	说明
`drag`	设置该区域可以拖动窗口，类似系统标题栏的效果
`no-drag`	排除该区域的拖动行为，使其可以正常点击和交互

注意：被设置为 drag 的区域将无法响应鼠标点击事件。因此按钮、链接、输入框等需要交互的元素，必须单独设置 no-drag，否则用户将无法点击。

自定义关闭/最小化按钮

去掉系统标题栏后，需要自己实现窗口控制按钮。可以通过开启API支持来调用窗口控制功能：

在高级配置中勾选 开启API支持
在HTML中使用以下JS API控制窗口：

// 最小化窗口
window.HTMLPackHelper.minimize();

// 最大化/还原窗口
window.HTMLPackHelper.maximize();

// 恢复窗口大小
window.HTMLPackHelper.restore();

// 关闭窗口
window.HTMLPackHelper.close();

完整示例：赛博朋克桌面时钟

下面是一个赛博朋克风格的透明桌面时钟组件，带有霓虹灯光效、扫描线动画和实时时钟，可以直接用于打包：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Cyber Clock</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }

            html,
            body {
                background: transparent !important;
                height: 100%;
                font-family: 'Consolas', 'Courier New', monospace;
                overflow: hidden;
                -webkit-user-select: none;
                user-select: none;
            }

            .panel {
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                border: 1px solid rgba(0, 255, 200, 0.25);
                background: rgba(0, 10, 15, 0.85);
                position: relative;
            }

            /* 扫描线动画 */
            .panel::after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                height: 2px;
                background: linear-gradient(
                    90deg,
                    transparent,
                    rgba(0, 255, 200, 0.4),
                    transparent
                );
                animation: scanline 3s linear infinite;
                pointer-events: none;
                z-index: 10;
            }
            @keyframes scanline {
                0% {
                    top: 0;
                    opacity: 1;
                }
                50% {
                    opacity: 0.5;
                }
                100% {
                    top: 100%;
                    opacity: 0;
                }
            }

            /* 顶栏 - 可拖动 */
            .top-bar {
                -webkit-app-region: drag;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 8px 14px;
                border-bottom: 1px solid rgba(0, 255, 200, 0.12);
                flex-shrink: 0;
            }
            .top-bar .sys-label {
                font-size: 10px;
                color: rgba(0, 255, 200, 0.5);
                letter-spacing: 3px;
                text-transform: uppercase;
            }
            .top-bar .dot {
                display: inline-block;
                width: 6px;
                height: 6px;
                border-radius: 50%;
                background: #0fa;
                margin-right: 8px;
                box-shadow: 0 0 6px #0fa;
                animation: blink 2s ease infinite;
            }
            @keyframes blink {
                0%,
                100% {
                    opacity: 1;
                }
                50% {
                    opacity: 0.3;
                }
            }

            /* 窗口按钮 */
            .win-btns {
                display: flex;
                gap: 6px;
                -webkit-app-region: no-drag;
            }
            .win-btns button {
                width: 18px;
                height: 18px;
                border: 1px solid rgba(0, 255, 200, 0.25);
                background: transparent;
                color: rgba(0, 255, 200, 0.6);
                font-size: 10px;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: all 0.15s;
            }
            .win-btns button:hover {
                background: rgba(0, 255, 200, 0.12);
                border-color: rgba(0, 255, 200, 0.6);
                color: #0fa;
            }
            .win-btns .btn-x:hover {
                background: rgba(255, 60, 60, 0.2);
                border-color: rgba(255, 60, 60, 0.6);
                color: #ff5050;
            }

            /* 时钟主体 */
            .clock-body {
                flex: 1;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                padding: 0 24px;
            }
            .time {
                font-size: 64px;
                font-weight: 700;
                color: #0fa;
                letter-spacing: 4px;
                text-shadow: 0 0 20px rgba(0, 255, 200, 0.35);
                font-variant-numeric: tabular-nums;
                line-height: 1;
            }
            .time .colon {
                animation: blink 1s step-end infinite;
            }
            .date-row {
                margin-top: 8px;
                font-size: 13px;
                color: rgba(0, 255, 200, 0.4);
                letter-spacing: 2px;
            }

            /* 分隔线 */
            .sep {
                margin: 0 24px;
                height: 1px;
                background: linear-gradient(
                    90deg,
                    transparent,
                    rgba(0, 255, 200, 0.2),
                    transparent
                );
                flex-shrink: 0;
            }

            /* 底部信息 */
            .info-grid {
                display: grid;
                grid-template-columns: 1fr 1fr 1fr;
                gap: 0;
                padding: 12px 24px;
                text-align: center;
                flex-shrink: 0;
            }
            .info-item {
                padding: 6px 0;
            }
            .info-item:not(:last-child) {
                border-right: 1px solid rgba(0, 255, 200, 0.08);
            }
            .info-val {
                font-size: 18px;
                color: #0fa;
                font-weight: 700;
                display: block;
            }
            .info-label {
                font-size: 9px;
                color: rgba(0, 255, 200, 0.35);
                letter-spacing: 2px;
                text-transform: uppercase;
                margin-top: 4px;
                display: block;
            }
        </style>
    </head>
    <body>
        <div class="panel">
            <div class="top-bar">
                <span><span class="dot"></span><span class="sys-label">System Monitor</span></span>
                <div class="win-btns">
                    <button onclick="window.HTMLPackHelper.minimize()">─</button>
                    <button class="btn-x" onclick="window.HTMLPackHelper.close()">✕</button>
                </div>
            </div>

            <div class="clock-body">
                <div class="time" id="clock">
                    00<span class="colon">:</span>00<span class="colon">:</span>00
                </div>
                <div class="date-row" id="date-row">----/--/--</div>
            </div>

            <div class="sep"></div>

            <div class="info-grid">
                <div class="info-item">
                    <span class="info-val" id="run-time">00:00</span>
                    <span class="info-label">运行时长</span>
                </div>
                <div class="info-item">
                    <span class="info-val" id="fps">--</span>
                    <span class="info-label">FPS</span>
                </div>
                <div class="info-item">
                    <span class="info-val" id="mem">-- MB</span>
                    <span class="info-label">内存</span>
                </div>
            </div>
        </div>

        <script>
            const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
            const startTime = Date.now();
            let frames = 0,
                lastFpsTime = Date.now(),
                currentFps = 0;

            function pad(n) {
                return n < 10 ? '0' + n : n;
            }

            function tick() {
                const now = new Date();
                document.getElementById('clock').innerHTML =
                    pad(now.getHours()) +
                    '<span class="colon">:</span>' +
                    pad(now.getMinutes()) +
                    '<span class="colon">:</span>' +
                    pad(now.getSeconds());

                document.getElementById('date-row').textContent =
                    now.getFullYear() +
                    '/' +
                    pad(now.getMonth() + 1) +
                    '/' +
                    pad(now.getDate()) +
                    '  星期' +
                    weekdays[now.getDay()];

                // 运行时长
                const elapsed = Math.floor((Date.now() - startTime) / 1000);
                const m = Math.floor(elapsed / 60),
                    s = elapsed % 60;
                document.getElementById('run-time').textContent = pad(m) + ':' + pad(s);

                // FPS
                frames++;
                if (Date.now() - lastFpsTime >= 1000) {
                    currentFps = frames;
                    frames = 0;
                    lastFpsTime = Date.now();
                }
                document.getElementById('fps').textContent = currentFps || '--';

                // 内存
                if (performance.memory) {
                    const mb = (performance.memory.usedJSHeapSize / 1048576).toFixed(1);
                    document.getElementById('mem').textContent = mb + ' MB';
                }

                requestAnimationFrame(tick);
            }
            requestAnimationFrame(tick);
        </script>
    </body>
</html>

打包配置要点

使用上面的HTML打包时，需要在打包工具中做以下配置：

快速打包页面：选择该HTML文件作为本地主文件
高级配置页面：

✅ 勾选 无边框窗口
✅ 勾选 开启API支持（用于窗口控制按钮）
✅ 勾选 置顶窗口, 可以让整个html时钟始终显示在最前面
窗口大小建议设为 宽度 350、高度 200

内核选择 Chrome内核（透明效果仅Chrome内核支持）

效果预览

打包后运行效果如下，赛博朋克风格的时钟面板悬浮在桌面上，带有扫描线动画和霓虹灯光效果：

进阶技巧

1. 只让部分区域可拖动

如果只想让标题栏可拖动，其余区域正常交互：

/* 仅标题栏可拖动 */
.title-bar {
    -webkit-app-region: drag;
}

/* 标题栏内的按钮排除拖动 */
.title-bar button {
    -webkit-app-region: no-drag;
}

2. 半透明磨砂背景

可以在深色背景上使用 rgba 和 backdrop-filter 实现层叠的半透明磨砂效果：

.container {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

3. 异形窗口效果

利用 border-radius 制作圆角甚至圆形窗口：

.card {
    border-radius: 20px; /* 圆角矩形 */
}

.circle-window {
    border-radius: 50%; /* 圆形窗口 */
    width: 300px;
    height: 300px;
}

4. 窗口阴影效果

可以用CSS阴影为内部元素添加浮层感：

.card {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

注意事项

透明窗口效果仅Chrome内核支持，IE内核不支持
勾选无边框窗口后，系统标题栏将被移除，请务必自行添加关闭按钮
透明区域可以穿透点击到桌面或下层窗口
使用 -webkit-app-region: drag 的区域无法响应鼠标事件，交互元素需设为 no-drag
建议搭配 开启API支持 使用，方便调用窗口最小化、最大化、关闭等功能

HTML打包EXE工具启动图设置 - 为打包程序添加启动画面

Thu, 23 Apr 2026 21:09:47 +0800

HTML打包EXE工具新增了启动图设置功能，可以为打包生成的EXE程序添加启动画面（Splash Screen）。用户打开程序时，会先显示一张自定义图片，待主页面加载完成后自动关闭并显示主窗口。

下载最新版本

功能入口

在打包工具主界面切换到版权设置标签页，在底部可以找到启动图设置面板：

配置项	说明
启动图片	选择一张图片作为启动画面，支持 PNG、JPG、JPEG、BMP 格式。推荐使用PNG，支持透明背景
启动图宽度	设置启动图的显示宽度（像素），高度按比例自动计算。不填则使用图片原始尺寸

使用方法

点击选择图片按钮，选择一张图片文件（PNG、JPG、JPEG、BMP）
可选填写启动图宽度（正整数，单位像素），不填则使用原始尺寸
如需清除已选图片，点击清除按钮即可
正常执行打包操作

打包后的EXE启动时，启动图会居中显示在屏幕上，主页面加载完成后自动关闭。

启动图特性

无边框、透明背景（PNG透明区域直接透明）
屏幕居中、置顶显示
不在任务栏显示，不可拖动、不可调整大小
主页面加载完成后自动关闭

建议：使用PNG格式图片，宽度建议 300-600 像素。不需要启动画面时，将图片路径留空即可。

HTML打包EXE网络验证管理后台使用指南 - 激活码生成、管理与日志查看

Wed, 22 Apr 2026 20:40:41 +0800

网络验证管理后台是你管理激活码和用户的核心工具。本文将详细介绍后台各项功能的使用方法，帮助你快速上手。

前提条件

在开始之前，请确保：

在HTML打包/EXE加密软件中, 网络验证配置已经完成（参考网络验证接入指南）
已通过打包/加密工具中的打开网络验证管理后台按钮成功访问管理页面

后台页面概览

管理后台主要包含以下功能模块：

生成激活码：批量生成带有效期和使用限制的激活码
激活码管理：查看、搜索、排序、删除、禁用/启用已生成的激活码
试用管理：查看和管理试用用户的机器码记录
用户日志：查看用户激活、登录等操作日志

页面底部有三个导航按钮，分别对应生成激活码、激活码管理和试用管理。点击左上角 ☰ 菜单按钮可以切换到用户日志页面。

生成激活码

参数说明

在生成激活码页面，你需要填写以下参数：

参数	说明
过期时间	激活码激活后的有效时长，支持 1小时到 3年，也可选择永久或自定义分钟数
允许打开次数	用户软件允许打开的次数限制，设为 0 表示不限次数，范围 0-100000
生成数目	一次批量生成的激活码数量，范围 1-100
App ID	用于区分不同软件的标识，仅支持字母和数字，不超过 20 个字符。不填则默认使用 `id1`
介绍信息	选填的备注信息，不超过 5 个字符，方便你在管理时识别不同批次的激活码

生成步骤

在过期时间下拉框中选择合适的有效期，如需自定义可选择"自定义"后手动输入分钟数
设置允许打开次数（0 为不限）
输入生成数目
填写 App ID（需要与打包时设置的 App ID 一致）
可选填写介绍信息作为备注
点击生成激活码按钮

生成成功后会弹出激活码结果窗口，点击复制激活码按钮即可一键复制所有生成的激活码，方便分发给用户。

提示：App ID 必须与打包 EXE 时填写的 App ID 保持一致，否则用户激活时会验证失败。不同的软件建议使用不同的 App ID。

激活码管理

点击底部导航栏的激活码管理按钮，进入激活码管理页面。首次进入时会自动加载所有已生成的激活码列表。

激活码信息

每个激活码卡片会显示以下信息：

激活码：激活码内容，已禁用的激活码会显示删除线和红色"(被禁用)"标记
使用状态：显示"已使用"或"未使用"
介绍信息：生成时填写的备注
软件 ID：对应的 App ID
创建时间：激活码的创建时间
有效时长：激活码的有效期
软件允许打开次数：打开次数限制，0 为无限次
激活时间：（已使用的激活码）用户激活的时间
机器码：（已使用的激活码）绑定的用户机器码

已过期或超出使用次数的激活码，卡片背景会变为灰色，方便区分。

搜索激活码

在页面顶部的搜索框中输入关键词，可以实时过滤激活码列表。支持按激活码内容、App ID、机器码、介绍信息等进行搜索。

排序激活码

点击搜索框旁边的排序下拉框，可以选择以下排序方式：

创建时间：按创建时间从新到旧排序
使用情况：未使用的排在前面
状态：未禁用的排在前面

操作激活码

每个激活码卡片底部提供以下操作按钮：

删除：永久删除该激活码，删除后无法恢复
复制激活码：复制该激活码到剪贴板
禁用 / 启用：禁用后该激活码将无法使用，用户打开软件时验证会失败；启用后恢复正常

注意：删除激活码是不可逆操作，请谨慎使用。如果只是想暂时阻止某个用户使用，建议使用禁用功能。

刷新列表

点击搜索框右侧的 🔄 按钮可以重新加载激活码列表，获取最新数据。

试用管理

点击底部导航栏的试用管理按钮，进入试用机器码管理页面。

如果你在打包时设置了允许试用次数，用户在未输入激活码的情况下可以试用软件。每台机器的试用次数会被记录。

试用信息

每条试用记录显示以下信息：

机器码标识：用户机器码与 App ID 的组合标识
试用次数：已用试用次数 / 最大试用次数
首次试用时间：该机器第一次试用的时间

删除试用记录

点击删除按钮可以删除某条试用记录。删除后，该机器码的试用次数将被重置，用户可以重新开始试用。

提示：如果某个用户反馈试用次数用完了，你可以在这里删除对应的记录，让用户重新获得试用机会。

用户日志

点击左上角 ☰ 菜单按钮，在侧边栏中选择用户日志，可以查看所有用户的操作日志。

日志信息

每条日志记录包含：

日志标题：操作类型（如激活、验证等）
IP 地址：用户的 IP 地址
信息：日志描述
时间：操作发生的时间
是否为错误：标记该日志是否为错误日志
详细信息：完整的日志数据

搜索日志

在搜索框中输入关键词可以实时过滤日志列表，支持按 IP 地址、日志信息等进行搜索。

手机访问

点击顶部导航栏右侧的 📱 按钮，会弹出当前管理页面的二维码。用手机扫描该二维码即可在手机上访问管理后台，方便在没有电脑时随时管理激活码。

常见问题

生成的激活码在哪里查看？

生成成功后会弹出结果窗口，可以直接复制。之后也可以在激活码管理页面查看所有已生成的激活码。

禁用和删除激活码有什么区别？

禁用是临时操作，可以随时恢复启用；删除是永久操作，删除后激活码无法恢复。如果只是想暂时阻止用户使用，建议使用禁用功能。

用户的激活码过期了怎么办？

你需要为用户生成一个新的激活码。过期的激活码无法续期，用户需要使用新的激活码重新激活。

一个激活码可以在多台电脑上使用吗？

不可以。激活码激活时会绑定用户的机器码，只能在一台机器上使用。如果用户更换了电脑，需要提供新的激活码。

App ID 填错了会怎样？

如果管理后台生成激活码时填写的 App ID 与打包 EXE 时设置的 App ID 不一致，用户激活时会验证失败。请确保两端的 App ID 完全一致。

HTML打包快速配置使用网络验证后台

Tue, 21 Apr 2026 21:19:34 +0800

网络验证通过后台服务器完成用户授权的一种方式。用户输入激活码后，服务器负责验证授权信息，验证通过后软件即可使用。具体流程比较简单, 首先开发者预生成激活码，并提供给用户; 用户输入激活码，连接至服务器验证; 验证通过后激活软件，完成授权。

如果您想了解更多关于网络验证的内容, 可以查看这篇的文章: 网络验证教程

本文介绍如何在HTML打包EXE工具中快速配置接入网络验证功能

下载最新版本

前提条件

在开始之前，请确保：

已购买网络验证服务, 立即购买网络验证
已收到购买成功后返回的后台地址和密钥信息
已安装最新版本的 HTML打包EXE 工具

购买后获取到的信息

网络验证服务购买成功后, 您会收到如下格式的两行信息：

网络验证后台地址: leapeverurl_xxxxxxxx
后台密钥: leapeverkey_xxxxxxxx

请妥善保管这两行信息，它们是你专属的网络验证凭证。同一个账号购买后，后台地址始终相同，续费后原有数据（已生成的激活码等）不会丢失。

配置步骤

第一步：打开网络验证配置页面

在打包工具主界面，点击左侧网络验证标签页，进入网络验证配置页面。勾选上启用一机一码网络验证

第二步：填写后台地址

将收到的 leapeverurl_xxxxxxxx 完整粘贴到网络验证后台地址输入框中。

注意：请完整粘贴整行内容（包括 leapeverurl_ 前缀），不要手动修改。

第三步：填写后台密钥

将收到的 leapeverkey_xxxxxxxx 完整粘贴到后台密钥输入框中。

同样，请完整粘贴整行内容（包括 leapeverkey_ 前缀），不要手动修改。

第四步：验证配置

点击打开网络验证管理后台按钮，如果配置正确，会直接打开你的专属管理后台页面，无需等待网络请求。

配置正确后，你可以在管理后台中生成、管理激活码。

第五步：设置 APP ID, 使用次数, 弹窗信息

可以设置一个 APP ID 用于区分不同的软件，例如 myapp1。不同的软件建议使用不同的 APP ID。允许试用次数和激活弹窗信息可以根据需求进行填写

第六步：打包

返回首页，点击打包按钮，即可生成带有网络验证功能的 EXE 文件。

生成激活码

第一步：打开管理后台

在网络验证配置页面，点击打开网络验证管理后台按钮。

第二步：生成激活码

在管理后台中，输入打包时使用的 APP ID，设置激活码参数（有效期、绑定次数等），点击生成激活码按钮。

第三步：分发激活码

将生成的激活码发送给你的用户，用户在打开软件时输入激活码即可完成激活。

用户激活流程

用户首次打开带有网络验证的 EXE 软件，会弹出激活窗口
用户输入收到的激活码
软件连接后台验证激活码并绑定当前机器
验证通过后软件正常运行

续费说明

网络验证服务到期后，已激活的用户不受影响，可以继续正常使用软件
到期后将无法通过管理后台生成新的激活码、管理激活码
续费后使用相同账号购买即可，原有数据自动恢复，无需重新配置

常见问题

后台地址和密钥可以分享给别人吗？

可以分享, 但不建议。后台地址和密钥是你专属的管理凭证，分享后他人可以管理你的全部激活码。

填写后点击打开管理后台没有反应？

请检查是否完整粘贴了后台地址和密钥，包括 leapeverurl_ 和 leapeverkey_ 前缀部分。如果手动修改了内容，可能导致解析失败。

可以在多台电脑上使用同一组后台地址和密钥吗？

可以。后台地址和密钥与你的账号绑定，可以在不同的电脑上使用同一组凭证进行打包和管理。

更换电脑后需要重新购买吗？

不需要。只需将后台地址和密钥复制到新电脑的打包工具中即可。

HTML打包EXE工具自定义菜单功能详解 - 为打包程序添加个性化菜单栏

Mon, 20 Apr 2026 20:47:16 +0800

HTML打包EXE工具提供了自定义菜单功能，能够为打包生成的EXE程序添加个性化的菜单栏。通过这一功能，您可以在程序窗口顶部添加自定义菜单，引导用户访问帮助文档、官方网站，或显示软件版本、联系方式等提示信息。

下载最新版本

什么是自定义菜单功能？

默认情况下，HTML打包EXE工具生成的EXE程序没有菜单栏。对于一些需要提供帮助入口、版本信息或其他快捷链接的应用场景，自定义菜单功能可以满足这一需求。

自定义菜单功能开启后，打包生成的EXE程序窗口顶部会显示一个菜单栏，您可以：

配置项	说明
菜单数量	最多可配置 3个顶级菜单
子项数量	每个菜单最多可配置 3个子项
链接类型	点击后在系统浏览器中打开指定网址
提示信息类型	点击后弹出提示框显示自定义信息

自定义菜单让您的打包程序更加专业，用户可以方便地获取帮助或了解软件信息。

功能入口

在打包工具主界面切换到高级配置标签页，找到自定义菜单选项：

自定义菜单：勾选后启用自定义菜单功能
配置菜单：点击按钮打开菜单配置对话框

注意：自定义菜单功能仅Chrome内核支持，使用IE内核或其他内核时该选项可能不生效。

配置菜单

点击配置菜单按钮后，会弹出菜单配置对话框：

配置项说明

配置项	说明
菜单名称	显示在菜单栏上的文字，例如"帮助"、"关于"等
子项标签	菜单展开后显示的选项文字，例如"查看文档"、"访问官网"等
子项类型	链接：点击后打开网址；提示：点击后弹出提示框
子项值	链接类型填写网址（需以http或https开头）；提示类型填写要显示的提示信息

配置步骤

第一步：勾选启用自定义菜单

在高级配置标签页中，勾选自定义菜单复选框。

第二步：点击配置菜单按钮

点击配置菜单按钮，打开菜单配置对话框。

第三步：填写菜单信息

菜单名称：填写菜单在菜单栏上显示的名称，例如"帮助"
添加子项：点击"添加子项"按钮添加菜单项
子项标签：填写菜单项显示的文字，例如"查看帮助文档"
选择类型：选择"链接"或"提示"
填写值：

链接类型：填写网址，例如 https://leapever.com
提示类型：填写提示信息，例如"版本 1.0.0"

第四步：添加更多菜单（可选）

如需添加更多菜单，点击对话框底部的添加菜单按钮，最多可添加3个菜单。

第五步：保存配置

配置完成后点击保存按钮保存菜单配置。

使用示例

示例一：帮助菜单

为软件添加一个"帮助"菜单，包含文档链接和版本信息：

菜单名称	子项标签	类型	值
帮助	查看帮助文档	链接	https://leapever.com/intro/html2exe/docs/intro
	访问官网	链接	https://leapever.com
	关于软件	提示	我的软件 v1.0.0 版权所有

示例二：联系方式菜单

为软件添加一个"联系我们"菜单：

菜单名称	子项标签	类型	值
联系我们	技术支持	链接	https://leapever.com
	反馈建议	链接	https://leapever.com
	联系方式	提示	Email: xxx

运行效果

打包完成后运行EXE，菜单栏会显示在窗口顶部：

点击菜单名称会展开显示所有子项
点击链接类型的子项会在系统默认浏览器中打开对应网址
点击提示类型的子项会弹出对话框显示提示信息

使用注意事项

菜单名称必填：如果菜单有子项但没有填写菜单名称，该菜单不会生效
子项标签和值必须同时填写：如果只填写标签或只填写值，该子项不会生效
链接必须以http/https开头：链接类型的子项值必须是完整的网址
最多3个菜单：每个打包项目最多可配置3个顶级菜单
每个菜单最多3个子项：每个菜单最多可添加3个子项
仅Chrome内核完整支持：使用Chrome内核打包时自定义菜单功能最为完善

适用场景

自定义菜单功能特别适合以下场景：

软件帮助入口：为用户提供快速访问帮助文档的途径
品牌宣传：添加官网链接，方便用户了解更多产品
版本信息展示：通过提示类型显示软件版本、版权信息等
技术支持入口：添加技术支持、反馈渠道等链接
商业软件：为付费软件添加授权信息、续费链接等

与其他功能配合使用

自定义菜单功能可以与以下功能配合使用，打造更专业的桌面应用：

数据加密功能：保护前端源码
版权设置：设置软件版本、公司信息等
标签页模式：支持多标签页浏览
窗口模式设置：控制新窗口打开方式

HTML一键打包EXE工具 API 完整参考（窗口、存储、文件、串口等）

Sun, 19 Apr 2026 11:21:16 +0800

API 参考

提示: 在使用HTML一键打包EXE工具提供的API之前, 您需要在打包时的高级配置页面勾选上开启API支持, 如下图所示:

:::

机器码API

机器码API可以用于实现自己的认证逻辑

window.HTMLPackHelper.machineCode;

窗口控制API

最大化窗口

window.HTMLPackHelper.maximize();

最小化窗口

window.HTMLPackHelper.minimize();

恢复窗口大小

window.HTMLPackHelper.restore();

关闭应用

window.HTMLPackHelper.close();

切换全屏状态API

window.HTMLPackHelper.toggleFullscreen();

返回主页API

window.HTMLPackHelper.backToHomePage();

打开运行本地文件API

window.HTMLPackHelper.open(path);

其中path为本地文件路径,支持相对路径和绝对路径

例如:

window.HTMLPackHelper.open('C:/Windows/notepad.exe'); //打开记事本
window.HTMLPackHelper.open('my.docx'); //打开exe所在目录的my.docx文件

打开调试窗口

window.HTMLPackHelper.openDebug();

本地存储API

获取当前存储数据的大小(单位字节)

window.HTMLPackHelper.getStorageSize();

获取数据

window.HTMLPackHelper.get(key); // key为字符串

写入数据

window.HTMLPackHelper.set(key, value); //key为字符串,value为要保存的字符串的值

清除所有数据

window.HTMLPackHelper.clear();

获取剪切板字符串API

window.HTMLPackHelper.getClipboardString(); //返回剪切板的字符串

闪烁窗口API:

开始闪烁：

window.HTMLPackHelper.flashWindow();

停止闪烁：

window.HTMLPackHelper.stopFlashWindow();

清理缓存API:

window.HTMLPackHelper.clearAllCache();

关闭计算机API

window.HTMLPackHelper.shutdownSystem(); // 调用后可以关闭电脑

获取唯一机器码:

window.HTMLPackHelper.getUniqueMachineCode(); //调用后可获取唯一机器码，相比机器码API更加稳定

浏览器打开网址API：

window.HTMLPackHelper.openUrlInBrowser('https://cn.bing.com');

退出回调API:

window.HTMLPackHelper.onQuit = () => {
    // 你的业务逻辑
    // return false: 处理完成后不关闭程序
    // return true: 处理完成后关闭程序
    return false;
};

获取Mac地址API:

打包的时候勾选启用API, 然后在HTML页面里，即可获取电脑的Mac地址信息：

// 返回结果类似 0b:00:28:00:00:0c
window.HTMLPackHelper.getMac();

串口通信API:

获取SerialPort类示例代码如下：

const SerialPort = HTMLPackHelper.getSerialPort().SerialPort;

详细使用说明可以参考如下文档：

SerialPort Usage | Node SerialPort

上位机使用JS SerialPort进行串口通信，包含开发环境搭建和完整示例代码 - H5开发技术 - 博客园 (cnblogs.com)

获取命令行参数：

HTMLPackerHelper.getArgv();

返回结果是一个array, 其中第一个值是当前EXE所在的路径，后续的值即为打开EXE所使用的命令行参数，如下图所示

读写文件api

// 获取用户目录下的dd.ini文件, 如果不存在则会抛出异常

const content = HTMLPackHelper.getFileContent('dd.ini');

// 获取用户目录下的dd.ini文件, 如果不存在则会返回default

const content = HTMLPackHelper.getFileContent('dd.ini', 'default');

// 向用户目录的dd.ini文件写入"ddd"

HTMLPackHelper.writeFileContent('dd.ini', 'ddd');

获取版本号API

获取打包时配置的应用版本号，可用于在页面中展示当前软件版本、做版本比较或版本提示、自动更新等场景。

// 返回打包时配置的版本号字符串，如 "1.2.0.0"，未配置时默认返回 "1.0.0.0"
const version = window.HTMLPackHelper.getVersion();

设置请求头API

用于在发起网络请求时动态添加自定义 HTTP 请求头，常见使用场景包括：携带身份认证 Token、设置自定义来源标识、绕过某些需要特定请求头的接口限制等。

设置请求头

// urlPattern 为匹配请求 URL 的字符串或通配符模式
// headers 为包含请求头键值对的对象
window.HTMLPackHelper.setRequestHeaders('https://api.example.com/*', {
    Authorization: 'Bearer your-token',
    'X-Custom-Header': 'value',
});

移除请求头

// 移除之前为指定 URL 模式设置的自定义请求头
window.HTMLPackHelper.removeRequestHeaders('https://api.example.com/*');

HTML 打包 EXE 工具数据加密功能详解

Sat, 18 Apr 2026 20:43:11 +0800

本文详细说明 HTML 打包 EXE 工具的数据加密功能，介绍本地项目与远程项目两种使用方式、加密工具的操作流程、注意事项及适用场景，帮助开发者在打包时保护 HTML/JS/CSS/JSON/XML 等前端资源不被直接查看。

概述

HTML 打包 EXE 工具提供“数据加密”功能，可对前端文本资源（.html/.htm、.js、.css、.json、.xml）进行加密保护，防止通过解压 EXE 或抓包等方式直接获取明文源码。启用后，EXE 运行时会自动解密并加载资源，运行体验与未加密版本保持一致，但直接打开文件时无法看到原始内容。

下载最新版本：

点击进入 HTML 一键打包 EXE 软件下载页面：https://leapever.com/intro/html2exe/

数据加密支持的文件类型

加密功能会处理以下文本文件类型：

文件类型	说明
`.html` / `.htm`	页面结构文件
`.js`	JavaScript 脚本
`.css`	样式文件
`.json`	配置或数据文件
`.xml`	数据或配置文件

注意：图片、字体、视频等二进制资源不在加密范围内。

功能入口与设置项

在工具主界面切换到“加密设置”标签页，可配置以下选项：

使用数据加密：勾选后启用数据加密功能
加密密钥：可自定义密钥，不填写则使用内置公共密钥（建议在正式项目中自定义密钥）
加密数据工具：独立工具，用于对远程项目资源进行预加密

提示：数据加密功能仅在 Chrome 内核下生效，IE 内核或其他内核时该选项不生效。

两种使用方式

根据项目资源的位置不同，使用方式分为本地项目与远程项目两类。

方式一：本地项目 — 勾选即可

当主页面路径为本地文件路径时，启用加密非常简单：

在快速打包页面填写项目路径和图标
切换到“加密设置”标签页，勾选“使用数据加密”
（可选）填写自定义加密密钥，建议设置私有密钥而非使用默认公共密钥
回到快速打包页面，点击“打包”按钮

工具会在打包过程中自动对项目内的 HTML/JS/CSS/JSON/XML 文件进行加密并打包到 EXE 中，无需额外操作。

方式二：远程项目 — 使用加密数据工具

当主页面路径为 http/https 开头的远程 URL 时，打包工具在打包阶段无法直接访问服务器端资源来加密，此时需使用“加密数据工具”对将部署到服务器的资源预先加密，然后再将加密后的资源上传到服务器。

操作步骤：

准备要上传的资源目录：将前端资源整理到本地文件夹，确保该目录为完整的部署内容
在“加密设置”页面勾选“使用数据加密”，并在“加密密钥”中填写一个密钥（示例：mySecretKey2026）。该密钥必须与后续打包时 EXE 使用的密钥一致
点击“加密数据工具”按钮，选择第一步准备好的资源目录

确认加密：工具会列出将要加密的文件类型（.html、.htm、.js、.css、.json、.xml），确认后开始加密。加密前工具会在目录中生成一个 html2exe-backup-时间戳.zip 备份文件，以便恢复原始文件
上传加密后的资源到服务器（不需要上传备份 zip）；若直接通过浏览器访问已加密的服务器端 HTML，会显示为加密乱码

在快速打包页面将项目路径填写为远程 URL（例如 https://example.com/index.html），确保“使用数据加密”已勾选且密钥与加密工具时填写的一致，点击“打包”生成 EXE。生成的 EXE 在访问远程资源时会使用相同密钥解密加载。

使用注意事项

密钥必须一致：远程项目场景下，在线资源已加密时，加密工具使用的密钥必须与打包 EXE 时填写的密钥完全相同，否则 EXE 无法解密并加载资源
仅 Chrome 内核支持：数据加密功能仅在 Chrome 内核下生效，IE 内核或其他内核打包时勾选不生效
敏感目录限制：加密工具不允许对桌面、我的文档、下载、用户主目录、磁盘根目录等系统敏感目录直接进行加密，防止误操作影响系统
自动备份：每次使用加密工具会生成 html2exe-backup-时间戳.zip 备份，请妥善保存以便恢复或修改源码后重新加密
不加密二进制资源：图片、字体、视频等二进制资源不在加密范围内
建议使用自定义密钥：内置公共密钥仅供测试，正式环境建议使用仅己方掌握的密钥

本地与远程方式对比

对比项	本地项目	远程项目
操作复杂度	勾选即可，一步完成	需先用加密工具处理，再上传服务器
资源位置	打包进 EXE 内部	部署在 Web 服务器
修改源码后的处理	直接修改源码后重新打包	修改后需用加密工具重新加密并上传
备份 zip	无需	加密工具会自动生成备份，请保留
密钥一致性要求	工具内处理	加密工具与 EXE 必须使用相同密钥

适用场景

防止 HTML/JS 源码被直接查看，适合对前端逻辑有保密要求的商业项目
与代码混淆配合使用，在混淆基础上再加一层加密以提高破解成本
付费课程、电子书类项目，防止用户轻易提取内容
内部管理系统中对业务逻辑和页面结构需要一定保护的企业应用

参考链接

HTML 一键打包 EXE 下载页：https://leapever.com/intro/html2exe/
HTML 打包 EXE 工具标签页模式详解： https://leapever.com/tutorial/html2exe-tab-mode-guide
静态密码使用说明： https://leapever.com/intro/html2exe/docs/static-password
离线一机一码使用教程： https://leapever.com/intro/html2exe/docs/html2exe-encrypt-tutorial
网络验证使用说明： https://leapever.com/intro/html2exe/docs/network-validation

YLong软件

HTML打包EXE使用附件功能调用外部程序扩展你的EXE - 附实战演练实现录频功能

下载最新版本

功能入口

附件管理对话框

附件文件的存放位置

实战演示：集成 ScreenToGif 截图录屏工具

关于 ScreenToGif

第一步：准备HTML文件

第二步：打包配置

第三步：运行效果

open API 说明

路径规则

前置条件

不仅可以打开EXE

注意事项

相关阅读

HTML打包EXE安装包配置教程 - 自定义安装目录和桌面快捷方式名

下载最新版本

配置位置

默认安装目录

桌面快捷方式名

使用建议

相关阅读

HTML打包/EXE加密的一机一码网络验证常见问题汇总

下载最新版本

一机一码机制

Q：网络验证的「一机一码」是什么意思？

Q：用户换了电脑，之前的激活码还能用吗？

Q：用户重装系统后，激活码还有效吗？

Q：一个激活码可以在多台电脑上使用吗？

激活码管理

Q：如何批量生成激活码？

Q：激活码可以设置有效期吗？

Q：激活码过期了怎么办？

Q：如何禁用某个用户的激活码？

Q：删除和禁用激活码有什么区别？

配置与打包

Q：App ID 有什么作用？怎么设置？

Q：App ID 填错了会怎样？

Q：后台地址和密钥填写后，点击打开管理后台没反应？

Q：可以在多台电脑上使用同一组后台地址和密钥吗？

用户激活相关

Q：用户激活时提示失败是什么原因？

Q：用户激活时需要联网吗？

Q：用户每次打开软件都需要联网验证吗？

Q：可以设置允许试用吗？

后台部署与共用

Q：网络验证后台可以同时给 HTML打包EXE 和 EXE一机一码加密大师 使用吗？

Q：两款软件共用后台时，激活码是通用的吗？

Q：购买网络验证服务后需要自己部署服务器吗？

Q：可以部署自己的网络验证服务器吗？

续费与费用

Q：网络验证服务到期后，已激活的用户会受影响吗？

Q：续费后数据会丢失吗？

Q：网络验证和离线一机一码哪个更适合我？

安全性

Q：后台地址和密钥可以分享给别人吗？

Q：激活码被泄露了怎么办？

Q：用户可以通过修改系统时间来绕过有效期吗？

相关阅读

HTML打包EXE透明窗口教程 - 打造炫酷无边框透明桌面应用

下载最新版本

实现原理

打包工具配置

设置透明背景

实现窗口拖动

关键规则

自定义关闭/最小化按钮

完整示例：赛博朋克桌面时钟

打包配置要点

效果预览

进阶技巧

1. 只让部分区域可拖动

2. 半透明磨砂背景

3. 异形窗口效果

4. 窗口阴影效果

注意事项

相关阅读

HTML打包EXE工具启动图设置 - 为打包程序添加启动画面

Q：网络验证后台可以同时给 HTML打包EXE 和 EXE一机一码加密大师使用吗？