快速入门KMM和ComposeMultiplatform

最近才有空&＃xff0c;想起来Compose-jb和kmm这2个框架&＃xff0c;就来个快速入门指南吧。

什么是KMM (Kotlin Multiplatform Mobile)

KMM用于简化跨平台开发&＃xff0c;可以在Android和IOS之间共享通用的代码。
仅在使用各自平台能力的时候&＃xff0c;才会去编写各自平台特定的代码。

Compose Multiplatform&＃xff0c; by JetBrains 缩写名称&＃xff1a;compose-jb

Compose Multiplatform&＃xff0c; by JetBrains

JetBrains开源的compose-jb官方的介绍内容&＃xff1a;

桌面和Web UI框架&＃xff0c;基于Google的JetpackCompose工具包
Compose Multiplatform 简化并加速了桌面和Web应用程序的UI开发&＃xff0c;并且允许Android和桌面之间大部分的UI代码共享。

1、compose-jb环境安装

1、下载IntelliJ IDEA Community Edition

2、下载JAVA JDK

2、KMM环境安装

1、下载AndroidStudio

2、下载JAVA JDK

3、下载Kotlin多平台移动插件

在Android Studio中&＃xff0c;在市场中搜索&＃xff1a;Kotlin Multiplatform Mobile&＃xff0c;然后安装

4、更新Kotlin插件

Kotlin插件与AndroidStudio版本是捆绑在一起的&＃xff0c;我们需要更新Kotlin到最新版本&＃xff0c;来避免兼容性问题。

1、compose-jb环境安装

1、下载IntelliJ IDEA Community Edition

2、下载JAVA JDK

2、KMM环境安装

1、下载XCode

2、在终端或命令行工具中&＃xff0c;运行以下命令

brew install kdoctor


如果你还没有Homebrew&＃xff0c;请安装它或查看KDoctor README以获取其他安装方法。

3、安装完成后&＃xff0c;在控制台调用 KDoctor

kdoctor

四、KMM工程

1、创建工程

打开AndroidStudio &＃xff0c;点击 New Project&＃xff0c;然后找到 Kotlin Multiplatform App&＃xff0c;然后点击 Next

配置应用程序的名称、应用包名、项目的位置、最小SDK版本&＃xff0c;配置完成之后&＃xff0c;点击 Next

iOS framework distribution 我们选择Regular framework, 因为此选项不需要第三方工具&＃xff0c;并且安装问题较少。

cocoapods dependency manager 是什么呢&＃xff1f;

CocoaPods是 Swift 和 Objective-C Cocoa项目的依赖管理器。

对于更复杂的项目&＃xff0c;可能需要CocoaPods依赖项管理器来帮助处理库依赖项。

点击Finish&＃xff0c;首次执行此操作时&＃xff0c;下载和设置所需的组件可能需要一些时间。

2、工介绍

KMM工程包含三个模块&＃xff1a;

• androidApp 是Android应用程序项目&＃xff0c;依赖于shared模块&＃xff0c;并将shared模块用作常规的Android库&＃xff0c;UI就是使用Jetpack Compose那一套

• shared 包含Android和iOS应用程序在平台之间共享的通用代码逻辑

• iosApp 是iOS应用程序项目&＃xff0c;它依赖于并使用shared模块作为iOS框架

androidApp和iosApp模块都是各自平台原来的开发方式&＃xff0c;shared模块它是平台之间共享的通用代码逻辑&＃xff0c;那么它如何实现共享的呢&＃xff1f;我们看一下下面这张图片&＃xff1a;

连接到各自的平台:

expect和actual文档

我们可以看到它在公共模块中使用expect关键字&＃xff0c;expect修饰类、成员变量或方法时&＃xff0c;表示类、成员变量、方法&＃xff0c;可以跨平台实现。

