H2E Studio 用户手册

欢迎使用 H2E Studio。这是一款专为 Web 开发者打造的生产力工具，旨在将 HTML5 项目（Vue/React/Krpano/Cocos等）一键封装为高性能的 Windows 桌面程序。

💡 核心特性： 既然选择了 H2E，您就拥有了 3MB 的极致体积、1.5GB 的大文件吞吐能力以及银行级的离线授权保护系统。

主要功能

1. 支持打包成 Win32 / Win64 程序
2. 主图标自定义 (png, jpg, bmp, ico)
3. 版本信息自定义
4. 启动界面 (Splash Screen) 自定义
5. 支持商业授权保护
6. 支持软件在线升级
7. 内置安装盘制作工具
8. 内置图片转图标 (Image2Ico) 工具
9. 支持老板键 (Boss Key)
10. 多种软件皮肤可选
11. 支持超大本地文件 (1.5GB+)
12. 文件选择支持鼠标拖放

13. 支持预览功能（所见即所得）

特别说明：通过预览功能，您可以极大提高开发效率，无需每次修改都重新打包。无论是“在线网址”还是“本地 HTML 文件”，都支持一键实时预览效果。

1. 安装与运行环境

软件安装

H2E Studio 采用绿色免安装设计，程序大小20M+。下载压缩包后，请解压到任意文件夹（建议 D:\H2E_Studio\），直接双击 H2E_Studio.exe 即可运行。

系统要求

操作系统： Windows 10 (1809+) 或 Windows 11。 (*暂不支持 Win7)
运行依赖： 必须安装 WebView2 Runtime。

注：Win10/11 系统通常已内置 WebView2。如果软件启动报错，请前往微软官网下载安装。

2. 快速入门 (Hello World)

只需 2 步，即可生成您的第一个 EXE 程序：

配置基本信息

选择【基础参数】入口设置中的 WEB 网址，然后输入 https://www.baidu.com

一键构建

点击程序顶部工具栏中的构建按键，等待约 6-9 秒（系统会显示模拟进度条），打包完成并显示打包结果窗体

3. 高级场景设置

场景 1：如何打包本地 web 文件?

选择【基础参数】入口设置中的 WEB 文件；
点击后面的黄色文件夹图标按键选择 index.html 文件，或者直接从 Windows 文件夹中拖动 index.html 文件到此窗体；
点击【构建】按键进行构建。

⚠️ 关于打包耗时的重要提示

打包时间依据本地文件大小有所不同。
文件越大，时间越长。一般从几秒到几分钟内即可完成。
如果是特大文件（比如 1.5G+），就可能需要长达 30 分钟。
请耐心等待（虽然进度条可能长时间静止，但程序没有死机，正在后台全力运算中），一定会打包成功！

场景 2：如何进行打包前预览?

可以选择网址或者是 本地文件（具体选择方法请参见“场景 1”）；
然后按下【预览】按键（紧邻【构建】按键的左边）。

场景 3：如何新建、保存、打开项目文件？

由于打包涉及的参数较多，为了方便您下次直接修改或重复使用，建议将设置好的参数保存为项目文件。软件顶部工具栏提供了以下功能：

新建项目：点击此按钮，所有参数将立即恢复为系统默认的初始状态。
打开项目：选择并加载电脑中已保存的项目文件 (.h2e)。
保存项目：将当前配置保存到已打开的文件中。
另存为：将当前配置保存为一个新的项目文件。

场景 4：如何配置打包程序的商业授权？

1. 什么是商业授权？

商业授权是 H2E Studio 专业版 的核心增值功能。它允许您为打包后的 EXE 程序添加“安全锁”，用户必须获得合法的授权文件才能运行。系统支持两种限制模式：

时间限制设定截止日期（如：试用期 3 天，或订阅制 1 年），过期自动失效。
次数限制设定允许运行的总次数（如：仅允许运行 10 次），用完即止。

2. 如何开启授权保护（打包阶段）？

在点击构建按钮之前，请务必进行以下设置：

