前语

前几天，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跨平台第四弹：了解Kotlin/Wasm

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

Kotlin跨平台第四弹：了解Kotlin/Wasm

然后IDEA会提示咱们重启，重启后，就启用了wasm。之后，咱们就能够经过IDEA创立Kotlin/Wasm项目。

创立Kotlin/Wasm项目

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

Kotlin跨平台第四弹：了解Kotlin/Wasm

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

Kotlin跨平台第四弹：了解Kotlin/Wasm

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

plugins {
    kotlin("multiplatform") version "1.8.20"
}

运转程序

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

Kotlin跨平台第四弹：了解Kotlin/Wasm

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

Kotlin跨平台第四弹：了解Kotlin/Wasm

Hello World程序运转之后，咱们能够修正自己想要的展现的文字，比如修正代码如下所示：

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

运转程序，如下图所示。

Kotlin跨平台第四弹：了解Kotlin/Wasm

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彻底一样的代码，运转程序，成果如下图所示。

Kotlin跨平台第四弹：了解Kotlin/Wasm

总结

“compose-wasm-canvas”与“compose-html”彻底不同，并且处理了咱们之前所提到的在Compose for Web中严峻的分裂问题，不过，不管是“compose-wasm-canvas”还是Kotlin/Wasm都还处于前期的试验性阶段，什么时候发布Aplha甚至是Beta版别，是个未知数，让咱们一同等待吧~