JetBrains Compose跨平台WebView支持

最新推荐文章于 2025-05-05 21:05:17 发布

KevinnZou

最新推荐文章于 2025-05-05 21:05:17 发布

阅读量1k

点赞数 1

分类专栏： Kotlin Multiplatform 文章标签： android android jetpack kotlin web app ios 前端

本文链接：https://blog.youkuaiyun.com/weixin_51235693/article/details/133277648

版权

文章介绍了如何在JetBrainsCompose的跨平台框架中添加WebView支持，通过自定义库提供跨Android、iOS和桌面的WebView组件，简化了在ComposeMultiPlatform中加载和控制Web页面的过程，提升开发效率和一致性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景

JetBrains Compose跨平台技术则是近两年的新兴技术之一。它借助于Kotlin跨平台的能力，基于Jetpack Compose框架设计，使得开发人员在开发移动应用程序时可以同时适用于多个平台，如Android、iOS、Web和桌面等。它基于统一的代码库和API，使开发人员能够使用相同的代码构建应用程序，而无需为每个平台单独编写和维护不同的UI层。这种跨平台的特性使得开发人员可以更高效地开发和交付跨平台应用，降低了开发成本并提高了开发速度。Jetbrains Compose跨平台的能力为开发人员提供了更大的灵活性和选择，以满足不同平台和设备的需求。

而WebView则是移动开发中的关键组件之一，用于加载和呈现网页、HTML内容以及与基于Web的资源的交互。各个平台都提供了原生的WebView组件来实现Web页面的加载。

然而，在JetBrains Compose跨平台框架中，目前没有直接提供WebView组件。要呈现网页，开发者需要自行使用expect/actual技术在每个平台上提供原生的实现，这将耗费大量的时间和精力。

为了实现在Compose MultiPlatform中轻松地展示Web页面，我开发了一个跨平台WebView组件库，它主要提供了一个WebView视图组件，可以直接在共享模块中使用。因此，开发人员只需要编写一次UI代码，就可以轻松在所有平台上展示Web页面。

项目地址：GitHub - KevinnZou/compose-webview-multiplatform: WebView for JetBrains Compose Multiplatform. Support Android, iOS, and Desktop platforms.

设计思路

这个库的灵感来自于Accompanist的web模块，这是一个专门为扩展Jetpack Compose的实用功能而开发的库。在其web模块中，Accompanist为Jetpack Compose提供了WebView包装器，实现了在Compose中直接展示网页的功能。

然而，由于Accompanist是建立在Jetpack Compose之上的，它只能在Android平台上使用。为了确保跨平台兼容性，我将与平台无关的代码抽离出来放在共享模块中。对于依赖于平台原生能力的功能，我分析了各平台对于该能力的支持力度，梳理通用能力，在跨平台层抽象出共享的API接口，最后在平台层使用expect/actual技术依赖原生能力实现接口，从而实现了跨平台展示Web页面。

在Android端，该库将核心数据加载能力委托给原生AndroidX WebView，并将其封装在AndroidView中，以实现所需的用户交互界面显示。iOS端采用类似的方法，利用原生WKWebView和UIKitView。对于桌面平台，该库利用JavaFx的WebView，并用JFXPanel进行封装。

该库提供的WebView不仅支持基本的链接加载，还支持Html代码的加载和Post数据功能。此外，开发人员可以通过WebViewState访问页面加载进度、标题和链接等信息。最后，该库还提供了WebViewNavigator，允许开发人员控制WebView的导航，包括前进、后退和重新加载等操作。