6.2.3.2 Kotlin/Wasm 与 Compose Multiplatform 入门

2 分钟阅读

原文链接: https://kotlinlang.org/docs/wasm-get-started.html

Beta

本教程演示如何在 IntelliJ IDEA 中运行基于 Compose Multiplatform 和的应用，并生成可作为网站发布的构件。

创建项目

提示： 如果你没有使用 Kotlin Multiplatform IDE 插件，可以用 KMP Web 向导生成同样的项目。

注意： 为保持一致，本教程使用 wasm.project.demo 作为 Project ID。不过我们建议沿用你常用的 group ID，例如 org.example。你在这里输入的内容会被作为未来项目的默认值推荐。

Kotlin Multiplatform 向导

在 Web 上运行 Compose Multiplatform 应用

Web 应用会自动在浏览器中打开。或者，构建完成后，你可以手动打开以下 URL：

1
       http: // http://localhost:8080/

如果端口 8080 已被占用，端口号可能会不同。你可以在 Gradle 构建的输出中找到实际端口号。

浏览器中的 Compose 应用

生成项目的构件以便在网站上发布：

通过选择 View | Tool Windows | Gradle 打开 Gradle 工具窗口。
在 WasmDemo | Tasks | kotlin browser 中选择并运行 wasmJsBrowserDistribution 任务。

注意： 你需要至少 Java 11 作为 Gradle JVM，任务才能成功加载。对于一般的 Compose Multiplatform 项目，我们建议使用 Java 17 或更高版本。

运行 Gradle 任务

或者，你可以在 WasmDemo 根目录下于终端中运行以下命令：

1
    ./gradlew wasmJsBrowserDistribution

任务完成后，你可以在 webApp/build/dist/wasmJs/productionExecutable 目录中找到生成的构件：

构件目录

使用生成的构件来部署你的 Kotlin/Wasm 应用。选择你偏好的发布方式并按照说明操作：

站点创建完成后，打开浏览器并访问你的平台页面域名。例如 GitHub pages：

访问 GitHub pages

恭喜！你已经发布了构件。