摘要:Kuikly 是腾讯公司级前端 Oteam 推出的基于 Kotlin Multiplatform(KMP)的跨平台 UI 与逻辑综合解决方案,支持 Android、iOS、HarmonyOS、Web 和微信小程序、Mac六大平台,已覆盖 QQ、QQ 音乐、QQ 浏览器、腾讯新闻、搜狗输入法等 20+ 产品,服务 5 亿+ 日活用户,覆盖 1000+ 页面。
GitHub:github.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 组件,性能与原生开发完全一致。
二、五端支持详情
| 平台 | 渲染技术 | 编译产物 | 成熟度 |
|---|---|---|---|
| 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")
}
}
八、总结
Kuikly 是目前少数能同时覆盖 Android、iOS、鸿蒙、Web、小程序五端的 Kotlin 原生跨平台框架。其核心价值在于:
- ✅ 真原生性能:各平台生成原生二进制,无虚拟机/JS 引擎开销
- ✅ 90%+ 代码复用:
commonMain统一业务逻辑,expect/actual隔离差异 - ✅ 零初始化成本:KSP 编译时自动生成路由注册代码
- ✅ 双 DSL 支持:Kuikly DSL + Compose DSL,兼顾不同团队习惯
- ✅ 腾讯级验证:5 亿+ DAU,20+ 产品,1000+ 页面的生产环境验证
官网: kuikly.tds.qq.com/Introductio…
本文基于 Kuikly 开源代码(Kotlin 2.0.21)及官方文档撰写,技术细节以 GitHub 仓库最新版本为准。