注意&＃xff1a;expect声明不包含任何实现代码。
expect和actual所修饰的类/变量/方法&＃xff0c;名称都需要完全一样&＃xff0c;并且位于同一包中&＃xff08;具有相同的完整包名&＃xff09;。

在各自的平台Android/IOS&＃xff0c;中使用actual修饰&＃xff0c;实现同名的类、方法、成员变量。

我们再来看Hello World示例&＃xff0c;commonMain目录下面创建了一个Platform接口&＃xff0c;并使用expect关键字修饰了getPlatform()方法

那么Android/IOS平台&＃xff0c;需要去使用actual修饰&＃xff0c;实现同名的类、方法、成员变量。

我们在commonMain目录下面&＃xff0c;可以定义逻辑类&＃xff0c;共享通用的代码逻辑&＃xff0c;同样以Hello World为例&＃xff1a;

那么在Android/IOS的工程中就可以使用这个Greeting类来获取通用的代码逻辑&＃xff0c;如下&＃xff1a;

3、如何添加依赖项

切换到Project视图下&＃xff0c;找到shared模块&＃xff0c;点击build.gradle.kts&＃xff0c;在sourceSets里面&＃xff0c;我们可以给
commonMain、androidMain、iosMain 分别添加依赖。

我们这里给commonMain添加依赖项&＃xff0c;这样Android、IOS平台就可以在获取通用代码逻辑的时候&＃xff0c;使用到这个依赖项的能力了。

添加kotlinx-datetime的依赖项&＃xff1a;

kotlin {
sourceSets {
val commonMain by getting {
dependencies {
implementation("org.jetbrains.kotlinx:kotlinx-datetime:0.4.0")
}
}
}
}


在commonMain目录下面创建一个KotlinNewYear.kt的File&＃xff1a;

import kotlinx.datetime.*
fun daysUntilNewYear(): Int {
val today &＃61; Clock.System.todayIn(TimeZone.currentSystemDefault())
val closestNewYear &＃61; LocalDate(today.year &＃43; 1, 1, 1)
return today.daysUntil(closestNewYear)
}


我们在Greeting里面使用这个方法:

我们看看运行之后的结果&＃xff1a;

4、网络请求

我们需要准备以下三个多平台库&＃xff1a;

• kotlinx.coroutines&＃xff0c;用于使用协程编写异步代码&＃xff0c;允许同时操作
• kotlinx.serialization&＃xff0c;用于将 JSON 响应反序列化为用于处理网络操作的实体类的对象。
• Ktor&＃xff0c;一个作为HTTP客户端的框架&＃xff0c;用于通过互联网检索数据。

1、添加Kotlinx.coroutines依赖库&＃xff1a;

在shared模块的build.gradle.kts中&＃xff0c;添加kotlinx.coroutines依赖

sourceSets {
val commonMain by getting {
dependencies {
// ...
implementation("org.jetbrains.kotlinx:kotlinx-coroutines-core:1.6.4")
}
}
}


我们打开项目根目录下面的build.gradle.kts文件&＃xff0c;查看kotlin版本是否小于1.7.20

使用 Kotlin 1.7.20 及更高版本&＃xff0c;则默认情况下已经启用了新的 Kotlin/Native 内存管理器。

Kotlin版本小于1.7.20版本&＃xff0c;请将以下内容添加到build.gradle.kts文件末尾&＃xff1a;

kotlin.targets.withType(org.jetbrains.kotlin.gradle.plugin.mpp.KotlinNativeTarget::class.java) {
binaries.all {
binaryOptions["memoryModel"] &＃61; "experimental"
}
}


2、添加Kotlinx.serialization依赖库&＃xff1a;

我们打开shared模块&＃xff0c;打开build.gradle.kts文件&＃xff0c;在文件开头的plugins块中增加 序列化插件 内容&＃xff1a;

plugins {
kotlin("plugin.serialization") version "1.8.0"
}


3、添加Ktor依赖库

我们打开shared模块&＃xff0c;打开build.gradle.kts文件&＃xff0c;增加下面内容&＃xff1a;

