Kotlin/Wasm 与 Compose Multiplatform 入门

创建项目

1. 为 Kotlin Multiplatform 开发设置你的环境.

2. 在 IntelliJ IDEA 中, 选择 File | New | Project.

3. 在项目模板列表中, 选择 Kotlin Multiplatform.

4. 在 New Project 窗口中, 填写以下项目:

   • Name: WasmDemo

   • Project ID: wasm.project.demo

5. 选择 Web 编译目标和 Share UI 选项. 请确认没有选择其他选项.

6. 点击 Create.

   

运行应用程序

1. 项目载入完成后, 在运行配置列表中选择 webApp [wasmJs], 然后点击 Run.

   

   Web 应用程序将在你的浏览器中自动打开. 或者, 在构建完成后, 你也可以手动打开以下 URL:

   http://localhost:8080/

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

2. 点击 Click me! 按钮. 这将显示 Compose Multiplatform 的 Logo:

   

生成 artifact

生成项目的 artifact, 用于发布到网站:

1. 选择菜单 View | Tool Windows | Gradle, 打开 Gradle 工具窗口.

2. 在 WasmDemo | Tasks | kotlin browser 中, 选中并运行 wasmJsBrowserDistribution 任务.

   

   或者, 你可以在终端窗口, 在 WasmDemo 根目录下运行以下命令:

   ./gradlew wasmJsBrowserDistribution

任务完成之后, 你可以在 webApp/build/dist/wasmJs/productionExecutable 目录中找到生成的 artifact 文件:

发布应用程序

使用生成的 artifact 来部署你的 Kotlin/Wasm 应用程序. 选择你喜欢的发布方式, 并按照相应的说明操作:

• GitHub pages

• Cloudflare

• Apache HTTP Server

网站创建完成后, 在浏览器中访问你的发布平台的页面域名. 例如, 对于 GitHub pages:

恭喜! 你已经成功的发布了你的 artifact.

下一步做什么?

• 学习如何使用 Compose Multiplatform 在 iOS 和 Android 之间共用 UI

• 试试其它更多 Kotlin/Wasm 示例:

  • KotlinConf 应用程序

  • Compose 图像浏览器

  • Node.js 示例

  • WASI 示例

  • Compose 示例

• 加入 Kotlin Slack 中的 Kotlin/Wasm 开发社区: