当接触一个新知识时,想要直观体验一下效果的,就会找一些现成的项目里面试试水。
开始的时候,我就在 官方样例 找了几个项目,试着编译一下,有些项目是编译各种问题,有些项目编译成功了,可是业务逻辑也比较多,不利于理解项目结构。
后面又试了Kotlin Multiplatform插件的模板,但是只有安卓和iOS。
在各种各种项目的试水过程中,最终找到了一个我认为对新手最友好的Hello World —— Kotlin Multiplatform Wizard ,可以一键创建好 四端项目,清晰明了。接下来我就讲一下创建运行过程。
想了解更多Compose Multiplatform,也可以看看其他文章
- Compose Multiplatform 之旅 — 启程
- Compose Multiplatform 之旅 — 项目初探
- Compose Multiplatform 之旅 —做一个自己的项目(别踩白块)
- Compose Multiplatform 之旅—看看大佬在做啥
- Compose Multiplatform 之旅—为什么可以跨平台
- Compose Multiplatform 之旅—声明式UI
- Compose Multiplatform 之旅—跳转、导航(Voyager)
- Compose Multiplatform 之旅 — 数据存储(multiplatform-settings、sqldelight)
- Compose Multiplatform 之旅 — 网络请求(Ktor)
- Compose Multiplatform 之旅 — 图标、图片展示(coil)
安装插件
- 打开Android Studio的settings
- 找到Plugins
- 在Marketplace 搜索 Kotlin Multiplatform Wizard 插件
- 选择改插件 点击Install 即可
创建项目
- 新建项目 点击 New Project
- 在模板中找到Generic 选择Kotlin Multiplatform ,点击Next
- 配置好项目基本信息
- 选择你要创建的哪些平台,这里为了体验CMP我Android、IOS、桌面、网页端都选择了
- 至此,你就创建好了一个四端都能运行的项目了!(此处应有掌声)
运行项目
Android
连接好Android 设备,点击Android Studio的运行按钮,默认就是运行的安卓项目
IOS
- 先用Xcode 打开,项目里面iosApp
- 创建一个模拟器 或者连接好手机
- 直接运行此时会报错,需要选择一个team,或者用你的Apple Id创建一个team
- 创建好后,Bundle Identifier 也要选择和team的bundle id 对应
- 再次运行,你的iOS APP 也好了
- 后续也可以在Android Studio上 选择iOS APP直接运行了
桌面
Gradle 任务列表找到 Compose App 的 desktopRun
运行时,某些设备可能会出现下面错误:
No main class specified and classpath is not an executable jar.
可以在Edit Configurations中,粘贴下面命令在 Config的 Run中
desktopRun -DmainClass=com.example.composeApp.MainKt --quiet
再次运行,就可以看到桌面端的运行效果啦~
web
Gradle 任务列表找到 wasmJsBrowserRun,执行任务
就能在网页端 http://localhost:8080/ 看到效果啦
鸿蒙
目前Compose Multiplatform 目前还没有看到官方提供的方案,不过找到一个 Feature ,希望在未来不管是官方支持,还是社区共建,能够支持上鸿蒙,成为遥遥领先的 Compose Multiplatform 跨平台方案。
结语
目前刚开始入门Compose Multiplatform之旅,希望能够继续更新Compose Multiplatform系列文章,也能和各位大佬多多交流,共同进步!