进入 【商业授权 *】 参数页签。
关键步骤： 必须勾选 “需要商业授权” 选项（这是总开关）。
选择授权模式（时间或次数），并填入用户用的机器码。
构建成功后，在 EXE 同级目录下会自动生成一个 license 文件夹，其中包含初始的授权文件 Auth_机器码.lic。

3. 用户端体验（运行阶段）

当用户打开有设置‘安全锁’的程序时，系统会立即拦截并弹出 “授权验证窗口”。

用户需点击导入按钮，选择您分发给他的 .lic 文件。
验证通过后程序方可启动，并严格按照设定规则运行（到期或次数耗尽后将自动锁定）。

4. 如何发放新证书或续期（无需重新打包）

当有新客户购买授权，或老客户需要续费时，您不需要重新打包程序，只需生成新的证书：

点击顶部菜单 【工具】 -> 【创建商业授权】。
核心参数： 准确录入客户提供的 机器码 和 程序名称（注意：程序名称必须与当初打包时的名称完全一致，否则验证失败）。
设定新的时间或次数，点击生成。
系统将生成一个新的 Auth_xxxx.lic 文件，发送给客户重新导入即可完成续期。

场景 5：如何设置打包程序支持在线升级功能？

1. 什么是在线升级？

在线升级是指程序运行后自动检测服务器上的新版本，并提示用户更新的功能。

原理： 您只需将新版程序文件放置在服务器指定路径。
流程： 用户打开软件 → 软件静默检查更新 → 发现新版本 → 弹出提示框 → 用户点击“立即升级” → 自动下载并覆盖旧版 → 重启运行。

2. 如何设置在线升级（打包阶段）？

在点击主界面【构建】按钮之前，请务必进行以下设置：

进入 【升级设置】 参数页签。
关键步骤： 必须勾选 “支持在线升级” 选项（这是总开关）。
填写 升级地址（服务器存放更新文件的 URL 目录）和 升级说明（更新日志）。
构建结果： 构建成功后，在输出目录的 update 文件夹下，会自动生成一个以版本号命名（如 1.0.0.0）的子文件夹，内含 3 个核心文件：
- NewVersion.txt：包含版本号和校验信息的配置文件。
- WhatsNew.txt：显示给用户的更新说明文本。
- xxx.exe_New：实际的新版程序文件（已重命名）。
部署： 将这 3 个文件上传到您填写的 升级地址 对应的服务器目录中即可。

3. 后续发布新版本（无需重新配置项目）

当您开发完新版本的 EXE 程序（例如从 v1.0 升级到 v2.0）需要发布时，无需在主界面重新构建，只需使用内置工具生成升级包：

点击顶部菜单 【工具】 -> 【创建升级文件】。
核心参数： 选择您的 新版 EXE 文件，确认 升级地址 和 升级说明 无误。
点击生成，系统会再次生成上述 3 个升级文件。
将它们上传覆盖到服务器，用户打开旧版软件时即可收到推送。

场景 6：如何设置老板键 (Boss Key)？

“老板键”是职场摸鱼或保护隐私的神器。设置后，您只需按下特定快捷键，程序窗口和任务栏图标会瞬间消失（完全隐身）；再次按下组合键，程序即刻恢复显示。

设置步骤：

进入 【其他参数】 页签。
找到 “全局热键定义” 输入框，用鼠标点击一下使其处于输入状态。
录入热键： 直接在键盘上按下您想要的组合键（例如：Ctrl + 0 或 F12），系统会自动捕获并显示在框中。
⚠️ 如何清除/取消？ 如果您不再需要老板键，请确保输入框处于焦点状态，然后单独按下 Shift 键即可清空当前设置。

场景 7：如何生成安装文件 (Setup)？

1. 什么是安装文件 (Setup)？

H2E Studio 默认生成的是绿色免安装的独立 EXE 程序（单文件，双击即用）。
但在某些正式发布场景下（例如需要自动安装到 Program Files 目录、自动创建桌面快捷方式、或包含卸载程序），您需要制作一个标准的 Setup 安装包。