val ktorVersion &＃61; "2.2.1"
sourceSets {
val commonMain by getting {
dependencies {
// ...
implementation("io.ktor:ktor-client-core:$ktorVersion")
implementation("io.ktor:ktor-client-content-negotiation:$ktorVersion")
implementation("io.ktor:ktor-serialization-kotlinx-json:$ktorVersion")
}
}
val androidMain by getting {
dependencies {
implementation("io.ktor:ktor-client-android:$ktorVersion")
}
}
val iosMain by creating {
// ...
dependencies {
implementation("io.ktor:ktor-client-darwin:$ktorVersion")
}
}
}


ktor-client-core&＃xff1a;核心依赖项。

ktor-client-content-negotiation&＃xff1a;负责序列化/反序列化特定格式的内容。

ktor-serialization-kotlinx-json&＃xff1a;使用JSON格式用作序列化库&＃xff0c;在接收响应时将其反序列化为数据类。

ktor-client-android&＃xff1a;提供Android平台引擎

ktor-client-darwin&＃xff1a;提供IOS平台引擎

点击Sync Now同步Gradle之后&＃xff0c;我们创建一个RocketLaunch.kt&＃xff1a;

import kotlinx.serialization.SerialName
import kotlinx.serialization.Serializable
&＃64;Serializable
data class RocketLaunch (
&＃64;SerialName("flight_number")
val flightNumber: Int,
&＃64;SerialName("name")
val missionName: String,
&＃64;SerialName("date_utc")
val launchDateUTC: String,
&＃64;SerialName("success")
val launchSuccess: Boolean?,
)


点击查看Ktor官方文档

4、创建一个Ktor实例来执行网络请求并解析生成的JSON&＃xff1a;

import io.ktor.client.*
import io.ktor.client.plugins.contentnegotiation.*
import io.ktor.serialization.kotlinx.json.*
import kotlinx.serialization.json.Json
class Greeting {
private val platform: Platform &＃61; getPlatform()
private val httpClient &＃61; HttpClient {
// 安装ContentNegotiation插件
install(ContentNegotiation) {
// 注册 JSON 序列化程序
json(Json {
// true:表示打印并生成漂亮的JSON。 默认情况下&＃xff1a;false
prettyPrint &＃61; true
// true&＃xff1a;删除 JSON 规范限制&＃xff0c;允许使用带引号的布尔文本和不带引号的字符串文字
isLenient &＃61; true
// true&＃xff1a;表示可以忽略JSON中遇到的未知属性&＃xff0c;防止引发序列化异常。 默认情况下&＃xff1a;false
ignoreUnknownKeys &＃61; true
})
}
}
}


点击查看ContentNegotiation Ktor插件文档

修改greeting方法&＃xff0c;添加suspend修饰&＃xff0c;并使用httpClient去获取网络请求的数据&＃xff1a;

import io.ktor.client.call.*
import io.ktor.client.request.*
class Greeting {
// ...
&＃64;Throws(Exception::class)
suspend fun greeting(): String {
// 获取数据
val rockets: List<RocketLaunch> &＃61;
httpClient.get("https://api.spacexdata.com/v4/launches").body()
// 判断最近一次火箭是否发射成功
val lastSuccessLaunch &＃61; rockets.last { it.launchSuccess &＃61;&＃61; true }
// 返回结果
return "Guess what it is! > ${platform.name.reversed()}!" &＃43;
"\nThere are only ${daysUntilNewYear()} left until New Year! &＃x1f386;" &＃43;
"\nThe last successful launch was ${lastSuccessLaunch.launchDateUTC} &＃x1f680;"
}
}


到这里还没结束&＃xff0c;这里只是获取数据的代码&＃xff0c;Android/IOS项目目录下面&＃xff0c;仍然要配置内容&＃xff0c;请往下看&＃xff1a;

5、Android相关配置

• 打开androidApp/src/main/AndroidManifest.xml 配置网络权限&＃xff1a;


<manifest xmlns:android&＃61;"http://schemas.android.com/apk/res/android"
package&＃61;"com.jetbrains.simplelogin.kotlinmultiplatformsandbox" >
<uses-permission android:name&＃61;"android.permission.INTERNET"/>
manifest>


• 打开androidApp/build.gradle.kts 添加Android协程库&＃xff0c;处理commMain模块的挂起方法&＃xff1a;

dependencies {
// ..
implementation("org.jetbrains.kotlinx:kotlinx-coroutines-android:1.6.4")
}


然后点击同步Gradle&＃xff0c;打开MainActivity.kt文件&＃xff0c;使用协程调用suspend fun greeting()

import androidx.compose.runtime.*
import kotlinx.coroutines.launch
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
MyApplicationTheme {
Surface(
modifier &＃61; Modifier.fillMaxSize(),
color &＃61; MaterialTheme.colors.background
) {
val scope &＃61; rememberCoroutineScope()
var text by remember { mutableStateOf("Loading") }
LaunchedEffect(true) {
scope.launch {
text &＃61; try {
Greeting().greeting()
} catch (e: Exception) {
e.localizedMessage ?: "error"
}
}
}
GreetingView(text)
}
}
}
}
}


6、IOS相关配置

IOS这里使用SwiftUI构建UI界面&＃xff0c;使用Model-view-ViewModel&＃xff0c;将 UI 连接到包含所有业务逻辑的shared模块。

在ContentView.swift中创建viewModel&＃xff0c;并获取shared模块中的网络请求数据&＃xff1a;

看到这里可能大家都会感觉很熟悉&＃xff0c;鸿蒙的ArkUI和SwiftUI真的好像&＃xff0c;感觉就是表兄弟。
Compose和SwitfUI还差点样子&＃xff0c;样貌算是外甥的那种哈哈。

点击查看DispatchQueue.main.async解释

运行之后Android和IOS的界面显示如下&＃xff1a;

5、小结

KMM属于Android和IOS各自写各自平台的UI&＃xff0c;通用的业务逻辑数据处理需要从shared模块去获取。
优点&＃xff1a;重复的业务逻辑数据处理部分&＃xff0c;统一处理&＃xff0c;在业务需求发生变更&＃xff0c;也只需要更新shared模块即可&＃xff0c;Android/IOS各自平台只需要关心各自的UI和平台的细节处&＃xff0c;分工合作。
缺点&＃xff1a;不能统一平台UI&＃xff0c;各自平台仍然要每个平台各自写一份&＃xff0c;但是总提上来说还是减少了一定的工作量。

点击观看官方KMM技术演进的计划-视频源自youtube

点击观看官方KMM技术演进的计划-视频源自Bilibili

我们从上面可以看到创建单平台的项目&＃xff0c;目前可以选择Desktop和Web。

1、单平台Desktop目录介绍

创建一个单平台的Desktop项目&＃xff0c;项目目录如下&＃xff1a;

在jvmMain目录下面编写我们的窗口代码&＃xff0c;build.gradle.kts文件中&＃xff0c;我们需要在sourceSets的jvmMain中添加我们的三方库依赖&＃xff1a;

sourceSets {
val jvmMain by getting {
dependencies {
// 增加其他依赖库
implementation(compose.desktop.currentOs)
}
}
//.....
}


在build.gradle.kts文件中最后&＃xff0c;这段代码&＃xff0c;里面的内容有啥含义呢&＃xff1f;


