Compose Multiplatform+Kotlin Multiplatfrom 第一弹跨平台

前言

现在Android原生需求日渐减少，多平台或车载，端侧大模型等我看是未来的主流，上一年做了新能源DBC协议的数据可视化显示，将数据实时保存到本地的csv或asc文件中，处理的难点高频数据的缓存和释放。端侧目前各系统不成熟，后面纯血鸿蒙处理应该底层就搭建大模型，应用层可直接调用模型的接口，下放更多能力，可是除了图片，音频我也不知道大模型能怎么改变我们普通的开发者，我们的应用没那么多AI，高手可留言讨论😁。今年把原生的转Compose Multiplatform+kotlin Multiplatfrom，开始搭建时kotlin版本1.9.22，compose1.6，过程解决各类问题，进入无数的无人区调试。

功能需求分析

源码涉及公司后续抽离公布
1.尽量一套代码开发Android、iOS的功能，ui或逻辑都尽量在commonMain实现，问题是ui预览时相当麻烦，都要androidApp内的MainActivity设置@Preview后查看，那么多页面不知道大家平时怎么用预览的，太麻烦了。

2.通过网络链接下载文件到设备本地，目前下载是ktor库可回调进度，下载目录是参考coil它内部用FileSystem来处理文件，在commonMain内部不包含java的File类、FileOutputStrem,这里确实坑很不熟悉。后续我尝试放到相册和外部存储。

3.webview用kevinnzou的实现，这里有个大坑是和导航库voyager-navigator一起用会导致每次点击输入框都重新刷新网页，后面没办法用precompose导航了，但这玩意不足是传递参数时放在path后面会有截取，字符长度我看就300多，如果直接把实体对象转字符放到path后面就截取了，最后我在viewmodel里建个单例对象管理😂，那么页面的路由路径就可不带参数，要取参数直接从viewModel里拿。

4.json解析坑Json { isLenient = true ignoreUnknownKeys = true}构造器要设置参数，不然基本接口回调数据基本报错，还有涉及手动解析属性，封装jsonArray,都跟java不同，addJsonObject{putJsonArray(){}}。我那个要处理成😉{"pageNum":1,"pageSize":20,"query":"空调","mainRecommend":false,"first":false,"productTagParam":{"productName":"家用空调","tags":{"hp":["小1匹","3匹"],"color":["白色"],"series":["冷静享","星宇"]},"othersTags":[]}}

5.权限问题，dev.icerock.moko:mvvm-compose，Git只找到这个，没有人做权限库，在安卓那ComponentActivity下用它库的viewmodel绑定写法不会蹦，用FragmentActivity不会报bindeffect,但是我们要compose肯定是ComponentActivity，然后要写SampleViewModel，但是案例只每次申请一个权限，后续有需要自己改。iOS的注意info.list文件加入节点，因为iOS不算太了解，xcode内部的调试感觉太简陋了。

6.视频播放没看到有功能库，所以做桥接接口，Android用media3-exoplayer，iOS用AvPlayer各自原生实现，注意原生构建view只有一次，那么更新用AndroidView{ update={}},还有个释放资源问题，BackHandler{}内只能处理Android的，iOS没有这个响应，所以用 DisposableEffect(Unit) { onDispose { player.pause() }},不然退出页面还在播放😅

7.声明式ui，目前还不太熟悉，在用paging3做自动加载列表时，每次从详情页返回都重新刷新列表，后面是在Pager{}.flow.cacheIn(scope)就可以，但是页面的刷新次数貌似无法控制，要触发一些功能要写很多state去修改它的值进而remember状态发生变化自动更新ui，这里跟命令式代码差别很大，还有LaunchedEffect{}也常用。

8.用coil3加载超长图会oom，注意不是coil2，它官网根本都没发compose multiplatform对应的版本库，我是自己拼地址猜出来了，但是在开发中也可以依赖，目前应该还有很多不足。Android的com.github.piasy:BigImageViewer性能非常好，推荐单独集成Android内。

9.Android端集成第三方腾讯文档浏览服务，这个是要付费，跟包名绑定，这里我是要把文件链接下载到本地然后调用sdk功能打开pdf/doc等格式文件，涉及TbsFileSdk_dwg_universal_release这个aar依赖，我在手机连线打debug包时没问题，但是在generate signed apk时生成真正的release模式下apk时会报错，就是aar依赖导致的。我的改好了，自提代码大伙😉。