2. 方式一：打包时同步生成（推荐）

在主界面构建程序时，您可以直接生成安装包：

进入 【高级参数】 页签。
找到并勾选 “安装模式(Setup) *” 选项。
点击构建。系统在生成绿色版 EXE 的同时，会额外生成一个名为 Setup_xxx.exe 的安装程序。

3. 方式二：为现有 EXE 制作安装包

如果您已经有一个打包好的 EXE 文件，只想单独为它做一个安装壳：

点击顶部菜单 【工具】 -> 【创建安装文件】。
选择文件： 导入您之前打包好的 EXE 程序。
品牌植入： 设置安装界面的左下角标签（Label 标题）和点击跳转链接（Label 链接）。
点击生成，即可获得安装包。

场景 8：如何使用 API？

1. 什么是 API 支持？

通常情况下，HTML/JS 运行在浏览器的沙箱环境中，无法直接操作操作系统（如关机、重启等）。
H2E Studio 提供的 API 支持功能，通过底层的 COM 接口为您搭建了一座桥梁，让您可以像调用普通 JS 函数一样，直接调用这些系统级功能。

2. 如何开通 API 支持？

API 功能默认关闭。在构建程序前，请务必执行以下操作：

进入 【高级参数】 页签。
勾选 “API 支持” 选项。
点击构建生成的程序即具备 API 调用能力。

3. 提供的 API 列表与使用示例

目前支持以下核心功能，统一通过 chrome.webview.hostObjects.Demo 对象调用：

a. 退出程序： CloseProgram()

b. 关闭电脑： PowerOff()

c. 注销用户： LogOff()

d. 重启电脑： Reboot()

e. 打印 PDF： Page_printToPDF(url)

f. 全屏截图： Page_captureScreenshot(url)