// 包名
group &＃61; "com.example"
// 应用程序的版本名称
version &＃61; "0.1-SNAPSHOT"
compose.desktop {
application {
// 程序入口类
mainClass &＃61; "MainKt"
nativeDistributions {
// 目标格式
targetFormats(TargetFormat.Dmg, TargetFormat.Msi, TargetFormat.Deb)
// 应用程序的名称
packageName &＃61; "demo"
// 安装包版本名称
packageVersion &＃61; "1.0.0"
// 下面是我用来介绍元数据增加的&＃xff0c;仅供参考
// 应用程序描述&＃xff08;默认值&＃xff1a;无&＃xff09;
description &＃61; "Compose Example App"
// 应用程序的版权&＃xff08;默认值&＃xff1a;无&＃xff09;
copyright &＃61; "© 2023 My Name. All rights reserved."
// 应用程序的供应商&＃xff08;默认值&＃xff1a;无&＃xff09;
vendor &＃61; "Example vendor"
// 应用程序的许可证&＃xff08;默认值&＃xff1a;无&＃xff09;
licenseFile.set(project.file("LICENSE.txt"))
}
}
}


更多使用细节&＃xff0c;可参考github这里的README.md文档

打开gradle.properties文件&＃xff0c;可修改kotlin、agp、compose版本号&＃xff1a;

打开settings.gradle.kts文件&＃xff0c;可修改配置maven仓库镜像地址&＃xff0c;以及插件版本号

这里注意一点&＃xff0c;如果你不看参数注释直接去修改 Window 窗口透明的话&＃xff1a;

// 错误的用法
fun main() &＃61; application {
Window(onCloseRequest &＃61; ::exitApplication, transparent &＃61; true) {
App()
}
}


运行的时候&＃xff0c;会提示如下错误&＃xff1a;

Exception in thread "main" java.lang.IllegalStateException: Transparent window should be undecorated!
............
FAILURE: Build failed with an exception.
* What went wrong:
Execution failed for task &＃39;:run&＃39;.
> Process &＃39;command &＃39;************\bin\java.exe&＃39;&＃39; finished with non-zero exit value 1
* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
* Get more help at https://help.gradle.org


修改后的窗口透明代码如下&＃xff1a;

fun main() &＃61; application {
// undecorated - 禁用或启用此窗口的装饰。
// transparent - 禁用或启用窗口透明度。只有在窗口【没有启用装饰】时才应设置透明度&＃xff0c;否则将抛出异常。
Window(onCloseRequest &＃61; ::exitApplication, undecorated &＃61; true, transparent &＃61; true) {
App()
}
}


运行起来之后&＃xff0c;整个窗口背景色都是透明的&＃xff0c;但窗口实际占的位置还是原来那么大(占位的部分&＃xff0c;不能点击穿透)&＃xff0c;我用红色方框画了窗口的实际大小&＃xff0c;如下&＃xff1a;

2、单平台Web目录介绍

先看一下index.html文件的内容&＃xff1a;

DOCTYPE html>
<html lang&＃61;"en">
<head>
<meta charset&＃61;"UTF-8">
<title>Sampletitle>
head>
<body>
<div id&＃61;"root">div>
<script src&＃61;"替换成你的module名称.js">script>
body>
html>


很普通&＃xff0c;body最后一行&＃xff0c;需要引入以ModuleName为名称的js文件&＃xff0c;还定义了一个div root用来插入Compose管理的DOM树内容。

我们再打开Main.kt文件&＃xff0c;在main()方法里面&＃xff0c;入口是这样使用的&＃xff1a;

renderComposable(rootElementId &＃61; "root") {
// 内容在这里
}


Compose需要一个根节点&＃xff0c;用来管理自己的DOM树&＃xff1a;

fun renderComposable(
rootElementId: String,
content: &＃64;Composable DOMScope<Element>.() -> Unit
): Composition &＃61; renderComposable(
root &＃61; document.getElementById(rootElementId)!!,
content &＃61; content
)


这里的root&＃xff0c;是通过document.getElementById(rootElementId)获取的&＃xff0c;这个方法的作用是&＃xff1a;

返回一个Element对象&＃xff0c;用于快速访问&＃xff1a;id为root的div元素。

