前言

这里，假设你已经知道KMM和Compose跨平台是什么了，如果不知道的话，可以看我之前的文章。

Compose 跨平台当前有两个比较重要的节点：

• Compose for iOS Alpha
• Compose for Web(Wasm)  Experimental

官方也为我们提供了一些模板，但唯独没有Compose for Web with Wasm的模板。

所以，在我睡觉😴的时候，梦游写了一个项目模板。

模板介绍

在最新的IDEA中我们只能创建Kotlin/Wasm项目，如果想创建Compose for Web for Wasm的项目需要添加一些配置。这一点对初学者极其不友好。所以我写了一个项目模板，你可以直接使用这个模板项目来使用Compose开发自己的Web跨平台项目。

如果你还不了解Kotlin/Wasm是什么，可以阅读这篇文章： Kotlin跨平台第四弹：了解Kotlin/Wasm 前言

如果你对Compose跨平台感兴趣，可以持续关注我的公众号。我将持续更新Compose跨平台相关的内容

使用方法

导入项目后，打开wasmMain目录下的Simple.kt文件，你将看到下列代码：

@OptIn(ExperimentalComposeUiApi::class)

fun main() {

    CanvasBasedWindow {

        //在这里可以调用任意Compose代码

        LoginUI()

    }

}

你可以在CanvasBasedWindow下编写任意的Compose函数，本事例中，在commonMain目录下编写了一个公用的登陆UI函数。

@Composable
fun LoginUI() {

    var username by remember { mutableStateOf("") }
    var password by remember { mutableStateOf("") }

    Column(
        modifier = Modifier
            .width(400.dp)
            .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")
        }
    }

}

运行Web程序，结果如下图所示。

快快使用起来吧~，项目模板已放github，欢迎Start⭐️

github.com/huanglinqin…

​

写在最后

Android Studio可以借助KMM插件来创建KMM项目，IDEA可以直接创建Compose跨平台项目。但是却没有一个插件可以直接创建同时包含Compose跨平台和KMM的项目。在这种情况下我觉得也没必要造轮子，因为随着Compose跨平台的发展，这样一个插件的诞生是必然的！