如今，越来越多的桌面应用开始采用 Web 化界面设计。这种方法完美结合了 Web 技术的灵活性与原生应用的性能优势及系统集成能力，成为桌面开发的主流趋势。
本文介绍的 Java 桌面应用正是基于这一现代架构：通过 Vue.js 与 Tailwind CSS 构建 Web 界面，实现了跨平台一致、流畅响应且设计精美的用户体验。
Web UI 对比原生 UI
传统桌面应用的原生 UI 工具包长期难以满足现代 UI 需求 —— 要实现精致的视觉效果、流畅的动画过渡、高 DPI 屏幕适配，或是像 Web 应用那样灵活切换主题（亮色 / 暗色模式、自定义配色等），往往需要大量定制开发工作。
另一方面，基于 Web 的用户界面受益于庞大的生态系统，其中包含现成的库、组件框架、响应式设计，以及跨操作系统和设备形态的一致性。
通过在桌面外壳中嵌入 Web UI，我们既能使用现代 Web 风格的界面，又能利用原生应用的能力。纯 Web 应用由于缺乏完全的文件系统访问、OS API 和离线能力，很难完全替代桌面应用；而在原生包装中运行 Web UI 则弥补了这些不足，实现两者的最佳组合。
应用概览
该应用是一款跨平台 Java 桌面应用程序，核心架构是在原生 Java 窗口中集成现代化 Vue.js Web 界面，通过 Shadcn 组件库构建简洁直观的操作界面。
这种架构确保了以下特性：
- 在 Windows、macOS、Linux 上统一的界面呈现。
- 丝滑的交互体验，接近 Web 应用的流畅度。
- 通过打包所有资源实现离线运行，启动即可使用，无需网络连接。
应用启动后会显示主控制面板以及偏好设置窗口，用户可以调整界面主题、字体大小、布局等选项。所有设置都保存在本地文件系统，并在下次启动时自动恢复。
基于 Vue.js 构建 UI 的桌面应用
完整源代码可在 GitHub 获取。
应用窗口与 Web 视图
应用主窗口基于 Java Swing 的 JFrame实现，作为 Java 内置组件，它具备轻量易用的特点。窗口内部嵌入了 JxBrowser 提供的 Chromium 内核 Web 视图组件，能够直接在桌面窗口中渲染 Vue.js 界面，并支持所有现代浏览器特性。
var engine = Engine.newInstance(HARDWARE_ACCELERATED);
var browser = engine.newBrowser();
SwingUtilities.invokeLater(() -> {
var view = BrowserView.newInstance(browser);
var frame = new JFrame("Application");
frame.addWindowListener(new WindowAdapter() {
@Override
public void windowClosing(WindowEvent e) {
engine.close();
}
});
frame.setDefaultCloseOperation(WindowConstants.DISPOSE_ON_CLOSE);
frame.add(view, BorderLayout.CENTER);
frame.setSize(1280, 900);
frame.setLocationRelativeTo(null);
frame.setVisible(true);
});
这套架构分工明确：Java 后端负责核心业务逻辑（数据读写、文件操作等），Vue.js 前端专注于界面布局与用户交互，各司其职且高效协同。
桌面应用中加载 Web UI
Vue.js 部分本质上是一个标准 Web 项目，根据环境的不同，应用会从本地开发服务器或嵌入式静态文件加载它。
开发环境
开发环境的 Web 应用加载流程极为简洁：启动本地开发服务器后，直接访问 localhost 地址即可：
./gradlew desktop-web-app:startDevServer -Pfrontend=vue
if (!AppDetails.isProduction()) {
browser.navigation().loadUrl("http://localhost");
} else {
...
}
应用启动后，嵌入式 Web 视图会导航至本地开发服务器地址。此时修改 Vue 组件或样式，无需重新构建 Java 部分即可实时生效。
生产环境
在生产环境中，桌面应用需要完全离线运行。依赖本地 Web 服务器不仅增加复杂度，也带来潜在安全风险。
从本地或远程服务器提供用户界面会增加额外的安全风险；用户可能会在浏览器中加载 Web 应用程序 URL 并检查应用程序的源代码，从而暴露敏感逻辑。我们当然不希望这种情况发生，我们希望用户界面只能在桌面应用程序内部访问，并且其源代码隐藏在应用程序内部。
为实现这一目标，我们将 Web 应用文件打包至 Java 资源目录，通过 JxBrowser 的自定义协议拦截 API 从类路径中直接加载资源。
首先配置自定义协议与请求拦截器，用于处理 Web 资源请求：
var options = EngineOptions.newBuilder(HARDWARE_ACCELERATED)
.addScheme(Scheme.of("jxb"), new UrlRequestInterceptor());
var engine = Engine.newInstance(options.build());
Vue.js 应用被直接打包到 Java 资源中，通过 JxBrowser 加载，使 UI 部分完全独立封装：
- 所有 HTML、CSS、JavaScript 文件均从应用 JAR 包中读取
- 无需依赖任何外部服务器
- 源代码不会被浏览器开发者工具审查
这种方案确保了应用的高性能、安全性与可移植性，在 Windows、macOS 和 Linux 三大操作系统上均能稳定运行。
Vue.js 与 Java 之间的通信
为了实现应用程序逻辑，Vue.js 前端需要与 Java 后端通信——例如，读取或更新存储在磁盘上的偏好设置。
JxBrowser JavaScript - Java 桥接器
JxBrowser 内置了 JavaScript 与 Java 的直接通信桥，允许 Web UI 直接调用 Java 方法。Vue.js 前端可通过该桥调用后端接口（如 “保存主题设置”），Java 后端也能主动向前端发送事件或数据更新。
以下是如何在 JxBrowser 中声明 JavaScript 和 Java 之间通信的类型：
@JsAccessible
class PrefsService {
void setFontSize(int size) {
}
}
declare class PrefsService {
setFontSize(size: number): void;
}
declare const prefService: PrefsService;
...
prefsService.setFontSize(12);
Protobuf + gRPC
对于简单交互，应用仍可使用现有 REST 接口；而针对更复杂、需要可扩展性的功能，我们引入了 Protocol Buffers（Protobuf）与 gRPC，构建了更快速、类型安全的通信层。
通过 Protobuf 统一定义数据结构与服务 API，可自动为前后端生成强类型客户端 / 服务器代码。只需在 .proto 文件中定义消息格式与服务接口，Protobuf 便会自动生成 Java 与 TypeScript 代码。
service PrefsService {
rpc SetFontSize(FontSize) returns (google.protobuf.Empty);
}
enum FontSize {
SMALL = 0;
DEFAULT = 1;
LARGE = 2;
}
gRPC 作为传输层：Java 后端运行轻量级 gRPC 服务器，Vue.js 应用以客户端身份与之通信，实现结构化数据的安全高效传输。
该方案带来了三大优势：
- 在应用前后端之间实现类型安全。
- 在构建阶段获得自动补全与错误检查能力。
- 当功能或 API 增加时，系统能够更容易扩展。
通信图
总结
采用 Web UI 构建桌面应用已被证明是一种强大的现代开发模式。它既保留了 Web 技术的易用性与生态优势，又具备原生桌面应用的系统集成能力与性能表现。
本文实现的 Java 桌面应用，通过 Vue.js 构建前端界面、Tailwind CSS 处理样式，核心达成了以下目标：
- 将 Chromium 内核 Web 视图嵌入 Java 窗口。
- 实现开发 / 生产环境下的 Vue 资源无缝加载。
- 使用 gRPC 和 Protobuf 实现 Web UI 与 Java 后端之间的通信。
这种混合架构结合了 Java 和 Vue.js 前端，允许开发者在桌面环境中使用标准的 Web 工具，并使应用程序能够作为独立的软件包运行。
发送中。。。
您的个人 JxBrowser 试用密钥和快速入门指南将在几分钟内发送至您的电子邮箱。