4月26日新闻报道,英国竞争和市场管理局(CMA)采取了行动阻止微软收购动视暴雪的交易,以保护云游戏中的创新和选择。英国竞争和市场管理局系英国最高竞争监管机构,该措施标志着对这家美国科技巨头的重大打击。
或受此消息影响,截至发稿,动视暴雪美股盘前跌超10%,报77.99美元/股。微软方面回应称,计划上诉英国阻止其收购动视暴雪的决定。本篇文章转自黄林晴的博客,文章主要分享了Kotlin/Wasm的相关介绍和使用,相信会对大家有所帮助!https://juejin.cn/post/7224718832786325559
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版本开始支持的,当前处于实验阶段。我们使用最新版本的IntelliJ IDEA,先随便打开一个项目,双击Shift,再弹出的搜索中输入Registry。选中并回车,在弹出的窗口中找到Kotlin.wasm.wizard,勾选此选项。然后IDEA会提示我们重启,重启后,就启用了wasm。之后,我们就可以通过IDEA创建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 /当前依赖于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版本,是个未知数,让我们一起期待吧~