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

原创

墨雨

修改于 2026-04-24 14:45:46

730

摘要：Kuikly 是腾讯公司级前端 Oteam 推出的基于 Kotlin Multiplatform（KMP）的跨平台 UI 与逻辑综合解决方案，支持 Android、iOS、HarmonyOS、Web 和微信小程序、Mac六大平台，已覆盖 QQ、QQ 音乐、QQ 浏览器、腾讯新闻、搜狗输入法等 20+ 产品，服务 5 亿+ 日活用户，覆盖 1000+ 页面。 GitHub：https://github.com/Tencent-TDS/KuiklyUI 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 组件，性能与原生开发完全一致。

二、五端支持详情

平台	渲染技术	编译产物	成熟度
Android	Android View 系统（FrameLayout）	.aar	✅ 正式稳定
iOS	UIKit（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 的开发者可以零学习成本上手。

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

对比维度	Kuikly	Flutter	React Native	uni-app
开发语言	Kotlin	Dart	JavaScript/TypeScript	Vue/JS
渲染方式	平台原生渲染	自绘引擎（Skia/Impeller）	原生桥接渲染	WebView / 原生
性能	⭐⭐⭐⭐⭐ 原生级	⭐⭐⭐⭐ 接近原生	⭐⭐⭐ 有桥接损耗	⭐⭐⭐
代码复用率	90%+	95%+	85%+	90%+
鸿蒙支持	✅ 正式	🔶 有限	❌	🔶
小程序支持	✅ Beta	❌	❌	✅
动态化	✅ 支持	❌	✅	✅
与原生融合	✅ 无缝	🔶 需 PlatformView	✅	🔶

Kuikly 的核心差异化优势：

Kotlin 生态：Android 开发者零门槛，可复用 Kotlin 协程、数据类等全部生态
真原生渲染：无自绘引擎，无 JS 桥接，各平台直接调用原生 API
鸿蒙一等公民：鸿蒙支持是正式稳定版本，非实验性功能
动态化能力：支持 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")
    }
}