[保姆级教程] 创建第一个jetpack compose 跨平台项目

文章目录

一、创建步骤

1. 使用创建向导创建项目框架

3. 解压下载后的压缩包到自己想要创建项目的位置

4. 使用你喜欢的IDE打开该项目

5. 等待gradle加载完成后

6. 加载之前随便改一下commMain，试一下跨平台效果

7. 运行效果

二、错误记录

1. 在`safari`上运行报错 Uncaught runtime errors:

2. app、android中文没问题，但web乱码。

参考‍‍‍‍

一、创建步骤

1. 使用创建向导创建项目框架

打开跨平台项目创建向导：https://kmp.jetbrains.com

2. 输入项目信息及想要支持的平台后点击Download

3. 解压下载后的压缩包到自己想要创建项目的位置

4. 使用你喜欢的IDE打开该项目

这里我用jetbrains的新一代IDE fleet打开。主打一个支持新技术。

5. 等待gradle加载完成后

点击运行就可以看到之前创建时选中的那几个配置平台。

6. 加载之前随便改一下commMain，试一下跨平台效果

这个文件是所有平台加载的UI文件

然后随便添加一个文本组件

7. 运行效果

二、错误记录

1. 在safari上运行报错 Uncaught runtime errors:

WebAssembly.Module doesn’t parse at byte 406: can’t get 0th Type’s return value

根据控制台输出提示，查看当前支持的浏览器，当前web兼容的浏览器

可以看到对safari的支持正在开发中。。。

可以选择其中受支持的浏览器调试，如谷歌、火狐。

2. app、android中文没问题，但web乱码。

参考 github的这个issue

无非是手动加载了一个中文字体包。

把解决的代码拷贝到这里了，方便移植：

@OptIn(ExperimentalResourceApi::class)

suspend fun loadCjkFont(): FontFamily {

val regular = resource("font/NotoSansCJKsc-Regular.ttf").readBytes()

val bold = resource("font/NotoSansCJKsc-Bold.ttf").readBytes()

val italic = resource("font/NotoSansCJKsc-Italic.ttf").readBytes()

return FontFamily(

Font(identity = "CJKRegular", data = regular, weight = FontWeight.Normal),

Font(identity = "CJKBold", data = bold, weight = FontWeight.Bold),

Font(identity = "CJKItalic", data = italic, style = FontStyle.Italic),

)

}

@Composable

fun App() {

var typography by remember { mutableStateOf<Typography?>(null) }

LaunchedEffect(Unit) {

val font = loadCjkFont()

typography = Typography(defaultFontFamily = font)

}

MaterialTheme(typography = typography ?: MaterialTheme.typography) {...

}

}

注意事项

需要手动去下载喜欢的中文包

它这个example修改的是刚我们修改的App.kt文件

个人觉得既然只是web有问题，只修改web相关的字体就可以了

如果想各平台保持统一的字体，可以根据事例修改App.kt

参考‍‍

官方文档：

https://www.jetbrains.com/help/kotlin-multiplatform-dev/compose-multiplatform-getting-started.html