使用 IntelliJ IDEA 开发 Kotlin/Wasm 入门
最终更新: 2024/03/21
Kotlin/Wasm 功能处于 Alpha 阶段. 它随时有可能变更.
本教程演示在 IntelliJ IDEA 中如何使用 Kotlin/Wasm 运行 Compose Multiplatform 应用程序, 以及如何生成 artifact, 并发布为 GitHub pages 上的网站.
开始之前的准备步骤
使用 Kotlin Multiplatform 向导创建项目:
- 打开 Kotlin Multiplatform 向导.
- 在 New Project 页, 将项目名称修改为 "WasmDemo", 项目 ID 修改为 "wasm.project.demo".
- 选择 Web 选项.
- 点击 Download 按钮, 将生成的压缩包文件解包.
在 IntelliJ IDEA 中打开项目
- 下载并安装最新版本的 IntelliJ IDEA.
- 在 IntelliJ IDEA 的欢迎界面, 点击 Open, 或在菜单栏选择 File | Open.
- 导航到解包后的 "WasmDemo" 文件夹, 点击 Open.
运行应用程序
-
在 IntelliJ IDEA 中, 选择菜单 View | Tool Windows | Gradle, 打开 Gradle 工具窗口.
你需要至少 Java 11 以上版本, 用作你的 Gradle JVM, 才能成功装载 task.
-
在 composeApp | Tasks | kotlin browser 中, 选中并运行 wasmJsBrowserRun 任务.
或者, 你可以在终端窗口, 在
composeApp
目录下运行以下命令:../gradlew wasmJsBrowserRun -t
-
应用程序启动之后, 在你的浏览器中打开下面的 URL:
http://localhost:8080/
端口号可能会变化, 因为 8080 端口可能不能使用. 你可以在 Gradle 构建任务的控制台看到打印输出的实际端口号.
你会看到一个 "Click me!" 按钮. 请点击它:
现在你会看到 Compose Multiplatform 的 Logo:
生成 artifact
在 composeApp | Tasks | kotlin browser 中, 选中并运行 wasmJsBrowserDistribution 任务.
或者, 你可以在终端窗口, 在 composeApp
目录下运行以下命令:
../gradlew wasmJsBrowserDistribution
应用程序任务结束之后, 你可以在 composeApp/build/dist/wasmJs/productionExecutable
文件夹中找到生成的 artifact 文件:
发布到 GitHub pages
- 将你的
productionExecutable
目录中的所有内容复制到你想要创建网站的代码仓库. -
执行 GitHub 的 创建你的网站 说明文档中的指令.
在你将变更 push 到 GitHub 之后, 可能需要花费 10 分钟才能将这些变更发布到你的网站.
-
在浏览器中, 访问你的 GitHub pages 的域名.
恭喜! 你已经将你的 artifact 发布到了 GitHub pages.
下一步做什么?
加入 Kotlin Slack 中的 Kotlin/Wasm 开发社区:
试试 kotlin-wasm-examples
代码仓库中的 Kotlin/Wasm 示例: