使用Compose Multiplatform构建HTML应用的入门指南

贡沫苏Truman

于 2025-06-02 09:03:07 发布

阅读量312

点赞数 5

本文链接：https://blog.youkuaiyun.com/gitblog_00215/article/details/148375213

版权

使用Compose Multiplatform构建HTML应用的入门指南

compose-multiplatform JetBrains/compose-multiplatform: 是 JetBrains 开发的一个跨平台的 UI 工具库，基于 Kotlin 编写，可以用于开发跨平台的 Android，iOS 和 macOS 应用程序。项目地址: https://gitcode.com/gh_mirrors/co/compose-multiplatform

前言

Compose Multiplatform是JetBrains推出的跨平台UI框架，它允许开发者使用Kotlin语言构建适用于多个平台的用户界面。其中，Compose HTML库专门用于开发Web应用，让开发者能够以声明式的方式构建现代Web界面。本文将详细介绍如何从零开始创建一个简单的Web计数器应用。

环境准备

在开始之前，请确保你的开发环境满足以下要求：

JDK 11或更高版本：Compose Multiplatform基于Kotlin，需要Java运行环境支持
IntelliJ IDEA 2020.2或更高版本：推荐使用Community或Ultimate版本，以获得最佳的Kotlin开发体验

项目创建步骤

1. 创建Kotlin多平台项目

在IntelliJ IDEA中：

选择"New Project"
在左侧菜单中选择"Gradle"
勾选"Kotlin DSL build script"（使用Kotlin DSL作为构建脚本）
勾选"Kotlin/Multiplatform"（创建多平台项目）

2. 配置项目设置

修改settings.gradle.kts文件，添加Compose仓库：

pluginManagement {
    repositories {
        gradlePluginPortal()
        maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")
    }
}

3. 配置构建脚本

更新build.gradle.kts文件，添加必要的插件和依赖：

plugins {
    kotlin("multiplatform") version "2.1.20"
    id("org.jetbrains.compose") version "1.8.0"
}

repositories {
    mavenCentral()
    maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")
    google()
}

kotlin {
    js(IR) {
        browser()
        binaries.executable()
    }
    sourceSets {
        val jsMain by getting {
            dependencies {
                implementation(compose.html.core)
                implementation(compose.runtime)
            }
        }
    }
}

关键配置说明：

js(IR)：启用Kotlin/JS IR编译器后端
browser()：配置为浏览器目标
binaries.executable()：生成可执行的JavaScript代码

4. 创建项目结构

手动添加以下目录结构：

src/jsMain/kotlin：存放Kotlin源代码
src/jsMain/resources：存放静态资源文件

5. 创建HTML入口文件

在resources目录下创建index.html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Compose HTML示例</title>
</head>
<body>
  <div id="root"></div>
  <script src="REPLACE_WITH_YOUR_MODULE_NAME.js"></script>
</body>
</html>

注意：REPLACE_WITH_YOUR_MODULE_NAME需要替换为你的实际模块名称。

6. 编写Compose组件

在kotlin目录下创建Main.kt文件，实现一个简单的计数器：

import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.getValue
import androidx.compose.runtime.setValue
import androidx.compose.runtime.Composable
import org.jetbrains.compose.web.attributes.*
import org.jetbrains.compose.web.css.*
import org.jetbrains.compose.web.dom.*
import org.jetbrains.compose.web.renderComposable

fun main() {
    var count: Int by mutableStateOf(0)

    renderComposable(rootElementId = "root") {
        Div({ style { padding(25.px) } }) {
            Button(attrs = {
                onClick { count -= 1 }
            }) {
                Text("-")
            }

            Span({ style { padding(15.px) } }) {
                Text("$count")
            }

            Button(attrs = {
                onClick { count += 1 }
            }) {
                Text("+")
            }
        }
    }
}

代码解析：

使用mutableStateOf创建响应式状态
renderComposable将组件渲染到HTML的root元素
组件使用声明式语法构建，包含两个按钮和一个显示计数的文本

运行项目

命令行方式

执行以下命令启动开发服务器：

./gradlew jsBrowserRun

如需启用热重载（代码修改后自动刷新），使用：

./gradlew jsBrowserRun --continuous

IDE方式

在IntelliJ IDEA中：

打开Gradle工具窗口
找到jsBrowserRun任务
双击执行

项目启动后，浏览器会自动打开http://localhost:8080，你将看到一个简单的计数器界面。

常见问题解决

Webpack CLI加载问题

如果遇到类似以下错误：

[webpack-cli] Unable to load '@webpack-cli/serve' command
[webpack-cli] TypeError: options.forEach is not a function

可以在build.gradle.kts中添加以下临时解决方案：

afterEvaluate {
    rootProject.extensions.configure<org.jetbrains.kotlin.gradle.targets.js.nodejs.NodeJsRootExtension> {
        versions.webpackDevServer.version = "4.0.0"
        versions.webpackCli.version = "4.9.0"
    }
}