通过Compose DOM DSL给我们提供的常用的HTML可组合项&＃xff0c;我们可以在renderComposable里面使用它们&＃xff0c;
如Text、Span、Div、Input、A、TextArea 等等可组合项。

查看可组合项和HTML标签代码的异同&＃xff1a;

Span(
attrs &＃61; { style { color(Color.red) } } // inline style
) {
Text("Red text")
}


对应的HTML代码&＃xff1a;

<span style&＃61;"color: red;">Red textspan>


可运行下面示例查看简单的界面&＃xff1a;

import androidx.compose.runtime.*
import org.jetbrains.compose.web.attributes.*
import org.jetbrains.compose.web.css.*
import org.jetbrains.compose.web.dom.*
import org.jetbrains.compose.web.renderComposable
fun main() {
var count: Int by mutableStateOf(0)
renderComposable(rootElementId &＃61; "root") {
val text &＃61; remember { mutableStateOf("") }
TextArea(
value &＃61; text.value,
attrs &＃61; {
onInput {
text.value &＃61; it.value
}
}
)
Div({ style { padding(25.px) } }) {
Button(attrs &＃61; {
onClick { count -&＃61; 1 }
}) {
Text("-")
}
Span({ style { padding(15.px) } }) {
Text("$count")
}
Button(attrs &＃61; {
onClick { count &＃43;&＃61; 1 }
}) {
Text("&＃43;")
}
}
A(
attrs &＃61; {
href("https://www.baidu.com")
target(ATarget.Blank)
hreflang("en")
download("https://...")
}
) { Text("打开百度的超链接") }
}
}


那么如何运行Web项目到浏览器中呢&＃xff1f;

我们可通过命令&＃xff0c;或者通过工具栏菜单去运行:

./gradlew jsBrowserRun


如果不想每次变更内容都去重新编译和运行&＃xff0c;可通过如下命令连续编译模式&＃xff1a;

./gradlew jsBrowserRun --continuous


或者通过IDEA的工具栏去双击运行它&＃xff1a;

运行之后&＃xff0c;浏览器将打开&＃xff1a;localhost:8080 界面如下&＃xff1a;

点击查看Compose-Web详细使用的文档指南

3、多平台目录介绍

切换到多平台去创建一个工程&＃xff0c;创建完工程&＃xff0c;我们看一下目录图片(可保存到电脑上查看长图)&＃xff1a;

我们发现这个多平台的目录&＃xff0c;只有Android和Desktop平台&＃xff0c;那么接着往下看吧&＃xff1a;

android和desktop&＃xff0c;把可组合项代码放到了commonMain目录下面&＃xff0c;意味着Android和Desktop 能共用可组合项代码了&＃xff0c;一模一样肯定是不能够的&＃xff0c;我们要根据platform区分&＃xff0c;因为电脑桌面的UI和手机UI排列和样式这些还是会不同的。

1、运行桌面应用

./gradlew :desktop:run


2、构建桌面应用发布包(JDK>&＃61;15)

./gradlew :desktop:packageDistributionForCurrentOS


或者可以通过菜单栏去双击构建运行&＃xff1a;

3、运行Android应用

点击IDE的Edit Configurations&＃xff0c;去配置一个Android app

然后在工具栏上面&＃xff0c;菜单栏下面&＃xff0c;有如下入口&＃xff0c;可点击按钮运行&＃xff1a;

4、打包Android APP

命令打包&＃xff1a;

./gradlew build release


或者通过菜单项&＃xff0c;手动点击去打包&＃xff0c;Build -> Generate Signed Bundle/Apk

4、小结

Compose Multiplatform 加速了桌面和Web应用程序的UI开发&＃xff0c;创建多平台的项目工程的时候&＃xff0c;Android和桌面之间大部分的UI代码可直接共享。

目前看还有很长的路要走&＃xff0c;期待&＃xff1a;IOS工程能像Android和Desktop一样共享大部分UI代码。