如何在现有Web项目中复用Jetpack Compose UI组件？

先给个准信：完全可行 #

你可以通过配置KMP项目的Wasm目标，结合Compose for Web（基于Wasm）把现有Jetpack Compose UI组件打包成独立的Web库，直接嵌入到现有Web项目里。这个方案不需要依赖HTML/CSS，和你现有Compose代码的复用度极高，刚好匹配你的需求——既不用搞Kotlin JS那套逻辑层+HTML/CSS的组合，也不用重新做一个完整的KMP+CMP Web应用。

具体操作步骤 #

1. 给KMP项目加Wasm目标 #

在项目的settings.gradle.kts里启用Wasm支持，然后在模块的build.gradle.kts中配置Wasm目标和Compose for Web依赖：

// settings.gradle.kts
pluginManagement {
    plugins {
        kotlin("multiplatform") version "1.9.20"
        id("org.jetbrains.compose") version "1.5.1"
    }
}

// 模块的build.gradle.kts
kotlin {
    wasmJs {
        moduleName = "my-compose-web-lib"
        browser {
            commonWebpackConfig {
                outputFileName = "compose-ui-lib.js"
            }
        }
        binaries.executable()
    }
    // 保留你原本的Android目标
    android()
}

dependencies {
    // Compose for Web核心依赖
    implementation(compose.web.core)
    implementation(compose.web.dom)
    // 复用你现有的Compose UI依赖（比如material3）
    implementation(compose.material3)
}

2. 把Compose组件暴露给Web调用 #

用@JsExport注解把渲染组件的函数标记为可被JS调用的接口，直接复用你现有的Compose组件：

import androidx.compose.runtime.Composable
import org.jetbrains.compose.web.renderComposable

@JsExport
fun renderMyComposeWidget(containerId: String) {
    val container = document.getElementById(containerId) ?: return
    renderComposable(container) {
        // 直接用你现有的Jetpack Compose组件
        MyExistingComposeButton(onClick = { console.log("按钮被点击了") })
        MyExistingComposeCard(title = "这是复用的Android Compose卡片")
    }
}

3. 编译打包成Web库 #

执行Gradle任务wasmJsBrowserProductionWebpack，编译完成后，在build/wasmJs/productionExecutable目录下会生成compose-ui-lib.js和对应的Wasm文件，这就是你要嵌入到现有Web项目的资源。

4. 嵌入到现有Web项目 #

在现有Web项目的HTML里引入生成的JS文件，然后调用暴露的函数把Compose组件渲染到指定容器：

<!-- 现有Web页面的某个位置 -->
<div id="compose-widget-container"></div>

<script src="compose-ui-lib.js"></script>
<script>
    // 调用Kotlin/Wasm暴露的函数，渲染Compose组件
    renderMyComposeWidget("compose-widget-container");
</script>

成功案例参考 #

• JetBrains官方在Compose for Web的演示中，直接把Android端的Compose组件打包成Wasm库嵌入到静态HTML页面，完全复用了原有的UI代码和逻辑。
• 不少跨端开发团队已经落地这种方案：把Android端成熟的Compose组件库通过KMP Wasm打包，嵌入到React、Vue等现有Web项目中，减少了UI重复开发的工作量，同时保证了多端UI一致性。

要注意的点 #

• 依赖兼容性：大部分核心Compose API（比如@Composable、Modifier、Material3组件）都支持Compose for Web，但Android专属API（比如Context、AndroidView）需要用KMP的expect/actual机制做平台适配，把这些部分抽离到common模块或者单独实现Web端版本。
• 加载性能：首次加载Wasm文件会有几秒的初始化时间，你可以通过Webpack的代码分割、预加载Wasm文件等方式优化用户体验。
• 逻辑复用：如果你的Compose组件绑定了业务逻辑，建议把逻辑部分抽离到KMP的common模块，这样Android和Web端可以共用同一套逻辑，进一步提升复用效率。

内容的提问来源于stack exchange，提问作者Murad Akhmedov