构建跨平台的客户端界面

原文链接

欢迎大家对于本站的访问 - AsterCasc

前言

带有界面的跨平台客户端解决方面还是不少的，主要服务于Linux，IOS，Android，Windows甚至Web，比如Qt。但是众所周知Qt在移动端表现比较差，其他的解决方案也各有优缺点，这里我们使用较新的 Compose Multiplatform + Kotlin 作为我们的跨平台客户端解决方案，该种方案的使用可以参考官方示例项目

我们这里以Winodows+Android作为目标平台举例

下载

Android Studio，注意，目前2023-12-05在中文条件下?hl=zh-cn进入网页是拿不到最新的版本2023.1.1的。我们需要修改到英文环境?hl=en拿到，可能由于新版的汉化还没有完成

JDK，推荐使用17的，如果是有特殊需求也可以选择11或者8

Kotlin，这个Android Studio自带的，在Tools->Kotlin->Configure Kotlin Plugin Updates确认是否是最新版本即可

项目初始化

在Kotlin Multiplatform wizard下载指定配置的脚手架代码

修改JDK版本

在build.gradle.kts中，修改jvmTarget = "17"、sourceCompatibility = JavaVersion.VERSION_17以及targetCompatibility = JavaVersion.VERSION_17，同时确认File->Setting->Build, Exception, Deployment->Build Tools->Gradle中和File->Project Structure中的JDK版本是否正确

修复多平台实验性功能导致actual关键字报错

虽然根据IDEA New Project Wizard, Compose Multiplatform这个issue，开发者指出

It is kept for purpose. This warning doesn’t impact work anyhow, but users should be aware, that MPP is experimental at the moment.

但是这个报错非常影响开发观感，所以我们这里增加跨平台编译选项来消除这个报错，在build.gradle.kts中添加

//...
kotlin {
    tasks.withType<org.jetbrains.kotlin.gradle.tasks.KotlinCompile> {
        compilerOptions.freeCompilerArgs.add("-Xmulti-platform")
    }    
    //...
}

修复重复内容根警告

duplicate content roots detected，产生的原因是模块被重复引用。在我们的项目中体现在sourceSets["main"].resources.srcDirs("src/androidMain/res")，正常情况下，我们需要修改项目的包装引用结构来修复这个问题。但是如果我们的项目中不涉及共享资源那么直接把这行删掉即可，如果涉及，这里还有个奇技淫巧，就是创建软链接，Linux创建软链接就不谈了，下面给出Windows创建软链接

在androidMain/res/drawable下执行mklink /d ".\resources" "..\..\..\commonMain\resources"即可将公共目录下资源文件映射到安卓目录，此时再将sourceSets["main"].resources.srcDirs("src/commonMain/resources")修改为sourceSets["main"].resources.srcDirs("src/androidMain/res/drawable/resources")即可

启动

Android的正常启动，没什么好说的

这里当前2023.1.1的Android Studio版本Windows启动会报错Cannot locate tasks that match ':composeApp:compileJava' as task 'compileJava' is ambiguous in project ':composeApp'.，目前没有找到原生的特别好的解决方案，两个选择，要么桌面版使用IDEA启动，但是IDEA对安卓不友好，如果要启动两个编辑器的话还是挺烦的。要么，使用命令行./gradlew :composeApp:run启动，Run->Edit Configurations->Add new Configuration->Shell Script->Script path->Browse->Project Dictory->gradlew，再在Script options中填入:composeApp:run即可

添加库

最好引用跨平台库，这样我就不需要对于平台实现分别处理减少开发量，跨平台的库的选择可以参考：

• Awesome Kotlin Multiplatform
• Kotlin Multiplatform Libraries
• KAMP GITHUB & KAMP
• icerock KMP GITHUB & icerock KMP
• Kotlin Multiplatform

发布

桌面

在基本配置下，进行原生平台的发布配置，基础配置示例如下：

compose.desktop {
    application {
        mainClass = "MainKt"
        
        nativeDistributions {
            targetFormats(TargetFormat.Dmg, TargetFormat.Msi, TargetFormat.Deb)
            packageName = "TestSoftware"
            packageVersion = "1.0.0"
        }
    }
}

直接运行命令./gradlew :composeApp:package就会自动下载平台相关依赖进行发布流程，最后会得到一个TestSoftware-1.0.0.msi的安装包，当然你这里也可以选择TargetFormat.exe的方式进行发布。如果测试在运行时候少包，发生ClassNotFoundException的问题，那么如果对于文件大小要求不严格，直接添加includeAllModules=true在nativeDistributions中以支持所有模块的包含。如果大小要求严格那么只能通过modules("java.sql")一类的方法指定相关模块

还可以配置相关元数据，比如描述，版本、发行、图标等

        nativeDistributions {
            targetFormats(TargetFormat.Dmg, TargetFormat.Exe, TargetFormat.Deb)
            packageName = "ASCYDoorM"
            packageVersion = "1.0.0"
            description = "Aster Casc Yuno Door Multiplatform App"
            copyright = "astercasc.com. All rights reserved."
            vendor = "Aster Casc"

            windows{
                menuGroup = "ASCYDoorM"
                iconFile.set(project.file("head.ico"))
            }
        }

更多相关内容，比如混淆、压缩或者其他平台特定功能属性等，参考Native distributions and local execution

或者可以使用其他发行方式，比如Conveyor

安卓

这个没啥好说的，和普通的安卓发布流程一样，参考Android Publish

项目参考

• Compose Multiplatform
• Compose Multiplatform desktop application
• Compose-Multiplatform-Video-Player

原文链接

欢迎大家对于本站的访问 - AsterCasc