完整 HTML 示例代码：（您可以直接复制保存为 html 文件进行测试）

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API 控制面板示例</title>
    <style>
        body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f0f0; }
        .button { background-color: #4CAF50; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 10px; cursor: pointer; border-radius: 5px; transition: background-color 0.3s; }
        .button:hover { background-color: #45a049; }
    </style>
    <script>
        // 核心：调用 H2E 底层提供的 COM 接口
        async function closeProgram() {
            await chrome.webview.hostObjects.Demo.CloseProgram();
        }
        async function powerOff() {
            await chrome.webview.hostObjects.Demo.PowerOff();
        }
        async function logOff() {
            await chrome.webview.hostObjects.Demo.LogOff();
        }
        async function reboot() {
            await chrome.webview.hostObjects.Demo.Reboot();
        }
        async function Page_printToPDF(Uri) {
            // 传入当前页面 URL 或指定 URL
            await chrome.webview.hostObjects.Demo.Page_printToPDF(Uri);
        }
        async function Page_captureScreenshot(Uri) {
            await chrome.webview.hostObjects.Demo.Page_captureScreenshot(Uri);
        }
    </script>
</head>
<body>
    <div>
        <button class="button" onclick="closeProgram()">退出程序</button>
        <button class="button" onclick="powerOff()">关闭电脑</button>
        <button class="button" onclick="logOff()">注销</button>
        <button class="button" onclick="reboot()">重启电脑</button>
        <button class="button" onclick="Page_printToPDF(window.location.href)">打印PDF</button>
        <button class="button" onclick="Page_captureScreenshot(window.location.href)">截屏（全部）</button>
    </div>
</body>
</html>

场景 9：打包好的程序在哪里？

1. 设置程序文件名称

打包后的 EXE 名字是在 【基础参数】 页签中的 “程序名称” 一栏定义的。

系统默认名称为 H2E_Demo.exe。
您可以随时修改它（例如改为 MyApp.exe）。
* 注意：此处仅定义文件名，不包含存放路径。

2. 设置文件保存路径（结果目录）

程序默认保存在软件根目录下的 Packed_File 文件夹中。如果您想修改保存位置：

点击系统顶部工具栏右侧的 “小齿轮图标”（参数设置）。
修改 “结果目录” 选项，选择您希望保存的任意磁盘路径即可。

3. 快速打开输出目录

无需在资源管理器中一层层寻找，软件提供了快捷入口：

直接点击顶部工具栏的 【打包结果文件夹】 图标按钮（位于【预览】按钮的左侧）。
系统会自动弹出文件夹窗口，并定位到刚刚生成的 EXE 文件。

场景 10：如何定制专属的启动封面 (Splash)？

1. 什么是 Splash 启动封面？

Splash 界面是应用程序启动时（在主窗口出现前）短暂显示的加载画面。
设计精美的启动页不仅能缓解用户的等待焦虑，更是展示您软件品牌形象的第一窗口。

2. 免费版与专业版的区别

免费版： 强制显示 H2E Studio 官方的宣传封面（包含功能介绍），无法修改或隐藏。
专业版： 拥有完全控制权。您可以将其替换为自己的品牌图片，或者彻底关闭它以实现“秒开”效果。

3. 如何自定义 Splash 界面（专业版）？

进入 【启动界面】 参数页签，您可以进行如下设置：

开关控制： 勾选 “包含 Splash 界面” 选项即可开启。如果不勾选，程序启动时将没有任何过渡画面（直接进入主程序）。
视觉定制：
- 背景图片： 选择您的自定义图片（支持 png/jpg/bmp）。
- 顶部标题： 定义显示在封面顶部的文字（如软件名称）。
- 底部描述： 定义显示在封面底部的文字（如版权信息或 Loading 提示）。

场景 11：如何配置 H2E Studio 系统参数？

1. 如何进入设置界面？

点击软件顶部工具栏右侧的 “小齿轮图标 ⚙️”，即可打开【系统参数】设置窗口。这里定义的选项将影响 H2E Studio 软件本身的行为和默认打包策略。

2. 外观与语言（界面个性化）

🌐 语言选择： 支持 简体中文（默认）和 English。切换后界面语言即时生效。
🎨 皮肤选择： 厌倦了千篇一律的界面？您可以自由更换软件的主题皮肤。
可选列表：Windows (默认), Sky, Silver, Cyan Night (深色模式), Carbon, Iceberg Classico

3. 运行行为控制

📝 记录日志： （默认勾选）
开启后，软件会在运行目录下自动生成 log 文件夹，并按日期记录运行状态。
* 建议保持开启，当软件出现报错或异常时，日志文件是排查问题的关键依据。
🔒 单实例运行： （默认勾选）
限制同时只能运行一个 H2E Studio 窗口。
* 作用：防止多次打开软件导致的项目文件占用冲突或资源浪费。

4. 构建优化（重要）

📦 打包后压缩 EXE 文件： （默认勾选）
- 功能： 系统会在打包完成后，自动对生成的 EXE 进行高强度压缩。
- 优势： 能够显著减少文件体积（压缩率通常超过 50%），方便网络传输。
- 注意： 极少数旧版操作系统可能不兼容压缩壳，或者某些杀毒软件对压缩壳较为敏感。如果您的用户反馈程序无法启动，请尝试取消勾选此项重新打包。

4. 授权与激活指南

H2E Studio 采用“一机一码”的离线授权机制。请按照以下 4 个步骤完成激活，解锁所有专业版功能。

选购套餐

在官网首页或软件菜单点击【授权中心】 -> 【购买授权】。
选择适合您的“月度会员”或“永久次卡”套餐，支持微信扫码支付。

提交资料 (关键步骤)

支付成功后，请联系客服（微信），发送 “支付截图” + “您的机器码”。

💡 如何获取机器码？点击软件顶部菜单【授权中心】 -> 【机器码】。
系统会自动将唯一识别码复制到您的剪贴板，直接粘贴发送给客服即可。

导入证书

客服核实无误后，会向您发送一个专属授权文件（文件名格式通常为 License_机器码.lic，例如 License_B3F2A1.lic）。
收到文件后，点击软件菜单【授权中心】 -> 【导入授权文件】，选择该文件即可。

✓

激活成功

导入后软件会提示激活成功。您可以随时在【授权中心】 -> 【查看本机当前授权】中查看剩余时长或剩余次数。

5. 常见问题 (FAQ)

Q1. 如何购买授权？ ▼

方式一：您可以在本网页上方的【购买授权】区域直接选择套餐并扫码支付。
方式二：下载运行软件，在主界面的【授权中心】也可以完成购买。

Q2. 购买后如何激活？ ▼

支付完成后，请联系客服（提供付款截图和软件内的机器码）。客服核实后会向您发送一份 License 授权文件。请在软件【授权中心】菜单中点击“导入授权文件”即可完成激活。

Q3. 如何申请退款？ ▼

我们充分理解您的顾虑。由于软件授权属于虚拟数字化商品，退款政策如下：

发货前：在客服向您发送授权文件之前，您可以随时提出退款申请，已付款项将全额原路退回。
发货后：一旦授权文件已发出，意味着授权码已被您的机器占用且无法回收，很抱歉我们将无法支持退款。建议您在购买前充分试用免费版确认需求。

Q4. 免费版和专业版有什么区别？ ▼

1. 界面水印

免费版：右上角强制显示官方悬浮图标（可拖动，不可隐藏）。

专业版：完全去除水印，界面整洁清爽。

2. 右键与系统菜单

免费版：包含官方“关于”链接。

专业版：支持完全自定义或隐藏，展示您的品牌信息。

3. 启动封面 (Splash)

免费版：启动时强制显示官方封面。

专业版：可替换为您的图片，或完全关闭以实现秒开。

4. 商业授权管理

免费版：不支持。

专业版：内置商业保护系统（支持机器码绑定、时间/次数限制）。

Q5. 购买“次卡”后，如果我更新了网页内容，需要重新扣次数吗？ ▼

需要。但请注意：构建扣次，预览免费！

关于扣费：每次点击【构建】按键并成功生成 EXE 文件，系统会计为 1 次。
关于免费：点击【预览】按键是完全免费且无限次的。

💡 省钱秘籍： 由于内置的预览引擎与最终打包内核完全一致（所见即所得），建议您在修改调试阶段多次使用“预览”确认效果。直到确认无误后，再点击“构建”进行最后交付。这样可以最大化利用您的次卡。

Q6. 支持 Windows 7 系统吗？ ▼

不再支持。为了确保生成的 EXE 拥有最佳的安全性和对现代 Web 标准的完美兼容，H2E Studio 采用了微软最新版 WebView2 内核。我们仅支持 Windows 10 及以上系统。

Q7. 生成的 EXE 会被杀毒软件误报吗？ ▼

H2E Studio 基于微软官方 WebView2 运行时封装，核心代码经过数字签名，极大降低了误报率。但极少数杀软可能会由于启发式扫描产生误报，建议发布时向厂商提交白名单。

Q8. 专业版打包好的程序还有广告和功能限制吗？ ▼

无。专业版生成的 EXE 是完全纯净的，去除了所有启动页广告、右上角水印，且解除了所有属性修改限制。

Q9. 支持类似 Vue 等前端框架吗？ ▼

支持。完美支持 Vue, React, Angular 等所有主流前端框架。H2E Studio 内置现代浏览器内核，对 CSS3/JS 的支持与 Chrome 完全一致。

Q10. 支持打包成 64 位程序吗？ ▼

支持。软件默认生成 32 位程序（兼容性最好）。如需生成 64 位程序，仅需在【高级选项】页签中勾选“Win 64 架构”即可。

Q11. 支持 .png, .jpg 等图片格式作为程序图标吗？ ▼

支持。工具内置了智能转换引擎，会自动将您拖入的 .png/.jpg/.bmp 图片无缝转换为标准的 .ico 图标文件供打包使用。

Q12. 为什么不用 Chrome 内核？WebView2 有什么区别？ ▼

传统 Chrome 内核会导致软件体积臃肿（100MB+）。WebView2 是微软官方推荐方案，它共享系统运行库，实现了 3MB 极致体积与银行级安全性的完美平衡。