Compose Multiplatform 之旅 — 启程

1,577 阅读3分钟

当接触一个新知识时,想要直观体验一下效果的,就会找一些现成的项目里面试试水。

开始的时候,我就在 官方样例 找了几个项目,试着编译一下,有些项目是编译各种问题,有些项目编译成功了,可是业务逻辑也比较多,不利于理解项目结构。

后面又试了Kotlin Multiplatform插件的模板,但是只有安卓和iOS。

在各种各种项目的试水过程中,最终找到了一个我认为对新手最友好的Hello World —— Kotlin Multiplatform Wizard ,可以一键创建好 四端项目,清晰明了。接下来我就讲一下创建运行过程。

想了解更多Compose Multiplatform,也可以看看其他文章

安装插件

  • 打开Android Studio的settings
  • 找到Plugins
  • 在Marketplace 搜索 Kotlin Multiplatform Wizard 插件
  • 选择改插件 点击Install 即可

Pasted image 20241121201435.png

创建项目

  • 新建项目 点击 New Project
  • 在模板中找到Generic 选择Kotlin Multiplatform ,点击Next

Pasted image 20241121201617.png

  • 配置好项目基本信息
  • 选择你要创建的哪些平台,这里为了体验CMP我Android、IOS、桌面、网页端都选择了

Pasted image 20241121201932.png

  • 至此,你就创建好了一个四端都能运行的项目了!(此处应有掌声)

运行项目

Android

连接好Android 设备,点击Android Studio的运行按钮,默认就是运行的安卓项目

img_v3_02gr_e167c6ff-7021-4037-bac6-1e17b334d23g.jpg

IOS

  • 先用Xcode 打开,项目里面iosApp
  • 创建一个模拟器 或者连接好手机
  • 直接运行此时会报错,需要选择一个team,或者用你的Apple Id创建一个team
  • 创建好后,Bundle Identifier 也要选择和team的bundle id 对应
Pasted image 20241121204655.png
  • 再次运行,你的iOS APP 也好了
img_v3_02gr_1275456c-8d04-4bc3-b974-336d5658e8ag.jpg
  • 后续也可以在Android Studio上 选择iOS APP直接运行了
Pasted image 20241121205525.png

桌面

Gradle 任务列表找到 Compose App 的 desktopRun

Pasted image 20241121200240.png

运行时,某些设备可能会出现下面错误:

No main class specified and classpath is not an executable jar. 

可以在Edit Configurations中,粘贴下面命令在 Config的 Run中

desktopRun -DmainClass=com.example.composeApp.MainKt --quiet

Pasted image 20241121200624.png

再次运行,就可以看到桌面端的运行效果啦~

Pasted image 20241121201102.png

web

Gradle 任务列表找到 wasmJsBrowserRun,执行任务

Pasted image 20241121205810.png

就能在网页端 http://localhost:8080/ 看到效果啦

Pasted image 20241121210146.png

鸿蒙

目前Compose Multiplatform 目前还没有看到官方提供的方案,不过找到一个 Feature ,希望在未来不管是官方支持,还是社区共建,能够支持上鸿蒙,成为遥遥领先的 Compose Multiplatform 跨平台方案。

结语

目前刚开始入门Compose Multiplatform之旅,希望能够继续更新Compose Multiplatform系列文章,也能和各位大佬多多交流,共同进步!