服务粉丝

我们一直在努力
当前位置:首页 > 财经 >

Kotlin跨平台技术,使用Kotlin编写Web应用程序

日期: 来源:郭霖收集编辑:黄林晴


/   今日科技快讯   /

4月26日新闻报道,英国竞争和市场管理局(CMA)采取了行动阻止微软收购动视暴雪的交易,以保护云游戏中的创新和选择。英国竞争和市场管理局系英国最高竞争监管机构,该措施标志着对这家美国科技巨头的重大打击。

或受此消息影响,截至发稿,动视暴雪美股盘前跌超10%,报77.99美元/股。微软方面回应称,计划上诉英国阻止其收购动视暴雪的决定。

/   作者简介   /

本篇文章转自黄林晴的博客,文章主要分享了Kotlin/Wasm的相关介绍和使用,相信会对大家有所帮助!

原文地址:
https://juejin.cn/post/7224718832786325559

/   前言   /

前几天,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版本,是个未知数,让我们一起期待吧~

推荐阅读:
我的新书,《第一行代码 第3版》已出版!
Android 14 Developer Preview一览
微软的人工智能 Copilot 到底有多强大?带你来体验一下

欢迎关注我的公众号
学习技术或投稿


长按上图,识别图中二维码即可关注

相关阅读

  • 拼多多小商家决定反抗

  • 来源|20社(ID:quancaijing_20she)作者|贾阳 罗立璇,编辑|王晓玲头图|视觉中国,图中人物:拼多多创始人黄峥一场针对拼多多的“赛博起义”正在进行中。3月23日,根据多方消息,拼多多的自营
  • 2023 年,我建议创业公司选择 Flutter

  • 作者 | CHRISTIAN FINDLAY
    译者 | 核子可乐
    策划 | 丁晓昀 作为一家初创企业,为自己的首款应用程序选择正确技术堆栈无疑至关重要。您的具体技术选择将直接影响到产品
  • 国家市场监管总局:加大直播带货监管和处罚力度

  • 今天(26日)上午10时,国新办举行新闻发布会,国家市场监督管理总局副局长甘霖介绍,近年来,电商平台和直播带货迅猛发展,在为广大消费者提供便利的同时,也出现了一些新问题。2022年“双

热门文章

  • “复活”半年后 京东拍拍二手杀入公益事业

  • 京东拍拍二手“复活”半年后,杀入公益事业,试图让企业捐的赠品、家庭闲置品变成实实在在的“爱心”。 把“闲置品”变爱心 6月12日,“益心一益·守护梦想每一步”2018年四
  • 美国对华2000亿关税清单,到底影响有多大?

  • 1 今天A股大跌,上证最大跌幅超过2%。直接导火索是美国证实计划对华2000亿美元产品加征25%关税。 听起来,2000亿美元数目巨大,我们来算笔账。 2000亿美元,按现在人民币汇率

最新文章

  • 【点到为止40】棺门大吉

  • 上次讲到,在埃勒里的介绍下,决定留在美国的琼秘书去到了富翁詹姆斯家中工作。但没想到,琼秘书这一去,为后来破案立了大功了。还记得上次说的老式打字机吗?琼秘书这次去詹姆斯家,刚
  • Kotlin跨平台技术,使用Kotlin编写Web应用程序

  • / 今日科技快讯 /4月26日新闻报道,英国竞争和市场管理局(CMA)采取了行动阻止微软收购动视暴雪的交易,以保护云游戏中的创新和选择。英国竞争和市场管理局系英国最高竞争监管
  • 完成进驻!举报方式全公布

  • 根据河北省巡视巡察工作会议暨十届省委第三轮巡视动员部署会会议精神和工作安排,截至目前,省委各巡视组已完成进驻工作。经省委批准,十届省委第三轮巡视15个巡视组,对石家庄市新
  • 失联11天后,传来噩耗!

  • 4月15日15时许,合肥驴友芮先生在河南金刚台山中失联,至今已11日。4月26日下午,记者获悉,芮先生的遗体已在西河景区谷底被找到,目前有关部门正赶往现场。此前报道合肥41岁驴友失联