Kiosk 应用
大约 3 分钟
Kiosk 应用
1. 什么是 Kiosk（自助终端）应用？
Kiosk 模式是一种应用运行模式： 👉 系统只允许运行“某一个指定的应用”， 👉 用户不能随意切换到桌面、不能打开其他软件、不能退出应用、不能访问系统设置。
你在商场、地铁站、银行看到的自助机 —— 全部是 Kiosk 应用。
核心目标：让设备成为“只运行你的软件的机器”。
2. Kiosk 系统的典型特征
| 功能 | 描述 |
|---|---|
| 锁定单一应用 | 只能使用你的客户端（Java/Vue 打包后的 EXE）。 |
| 禁止切出 | Alt+F4、Ctrl+Esc、Win键、Ctrl+Alt+Del、任务栏等全部无法打开或被拦截。 |
| 全屏运行 | 无边框、无标题栏、全屏沉浸式界面。 |
| 限制误触 | 不允许切屏、不允许点到外部区域。 |
| 自持运行 | 自动启动、自动重启、异常退出自动恢复。 |
| 定时锁屏 | 基于时间的遮罩层 + 二次验证。 |
3.为什么要做成 EXE？
因为 Web 浏览器无法做到 Kiosk 的系统级控制，包括：
- 禁止 Windows 快捷键（浏览器做不到）
- 阻止最小化/切出（浏览器做不到）
- 屏蔽任务栏和 Alt+Tab（浏览器做不到）
- 应用崩溃自动拉起（浏览器做不到）
4. Kiosk 应用的常见技术方案（重点针对你）
✔ 方案 1：用 Electron + Vue 打包成 EXE（强烈推荐）
适合你现阶段 —— Vue 项目成熟、想快速封装成桌面应用。
特点：
- 可打包 Web 前端为 EXE（electron-builder）
- Electron 可以屏蔽快捷键、拦截窗口行为
- 可自定义全屏、禁止退出、屏蔽右键、屏幕保持常亮等
- 可调用 Node.js 与底层交互（如重启设备）
你可以实现：
- 全屏强制模式
- 屏蔽 Alt+F4、Ctrl+Shift+Esc、Win键 等
- 自定义锁屏界面（就是你的遮罩层方案）
- 长按按钮才能退出
Vue 项目无缝迁移： 只需把 dist 放进 Electron，十分钟能跑起来。
✔ 方案 2：Java + JavaFX 打包成 EXE（稳定但界面开发成本大）
如果你想写纯 Java 客户端，也能做。
特点：
- 可完全控制窗口
- 可定制 kiosk 风格的 UI
- 支持本地服务集成（你的后端 Java 服务）
但缺点：
- UI 不如 Vue 好开发
- 迁移成本高（要重写 UI）
✔ 方案 3：前端继续使用 Vue，但通过 CEF 封装成 EXE（轻量 + 强控）
CEF = Chromium Embedded Framework 它会把你的 Vue 前端嵌入到一个原生 EXE 容器中。
可以做到：
- 禁止地址栏、禁用快捷键
- 全屏 kiosk 模式
- 禁止切出
- 提供进程守护
比 Electron 更轻量，但需要 C++/Java 的 CEF 绑定（门槛略高）
5. 你当前需求映射到 Kiosk 解决方案
| 你的需求 | Kiosk 技术如何实现 |
|---|---|
| 防小虫误触 | 前端加“屏蔽点击区域”、加透明 cover 防误触 |
| 转为 EXE | 用 Electron / CEF 打包 |
| 阻止用户切桌面 | 禁用快捷键 + 全屏 + 禁止最小化 |
| 必须点击‘回到桌面的按钮’才退出 | 自定义退出按钮 + 内部判断逻辑 |
| 加定时锁屏 | 前端加遮罩层 + 计时器 |
| 长按按钮 3 秒解锁 | 前端实现长按计时逻辑 |
| 启动数据库、Redis、Nginx、Java 服务 | 可由 EXE 的启动脚本 + Node.js 子进程实现 |
你原来的 .bat 脚本可以完全被 Electron 或 JavaFX 所接管，做到“一键启动所有服务 + 打开主程序”。