【实用技能】如何将 Web 视图添加到 Compose Multiplatform 应用程序

Compose Multiplatform 是一个用于在桌面、网络和移动设备上创建用户界面的框架。它扩展了 Android 的 Jetpack Compose，并允许您使用熟悉的 API 为 iOS 和桌面开发应用。

JxBrowser 是一个商业 Web 视图组件。它基于 Chromium，也可用于 Swing、JavaFX 和 SWT。

JxBrowser 专为具有关键用例、截止日期和对第三方软件和供应商有高标准的公司而设计。该软件附带由产品工程师直接提供的保密技术支持。保证的首次响应时间 (SLA) 为一个工作日。JxBrowser 使用最新的安全补丁使 Chromium 保持最新状态。

点击下载最新版JxBrowser

WebViews现状

Jetpack Compose 没有 Web 视图组件。相反，开发人员使用 Android 的原生WebView。它是旧版 View 系统的一部分——一种早于 Compose 的 UI 技术。

Compose Multiplatform 也没有 Web 视图组件。相反，开发人员必须依赖平台上可用的组件。或者更准确地说，是多个平台：移动设备上有两个平台，桌面上有三个平台。

在移动设备上一切都很好。Compose Multiplatform 应用可以在 Android 上使用 WebView，WKWebView在 iOS 上使用一个组件。但在传统的台式机上，事情就变得复杂了。

桌面平台也提供原生 Web 视图，但 Compose Multiplatform 中不提供。不过，由于 Compose 可以与 Swing 互操作，理论上还可以与 JavaFX 互操作，因此开发人员可以将 Web 视图组件用于这些经典桌面工具包。这是 2024 年 10 月之前的唯一选择。

2024 年 10 月，JxBrowser发不了8.0.0版本，这是 Compose Multiplatform 的第一个适用于所有桌面平台的 Web 视图组件。这三个平台均适用于 Windows、macOS 和 Linux。JxBrowser 可直接与 Compose 配合使用，并且不使用 Swing 互操作层。

在 Compose 中使用 Web 视图

JxBrowser已经为 JavaFX、Swing 和 SWT 开发了 Web 视图。提供了惯用的 Kotlin API，并且易于添加到现有的桌面应用程序中。以下代码片段展示了如何将 Web 视图添加到 Compose Multiplatform 应用程序：

fun main() {// Create and run the Chromium engine.val engine = Engine(RenderingMode.OFF_SCREEN)val browser = engine.newBrowser()singleWindowApplication(title = "Compose Desktop BrowserView",state = WindowState(width = 800.dp, height = 600.dp),) {// Creating a Compose component for rendering web content// loaded in the given Browser instance.BrowserView(browser)DisposableEffect(Unit) {browser.navigation.loadUrl("https://html5test.teamdev.com")onDispose {// Close the engine when the app window leaves the composition.engine.close()}}}
}

Compose 实际运行的浏览器视图

在上面的代码中，我们创建了Engine和的实例Browser。这些类代表实际的 Chromium 实体：Chromium 主进程和其中一个浏览器。和均不Engine参与Browser组合，但只要创建它们，您就会拥有一个功能齐全的浏览器。您还可以根据需要创建任意数量的引擎和浏览器。要了解有关位置和方式的更多信息，请考虑阅读我们关于 JxBrowser 架构的指南。

要将实际的 Web 视图添加到组合中，您需要BrowserView 为想要在应用程序中显示的浏览器调用可组合函数。

Kotlin-JavaScript 桥梁

任何 Web 视图的主要功能都是从 Kotlin 调用 JavaScript 并返回。在 JxBrowser 中，您可以获取 JavaScript 对象并直接从 Kotlin 代码访问其属性和方法：

val shoppingCart = frame.executeJavaScript<JsObject>("window.shoppingCart")
val items: JsArray = shoppingCart.call("getItems")

其中包括 DOM 节点：

val body = frame.executeJavaScript<Element>("document.body")
val bodyClone = body.call("cloneNode")

类似地，您可以将任何 Kotlin 对象注入 JavaScript 并从页面调用它：

class KotlinObject {@JsAccessiblefun sayHelloTo(firstName: String) = "Hello $firstName!"
}// This callback is executed before the page executes its own scripts. 
browser.register(InjectJsCallback { params ->val window = params.frame().executeJavaScript<JsObject>("window")window?.putProperty("kotlin", KotlinObject())InjectJsCallback.Response.proceed()
})

在 Kotlin 和 JavaScript 世界之间的每次调用中，JxBrowser 都会执行自动类型转换。

JxBrowser 的其他功能

JxBrowser 是获取几乎所有可供 Web 开发人员使用（但桌面 Kotlin 中没有）功能的桥梁。

当您需要生成漂亮的 PDF 文件时，Web 视图是一种常见的选择。当您拥有 HTML 和 CSS 格式的 PDF 文件模板时，您可以在 JxBrowser 中加载它并生成 PDF 文件。

与 Android 类似WebView，JxBrowser 允许您截取浏览器的屏幕截图。使用任何 JRE 提供的实用程序，您可以截取屏幕截图并将其保存为 PNG 图像文件。

在企业环境中，身份验证至关重要。JxBrowser 支持与 Chromium 相同的身份验证协议，并允许您使用 Kerberos、WebAuthn、U2F 和其他身份验证技术。

除此之外，JxBrowser 还提供对网络流量的细粒度控制、高级打印 API、Chrome 扩展程序、专有编解码器支持、代理和许多其他功能。