Kotlin/Wasm 与 Compose Multiplatform 入门

开始之前的准备步骤

使用 Kotlin Multiplatform 向导创建项目:

1. 打开 Kotlin Multiplatform 向导.

2. 在 New Project 页, 将项目名称 和 ID 修改为你喜欢的值. 在本教程中, 我们将项目名称设置为 "WasmDemo", ID 设置为 "wasm.project.demo".

   tip

   这些值是项目目录的名称和 ID. 你也可以使用原来的值, 不做修改.

3. 选择 Web 选项. 请确认没有选择其他选项.

4. 点击 Download 按钮, 将生成的压缩包文件解包.

在 IntelliJ IDEA 中打开项目

1. 下载并安装最新版本的 IntelliJ IDEA.

2. 在 IntelliJ IDEA 的欢迎界面, 点击 Open, 或在菜单栏选择 File | Open.

3. 导航到解包后的 "WasmDemo" 文件夹, 点击 Open.

运行应用程序

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

   项目载入之后, 你可以在 Gradle 工具窗口找到 Gradle task.

   note

   你需要至少 Java 11 以上版本, 用作你的 Gradle JVM, 才能成功装载 task.

2. 在 composeApp | Tasks | kotlin browser 中, 选中并运行 wasmJsBrowserRun 任务.

   

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

   ./gradlew wasmJsBrowserRun -t

3. 应用程序启动之后, 在你的浏览器中打开下面的 URL:

   http://localhost:8080/

   tip

   端口号可能会变化, 因为 8080 端口可能不能使用. 你可以在 Gradle 构建任务的控制台看到打印输出的实际端口号.

   你会看到一个 "Click me!" 按钮. 请点击它:

   

   现在你会看到 Compose Multiplatform 的 Logo:

   

生成 artifact

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

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

./gradlew wasmJsBrowserDistribution

应用程序任务结束之后, 你可以在 composeApp/build/dist/wasmJs/productionExecutable 目录中找到生成的 artifact 文件:

发布到 GitHub pages

1. 将你的 productionExecutable 目录中的所有内容复制到你想要创建网站的代码仓库.

2. 执行 GitHub 的 创建你的网站 说明文档中的指令.

   note

   在你将变更 push 到 GitHub 之后, 可能需要花费 10 分钟才能将这些变更发布到你的网站.

3. 在浏览器中, 访问你的 GitHub pages 的域名.

   

   恭喜! 你已经将你的 artifact 发布到了 GitHub pages.

下一步做什么?

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

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

• Compose 图像浏览器

• Jetsnack 应用程序

• Node.js 示例

• WASI 示例

• Compose 示例