简介：本文深入探讨跨平台技术、跨平台UI框架及Kotlin Multiplatform在bilibili的实践，分析其技术优势、架构设计及实际成效，为开发者提供可借鉴的跨平台开发经验。

一、跨平台技术：从“重复造轮子”到“一次编写，多端运行”

1.1 传统开发模式的痛点

在移动互联网早期，企业需为iOS、Android、Web等多个平台分别组建开发团队，导致代码重复开发、功能同步困难、维护成本高昂。例如，bilibili早期需维护两套独立的客户端代码，功能迭代时需同步修改两个仓库，不仅效率低下，还容易因平台差异引入bug。

1.2 跨平台技术的演进

跨平台技术的核心目标是“Write Once, Run Anywhere”（一次编写，多端运行）。其演进可分为三个阶段：

第一阶段：Web容器方案（如Cordova、Ionic）：通过WebView嵌入Web页面，性能较差且UI体验与原生有差距。
第二阶段：原生渲染方案（如React Native、Flutter）：通过桥接或自绘引擎实现接近原生的性能，但UI一致性仍需优化。
第三阶段：共享逻辑层+原生UI（如Kotlin Multiplatform）：逻辑代码跨平台共享，UI层由各平台原生实现，兼顾开发效率与用户体验。

bilibili作为一家以视频社区为核心的平台，需同时支持iOS、Android、Web、桌面端（Windows/macOS）等多终端，跨平台技术成为其降本增效的关键。

二、跨平台UI框架：平衡效率与体验的挑战

2.1 主流跨平台UI框架对比

框架	技术原理	优势	劣势
React Native	JavaScript桥接原生组件	社区活跃，学习成本低	性能瓶颈，复杂动画支持差
Flutter	自绘引擎（Skia）	性能接近原生，UI一致性高	包体积大，学习曲线陡峭
Kotlin Multiplatform	共享逻辑层+原生UI	逻辑100%复用，UI完全原生	需配合各平台UI框架使用

bilibili在选型时需权衡开发效率、性能、维护成本等因素。例如，Flutter虽能实现UI一致性，但包体积增加可能影响用户下载意愿；React Native的桥接机制在复杂交互场景下易出现卡顿。

2.2 bilibili的UI框架实践

bilibili最终采用“Kotlin Multiplatform + 各平台原生UI”的方案，原因如下：

逻辑复用：核心业务逻辑（如视频播放、弹幕处理、账号系统）通过Kotlin Multiplatform共享，减少重复代码。
UI原生：iOS使用SwiftUI，Android使用Jetpack Compose，Web使用React，确保各平台UI符合设计规范。
渐进式迁移：优先将低风险模块（如用户中心、设置页）迁移至跨平台方案，逐步验证稳定性。

三、Kotlin Multiplatform：bilibili的跨平台实践

3.1 Kotlin Multiplatform的核心优势

Kotlin Multiplatform（KMP）是JetBrains推出的跨平台开发框架，其核心设计包括：

共享模块：通过commonMain目录编写跨平台代码，iosMain/androidMain等目录编写平台特定代码。
互操作性：与Java/Swift无缝互调，可调用原生API。
协程支持：内置协程库简化异步编程。

bilibili选择KMP的原因在于：

语言统一：Kotlin可同时用于后端（Spring Boot）和前端（Android/iOS），降低团队学习成本。
性能优化：逻辑层运行在原生环境，无桥接开销。
社区支持：JetBrains官方维护，生态逐渐完善。

3.2 bilibili的KMP架构设计

3.2.1 模块划分

bilibili将跨平台代码划分为三类模块：

基础模块：如网络请求（基于Ktor）、日志、加密等。
业务模块：如视频播放控制、弹幕协议解析。
UI辅助模块：如主题切换、国际化。

示例代码（共享网络层）：

// commonMain/src/NetworkClient.kt
expect class NetworkClient {
    suspend fun fetchVideoInfo(videoId: String): VideoInfo
}
// androidMain/src/NetworkClient.kt
actual class NetworkClient {
    actual suspend fun fetchVideoInfo(videoId: String): VideoInfo {
        return HttpClient(Android).get("https://api.bilibili.com/video/$videoId")
    }
}
// iosMain/src/NetworkClient.kt
actual class NetworkClient {
    actual suspend fun fetchVideoInfo(videoId: String): VideoInfo {
        return URLSession.shared.dataTask(with: URL(string: "https://api.bilibili.com/video/$videoId")!) { data, _, _ in
            // 解析数据
        }
    }
}

3.2.2 调试与测试

bilibili通过以下方式保障跨平台代码质量：

单元测试：使用Kotest编写共享测试用例。
UI测试：各平台分别运行Espresso（Android）/XCUITest（iOS）。
热重载：通过KMP插件实现代码修改后快速编译。

3.3 实践成效

代码复用率：核心逻辑代码复用率达70%，开发效率提升40%。
性能优化：视频播放启动时间缩短15%，弹幕同步延迟降低至50ms以内。
维护成本：Bug修复周期从平均3天缩短至1天。

四、挑战与解决方案

4.1 平台差异处理

问题：iOS/Android的权限申请、推送通知等API差异大。

方案：通过expect/actual机制抽象平台特定逻辑，例如：

expect fun requestCameraPermission(): Boolean
actual fun requestCameraPermission(): Boolean {
  // Android实现
  return ActivityCompat.checkSelfPermission(...) == PERMISSION_GRANTED
}

4.2 构建工具链优化

问题：KMP项目构建速度较慢。
方案：
- 使用增量编译（--incremental）。
- 将共享模块拆分为多个子模块，并行构建。

4.3 团队技能转型

问题：部分开发者不熟悉Kotlin。
方案：
- 内部培训：开展Kotlin协程、KMP最佳实践分享会。
- 代码审查：强制要求跨平台代码由资深开发者Review。

五、对开发者的建议

渐进式迁移：优先选择低风险模块（如工具类、网络层）进行跨平台改造。
关注性能：避免在共享模块中实现复杂UI逻辑，保留原生UI渲染。
利用社区资源：参考KMP官方样例（如KotlinConf App）加速开发。
测试覆盖：确保共享代码在各平台均通过测试，避免平台特定Bug。

六、未来展望

bilibili计划进一步扩大KMP的应用范围，包括：

桌面端适配：通过KMP统一Windows/macOS/Linux的逻辑代码。
Serverless集成：将KMP模块部署为AWS Lambda函数，实现全栈Kotlin。
AI能力下沉：在共享模块中集成视频推荐、弹幕过滤等AI模型。

跨平台技术已成为bilibili高效迭代、快速响应用户需求的核心支撑。通过Kotlin Multiplatform，bilibili在保障多端体验一致性的同时，显著降低了开发成本，为行业提供了可复制的跨平台实践范本。

跨平台技术赋能：Kotlin Multiplatform在bilibili的深度实践