前言

前几天，Compose for iOS 发布了Alpha版本，不过早在两个多月前的试验阶段时，我们已经在Compose跨平台第三弹：体验Compose for iOS 为大家分享了Compose开发iOS的体验。

我们也在Compose跨平台第二弹：体验Compose for Web 中了解了如何使用Compose开发Web程序，当时也一起见证了Compose for Web 割裂严重的问题。这个问题官方也一直在推进解决，这要得益于Kotlin/Wasm。那么Kotlin/Wasm又是什么呢?

了解Kotlin/Wasm

是什么

Kotlin/Wasm是将Kotlin编译为WebAssembly (Wasm)的工具链。那WebAssembly又是什么呢？

WebAssembly是一种低级字节码格式，可以在Web浏览器中运行，并且具有比JavaScript更快的执行速度和更好的跨平台兼容性。

可以做什么

使用Kotlin/Wasm，我们可以使用Kotlin编写Web应用程序，然后将其编译为Wasm字节码，以在Web浏览器中运行。这样我们就可以在单个代码库中使用相同的语言和工具来开发应用程序，而不必学习JavaScript等其他语言。此外，由于Wasm字节码是一种跨平台格式，因此应用程序可以在各种操作系统和设备上运行，而不必重新编写代码。

简单的说

总之，Kotlin/Wasm是一种新兴的技术，可以让开发人员使用Kotlin编写Web应用程序，并在Web浏览器中运行。这可以使开发更加简单和高效，并提供更好的跨平台兼容性和更快的执行速度。

Kotlin/Wasm 是从 Kotlin 1.8.20版本开始支持的，当前处于实验阶段。

体验Kotlin/Wasm

启用WASM

我们使用最新版本的IntelliJ IDEA，先随便打开一个项目，双击Shift，再弹出的搜索中输入Registry

选中并回车，在弹出的窗口中找到Kotlin.wasm.wizard，勾选此选项。

然后IDEA会提示我们重启，重启后，就启用了wasm。之后，我们就可以通过IDEA创建Kotlin/Wasm项目。

创建Kotlin/Wasm项目

打开IDEA，创建Kotin Multiplatform项目，选择Browser Application with Kotlin/Wasm，如下图所示。

默认情况下，项目将使用带有 Kotlin DSL 的 Gradle 作为构建系统。创建好项目后，在wasmMain目录下为我们创建了Simple.kt文件，如下图所示。

此外，由于Kotlin/Wasm是从1.8.20版本新增的，所以我们要确保配置文件中的版本号是正确的。

plugins {

    kotlin("multiplatform") version "1.8.20"

}

运行程序

点击运行程序，运行后在浏览器输入框中输入http://localhost:8080/ ，如下图所示。

这里我使用的是Chrome浏览器，需要在Chrome中输入chrome://flags/#enable-webassembly-garbage-collection，然后启用WebAssembly Garbage Collection，这一点需要注意下。

Hello World程序运行之后，我们可以修改自己想要的展示的文字，比如修改代码如下所示：

fun main() {

    document.body?.appendText("Hello, first Kotlin/Wasm Project!")

}

运行程序，如下图所示。

Kotlin/Wasm 可以使用来自 Kotlin 的 JavaScript 代码和来自 JavaScript 的 Kotlin 代码。也就是Kotlin和JavaScript是可以互相操作的。这并不是我们的重点这里就不演示了。

体验Wasm版本的Compose for Web

在Compose跨平台第二弹：体验Compose for Web中，我们使用的是“compose-html”，Kotlin/Wasm在Web浏览器中可以实现更高性能和低延迟的计算机程序。

当前依赖于Kotlin/Wasm的“compose-wasm-canvas”已经在实验阶段，而“compose-wasm-canvas”基本可以解决我们之前所体验到的割裂问题。我们来一起体验一下。

项目配置

由于“compose-wasm-canvas”还处于实验结算所以我们在确保版本号、配置可用，修改配置文件代码如下所示：

kotlin.version=1.8.20

org.jetbrains.compose.experimental.jscanvas.enabled=true

compose.version=1.4.0-dev-wasm06

代码编写

@OptIn(ExperimentalComposeUiApi::class)

fun main() {

    CanvasBasedWindow {

        LoginUi()

    }

}

外层使用CanvasBasedWindow包裹，test就是我们自己写的Compose代码，这里我们两个输入框和一个登陆按钮，代码如下所示：

@Composable

fun LoginUI() {


    var username by remember { mutableStateOf("") }

    var password by remember { mutableStateOf("") }


    Column(

        modifier = Modifier

            .fillMaxWidth()

            .padding(16.dp)

    ) {

        OutlinedTextField(

            value = username,

            onValueChange = { username = it },

            label = { Text("userName") },

            placeholder = { Text("input userName") },

            modifier = Modifier.fillMaxWidth()

        )


        OutlinedTextField(

            value = password,

            onValueChange = { password = it },

            label = { Text("password") },

            placeholder = { Text("input password") },

            visualTransformation = PasswordVisualTransformation(),

            modifier = Modifier

                .fillMaxWidth()

                .padding(top = 8.dp)

        )


        Button(onClick = {

           //login

        }) {

            Text("Login")

        }

    }

}

这就是和Android中Compose完全一样的代码，运行程序，结果如下图所示。

总结

“compose-wasm-canvas”与“compose-html”完全不同，并且解决了我们之前所提到的在Compose for Web中严重的割裂问题，不过，不管是“compose-wasm-canvas”还是Kotlin/Wasm都还处于早期的实验性阶段，什么时候发布Aplha甚至是Beta版本，是个未知数，让我们一起期待吧~