10.编译问题，Compose Multiplatform+Kotlin Multiplatfrom这套开发架构是我是基于Android来开发的，会jetpack compose就容易入手，对iOS很多不熟悉，网上很多都是单纯跑下一两个页面，实际项目一大堆业务合并拆分，编译会遇到各种问题，在AndroidStudio写完Android也能跑了，那么跑iOS模拟器网上很多有改写run configurations跑iosApp，那么真机呢！网上都没人搞，我尝试了当成iOS项目原生跑，用xcode 打开iOSApp文件夹内的iosApp.xcodeproj,编译过程没有配置开发者签名的话就会报错，根据编译过程的日志提示解决报错，很多情况是改info.list,不同版本xcode有很多配置问题，我这iOS17.4模拟器，真机17.4.1 ipad。

好用的库依赖

这里贴了项目中用到的库，筛选了很多类似的最后选用的库，版本基本最新。

compose 的热门库github收集

如下shared的build.gradle

plugins {
   
   
    alias(libs.plugins.kotlinMultiplatform)
    alias(libs.plugins.androidLibrary)
    alias(libs.plugins.jetbrainsCompose) //加了后重新编译，可以快捷引入compose的resource
    alias(libs.plugins.kotlinxSerialization)
    alias(libs.plugins.kotlinCocoapods) // 如果 IOS 使用 cocoapods，引入此插件
}

kotlin {
   
   
    androidTarget {
   
   
        compilations.all {
   
   
            kotlinOptions {
   
   
                jvmTarget = "11"
            }
        }
    }

    listOf(
        iosX64(),
        iosArm64(),
        iosSimulatorArm64()
    ).forEach {
   
   
        it.binaries.framework {
   
   
            baseName = "shared"
            isStatic = true
        }
    }

    sourceSets {
   
   
        commonMain.dependencies {
   
   
            //所有公共逻辑、ui都写在common模块，那么就必须要引用这里以kotlin写的库
            implementation(compose.runtime)
            implementation(compose.foundation)
            implementation(compose.material3)
            implementation(compose.ui)
            implementation(compose.components.resources)

            //多平台公共依赖库 https://www.5axxw.com/wiki/content/znqhcn
            implementation(libs.kotlin.datetime)

            //ios库无法获取以下
            implementation(compose.components.uiToolingPreview)

            //支持多平台的网络库
            implementation(libs.ktor.client.core) //网络请求
            implementation(libs.ktor.client.content.negotiation)
            implementation(libs.ktor.serialization.kotlinx.json)
            implementation(libs.ktor.client.cio)
            implementation(libs.ktor.client.logging)

            //依赖注入
            implementation(libs.koin.core)
            //页面导航  https://github.com/adrielcafe/voyager/tree/main
            implementation(libs.voyager.navigator)
            implementation(libs.voyager.koin)
            implementation(libs.voyager.tab.navigator)
            implementation(libs.voyager.bottom.navigator)
            implementation(libs.voyager.transitions)

            //另一个导航
            implementation(libs.precompose.navigator)
            implementation(libs.precompose.koin)
            implementation(libs.precompose.viewmodel)


            //异步图片加载   //这个版本还缺其他？
            implementation(libs.coil3.core)
            implementation(libs.coil3.ktor)
            implementation(libs.coil3.compose) //这个地址太坑了，官网没更新出来

            //异步协程库
            implementation(libs.kotlinx.coroutines.core)

            //https://github.com/KevinnZou/compose-webview-multiplatform/tree/main https://blog.csdn.net/weixin_51235693/article/details/133277648
            api(libs.compose.webviews)

            //权限 compose multiplatform https://github.com/icerockdev/moko-permissions
            implementation(libs.mokopermission)
            implementation(libs.mokopermission.compose)
            implementation(libs.stately.common)
            implementation(libs.mokoMvvmCore)
            implementation(libs.mokoMvvmCompose)

            //多平台uuid https://github.com/benasher44/uuid/tree/master 不知道怎么用
            implementation(libs.uuid)

            //日志库
            implementation(libs.logger.kermit)

            //key-value存储
            implementation(libs.multiplatform.settings)

            //https://github.com/KoalaPlot/koalaplot-core 图表库

            //页面自适配判断库
            implementation(libs.windowSize)

            //https://github.com/skydoves/FlexibleBottomSheet 从底部弹窗
            implementation(libs.bottomSheet)

            //分页库
            implementation(libs.paging.compose)

            //网络流的数据可存FileSystem
            implementation(libs.okio.core)

            //文件选择器
            implementation(libs