Kuikly:腾讯基于 KMP 的跨平台框架,一套 Kotlin 代码覆盖六端

7 阅读5分钟

摘要:Kuikly 是腾讯公司级前端 Oteam 推出的基于 Kotlin Multiplatform(KMP)的跨平台 UI 与逻辑综合解决方案,支持 Android、iOS、HarmonyOS、Web 和微信小程序、Mac六大平台,已覆盖 QQ、QQ 音乐、QQ 浏览器、腾讯新闻、搜狗输入法等 20+ 产品,服务 5 亿+ 日活用户,覆盖 1000+ 页面。

GitHubgithub.com/Tencent-TDS…
Kotlin 版本:2.0.21 | 开源协议:Apache 2.0


一、什么是 Kuikly?

Kuikly(发音:/ˈkwɪkli/)是腾讯推出的跨平台开发框架,核心目标是实现「一套代码、五端通用」。

与 Flutter(Dart + 自绘引擎)、React Native(JS + 原生桥接)不同,Kuikly 选择了一条更激进的路线:

  • 语言:Kotlin(KMP 多平台编译)
  • 渲染:各平台原生渲染引擎(无自绘、无 JS 桥接损耗)
  • 产物:各平台原生二进制(.aar .framework ++++.so / .js

这意味着 Kuikly 页面在 Android 上就是真实的 View,在 iOS 上就是真实的 UIView,在鸿蒙上就是真实的 ArkUI 组件,性能与原生开发完全一致。


二、五端支持详情

平台渲染技术编译产物成熟度
AndroidAndroid View 系统(FrameLayout).aar✅ 正式稳定
iOSUIKit(UIView).framework✅ 正式稳定
HarmonyOS(鸿蒙)ArkUI.so✅ 正式稳定
Web(H5)浏览器 DOM.js🔶 Beta
微信小程序小程序 API + MiniDocument.js🔶 Beta

Web 和小程序处于 Beta 阶段,核心组件能力已支持。


三、架构原理:KMP + 平台原生渲染

Kuikly 采用「Kotlin 多平台 + 平台原生渲染」的混合架构,分为五层:

plaintext

┌─────────────────────────────────────────────┐
│         宿主与示例层(各平台 App)            │
├─────────────────────────────────────────────┤
│         UI 框架层(compose)                 │
├─────────────────────────────────────────────┤
│  平台渲染层(core-render-android/ios/ohos/web)│
├─────────────────────────────────────────────┤
│  编译支持层(core-annotations + core-ksp)   │
├─────────────────────────────────────────────┤
│         核心能力层(core,跨平台共享)        │
└─────────────────────────────────────────────┘

3.1 KMP 多平台源集结构

plaintext

src/
├── commonMain/       # 跨平台共享代码(90%+ 业务逻辑)
├── androidMain/      # Android 平台实现 → 输出 .aar
├── iosMain/          # iOS 平台实现 → 输出 .framework
├── ohosArm64Main/    # HarmonyOS 实现 → 输出 .so
├── jsMain/           # Web/小程序实现 → 输出 .js
└── nativeMain/       # iOS & HarmonyOS 共性代码

commonMain 通过 expect/actual 机制定义跨平台抽象,各平台 actual 实现差异化逻辑:

kotlin

// commonMain:expect 声明
expect inline fun <E> fastArrayListOf(): MutableList<E>

// androidMain:actual 实现
actual inline fun <E> fastArrayListOf(): MutableList<E> = arrayListOf()

// jsMain:actual 实现(高性能集合)
actual inline fun <E> fastArrayListOf(): MutableList<E> =
    if (CrossPlatFeature.isUseFastCollection) FastArrayList() else arrayListOf()

3.2 Bridge 通信机制

Kuikly 通过 BridgeManager 统一管理 Kotlin 与原生平台的双向通信:

  • Android:接口定义 + 委托模式(NativeBridgeDelegate
  • iOS:Objective-C 协议
  • HarmonyOS:Kotlin/C 绑定
  • Web/小程序:回调注册机制

plaintext

Kotlin 业务代码
    ↓ Module.syncToNativeMethod()
BridgeManager
    ↓ onCallNative()
NativeBridge(各平台实现)
    ↓
Android / iOS / ArkUI / DOM
    ↓ onCallKotlin()(回调)
Kotlin 业务代码

3.3 KSP 编译时代码生成

Kuikly 使用 KSP(Kotlin Symbol Processing)在编译期自动扫描 @Page 注解,生成路由注册代码,零手写初始化

kotlin

// 开发者只需添加注解
@Page(name = "HomePage")
class HomePage : BaseComposePage() { ... }

// KSP 自动生成(无需手写)
class KuiklyCoreEntry {
    fun triggerRegisterPages() {
        router.registerPage("HomePage", HomePage::class)
    }
}

四、两种编程范式

Kuikly 支持两种 DSL 风格,开发者可按需选择:

4.1 Kuikly DSL(原生声明式)

kotlin

// Kuikly DSL 风格(core 模块)
@Page(name = "DemoPage")
class DemoPage : Pager() {
    override fun body(): ViewBuilder {
        return {
            Text {
                attr {
                    text("Hello Kuikly")
                    fontSize(32f)
                    color(Color.BLACK)
                }
            }
        }
    }
}

4.2 Compose DSL(基于 Jetpack Compose)

kotlin

// Compose DSL 风格(compose 模块,包名 com.tencent.kuikly.compose)
@Page(name = "HomePage")
class HomePage : ComposeContainer() {
    override fun willInit(activity: KuiklyActivity) {
        super.willInit(activity)
        activity.setContent {
            ComposeRoot {
                Box(
                    modifier = Modifier
                        .fillMaxSize()
                        .background(Color.White),
                    contentAlignment = Alignment.Center
                ) {
                    Text(
                        text = "Hello Kuikly",
                        fontSize = 32.sp,
                        color = Color.Black
                    )
                }
            }
        }
    }
}

Compose DSL 基于 Jetpack Compose 1.7.3 适配,包名调整为 com.tencent.kuikly.compose,熟悉 Jetpack Compose 的开发者可以零学习成本上手。


五、与主流跨平台框架对比

对比维度KuiklyFlutterReact Nativeuni-app
开发语言KotlinDartJavaScript/TypeScriptVue/JS
渲染方式平台原生渲染自绘引擎(Skia/Impeller)原生桥接渲染WebView / 原生
性能⭐⭐⭐⭐⭐ 原生级⭐⭐⭐⭐ 接近原生⭐⭐⭐ 有桥接损耗⭐⭐⭐
代码复用率90%+95%+85%+90%+
鸿蒙支持✅ 正式🔶 有限🔶
小程序支持✅ Beta
动态化✅ 支持
与原生融合✅ 无缝🔶 需 PlatformView🔶

Kuikly 的核心差异化优势

  1. Kotlin 生态:Android 开发者零门槛,可复用 Kotlin 协程、数据类等全部生态
  2. 真原生渲染:无自绘引擎,无 JS 桥接,各平台直接调用原生 API
  3. 鸿蒙一等公民:鸿蒙支持是正式稳定版本,非实验性功能
  4. 动态化能力:支持 Bridge 运行时通信,具备动态下发能力

六、快速上手(30 分钟跑通 Hello World)

6.1 环境准备

plaintext

- JDK 17(Android Studio >= 2024.2.1 需手动切换)
- Android Studio + Kotlin 插件 + Kotlin Multiplatform 插件 + Kuikly 插件
- iOS:Xcode + CocoaPods(sudo gem install cocoapods)
- HarmonyOS:DevEco Studio 5.1.0+(API Version >= 18)
- Web/小程序:Node.js + 微信开发者工具

6.2 Gradle 配置

kotlin

// build.gradle.kts
plugins {
    kotlin("multiplatform")
    id("com.google.devtools.ksp") version "1.9.22-1.0.17"
}

dependencies {
    add("kspCommonMainMetadata", "com.tencent.kuikly:core-ksp:1.0.0")
}

6.3 创建第一个页面

kotlin

// commonMain/kotlin/com/example/HomePage.kt
@Page(name = "HomePage")
class HomePage : ComposeContainer() {

    override fun willInit(activity: KuiklyActivity) {
        super.willInit(activity)
        activity.setContent {
            ComposeRoot {
                Box(
                    modifier = Modifier
                        .fillMaxSize()
                        .background(Color.White),
                    contentAlignment = Alignment.Center
                ) {
                    Text(
                        text = "Hello, Kuikly!",
                        fontSize = 32.sp
                    )
                }
            }
        }
    }
}

6.4 Android 宿主启动

kotlin

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        KuiklyCoreEntry.triggerRegisterPages() // KSP 自动生成
        KuiklyRouter.openPage("HomePage")
    }
}

八、总结

Kuikly 是目前少数能同时覆盖 Android、iOS、鸿蒙、Web、小程序五端的 Kotlin 原生跨平台框架。其核心价值在于:

  • 真原生性能:各平台生成原生二进制,无虚拟机/JS 引擎开销
  • 90%+ 代码复用commonMain 统一业务逻辑,expect/actual 隔离差异
  • 零初始化成本:KSP 编译时自动生成路由注册代码
  • 双 DSL 支持:Kuikly DSL + Compose DSL,兼顾不同团队习惯
  • 腾讯级验证:5 亿+ DAU,20+ 产品,1000+ 页面的生产环境验证

开源地址github.com/Tencent-TDS…

官网: kuikly.tds.qq.com/Introductio…


本文基于 Kuikly 开源代码(Kotlin 2.0.21)及官方文档撰写,技术细节以 GitHub 仓库最新版本为准。