第 0 章 Kuikly 学习计划：从 0 到 1 的 14 天路线图

本章目的：在你写第一行 Kuikly 代码之前，先告诉你「这条路要走多久、长什么样、容易在哪摔跤、学完后能做什么」。把地图看清楚再上路，路上才不慌。

---

0.1 学习这件事，先想清楚 4 个问题

0.1.1 你为什么学 Kuikly？

不同动机决定了不同的学习侧重点：

动机	重点章节	可以略过的部分
公司要从 RN/Flutter 迁到 Kuikly，临时学	1-6 章 + 8 章	7 章原理细节、9 章动态化
个人想学跨端框架，先尝鲜国产方案	1-7 章按顺序	9 章动态化（生产环境再看）
准备 Android 高级 / 跨端岗位面试	1、5、6、7、9 章	10 章实战可以跳读
写过 Compose，想把项目扩到 iOS / 鸿蒙	1、2、7、8、10 章	4 章基础组件可快速过
团队架构师做技术选型	1、7、8、9 章	4-6 章基础语法可跳过
完全零基础（连 Kotlin 都没写过）	先学 Kotlin！ 看本仓库 kotlin/	直接来 Kuikly 会被 DSL 劝退

📌 小白建议：本笔记假设你至少会 Kotlin 基础语法（变量、类、Lambda、扩展函数）。如果 Kotlin 都不熟，请先去隔壁 kotlin/ 目录花一周补完，再回来。

0.1.2 你已经会什么？

你的背景	上手 Kuikly 速度	难点会出现在哪
Android（Kotlin + Compose）	1-2 天能写页面	适应 attr/event 分离、Flexbox 布局思维
Android（Java + 传统 View）	3-5 天	先要补 Kotlin Lambda + DSL 的写法
iOS（Swift / SwiftUI）	5-7 天	Kotlin 生态、Gradle 工具链、KMP 编译流程
前端（React / Vue）	5-7 天	静态类型、Kotlin 语法、多端打包
写过 RN / Flutter	3-5 天	KMP 心智模型、原生渲染 vs JS Bridge / 自绘
完全零基础	不建议直接学，先补 Kotlin	几乎所有概念都要从头学

0.1.3 你能投入多少时间？

本笔记规划是 每天 1.5–2 小时，14 天能走完。如果你只能每天半小时，就翻倍到 28 天。

💡 重要心法：不要"看完笔记 = 学会"。Kuikly 是个工程框架，每章结束你必须能把 code/ 里的代码闭着眼睛在 Android Studio 跑出来，否则就再来一遍。

0.1.4 学完之后你需要什么样的电脑？

   ┌────────────────────────────────────────────────────────┐
   │  最低配置（写 Android + iOS 必需）                      │
   ├────────────────────────────────────────────────────────┤
   │  操作系统：macOS（Apple Silicon 或 Intel 都行）         │
   │  Mac 是因为 iOS / macOS 端只能在 Mac 上编译             │
   │  内存：≥ 16 GB（8 GB 装完 IDE 就剩两口气）              │
   │  磁盘：≥ 50 GB 空闲（Android SDK + Xcode 巨耗空间）     │
   │  JDK：11+（17 最稳）                                    │
   │  Android Studio：Hedgehog（2023.1）以上                 │
   │  Xcode：15+ （iOS / macOS 端需要）                      │
   └────────────────────────────────────────────────────────┘
   ┌────────────────────────────────────────────────────────┐
   │  只想跑 Android 端的最小配置                            │
   ├────────────────────────────────────────────────────────┤
   │  Windows / Linux / macOS 都可以                         │
   │  内存 ≥ 8 GB；JDK 11+；Android Studio Hedgehog +        │
   └────────────────────────────────────────────────────────┘

📌 如果你没 Mac：完全可以先在 Windows 上学完 1-7 章和实战项目，iOS 端等以后有 Mac 再编译。Kuikly 的"业务代码"在 commonMain 里，不依赖任何平台特性。

---

0.2 整体路线图（14 天）

                              ★ Kuikly 14 天通关图 ★

   Day 1-2          Day 3-5            Day 6-8           Day 9-11        Day 12-14
   ┌─────────┐     ┌─────────┐        ┌─────────┐       ┌──────────┐    ┌──────────┐
   │  入门    │────►│  写界面  │───────►│  数据驱动│──────►│  深入原理 │───►│  实战    │
   │ 1-2 章  │     │ 3-4 章  │        │ 5-6 章  │       │ 7-9 章   │    │ 10 章   │
   └─────────┘     └─────────┘        └─────────┘       └──────────┘    └──────────┘
   能跑通          能写"像 Kuikly"     能用响应式        能讲清架构      能交付项目
   Hello Kuikly   的静态页面           做出动态页面      原理与桥接      上简历

阶段 1：入门（Day 1-2，第 1-2 章）

目标：理解 Kuikly 的「为什么」，搭好开发环境，能在 Android 模拟器上看到 "Hello Kuikly" 字样。

• ✅ 能向同事用一句话解释「Kuikly 跟 Flutter / RN 的区别」
• ✅ 用 create-kuikly-app CLI 创建出一个工程
• ✅ 跑起来 Android Demo，看到 Hello World

容易摔跤的地方：

• JDK 版本不对（必须 11+）
• 国内网络拉不下来 Maven 依赖（需要切到腾讯镜像）
• Android Studio 报 Plugin requires Kotlin x.x.x

阶段 2：写界面（Day 3-5，第 3-4 章）

目标：理解 Kuikly DSL 的"招式"，能写出按钮、列表、图文混排等静态页面。

• ✅ 看到 View { attr {} event {} } 不再发懵
• ✅ 能用 Flexbox 布局摆出一行三列的导航栏
• ✅ 能用 Text / Image / Input 做个搜索框

容易摔跤的地方：

• 把 attr 当成 Compose 的 Modifier 链式写，会编译报错
• Flexbox 跟 Compose 的 Row/Column 思维不一样
• 颜色用 Color(0xFF4CAF50L) 而不是 Color(0xFF4CAF50)，少个 L 编译就挂

阶段 3：数据驱动（Day 6-8，第 5-6 章）

目标：搞懂响应式状态，能让 UI 跟着数据自动变化；能渲染长列表。

• ✅ 理解 by observable(0) 这一行做了什么
• ✅ 能写一个计数器：点击按钮，文本数字 +1
• ✅ 能用 vfor + List 渲染 1000 条数据不卡顿
• ✅ 知道为什么"在 body() 里直接读 ctx.xxx.toString() 存到中间变量"会挂

容易摔跤的地方：

• 响应式字段不能 提前取值 缓存（取值瞬间脱离响应式追踪）
• observableList 的 add/remove 才会触发更新，整个赋值不行
• vfor 里写复杂 if/else，不如拆成多个 vif

阶段 4：深入原理（Day 9-11，第 7-9 章）

目标：能跟面试官把 Kuikly 的架构原理讲明白；能调用平台原生 API。

• ✅ 能画出 Kuikly 的「两棵树」架构图
• ✅ 能解释 callKotlin / callNative 的指令通信流程
• ✅ 能写一个 Module 调用 Android 系统的 Toast
• ✅ 知道动态化是怎么做的（KSP + 产物分发）

容易摔跤的地方：

• 把"两棵树"和 Flutter 的"三棵树"搞混
• KSP / KAPT 概念不熟，看不懂注解处理流程
• expect/actual 在 Kuikly 里其实很少直接用，主要用 Module 桥接

阶段 5：实战（Day 12-14，第 10 章）

目标：把所有知识串起来，做一个能写到简历上的「迷你小红书」跨端项目。

• ✅ 实现：首页瀑布流 + 详情页 + 收藏功能
• ✅ 用上：响应式状态、长列表、网络请求 Module、平台原生 API（如分享）
• ✅ 跑通：Android + iOS（如有 Mac）+ Web（如时间充裕）

---

0.3 每章统一的学习方法

每一章都按这个流程走，效率最高：

   ┌────────────────────────────────────────────────────────────┐
   │  Step 1   通读文档（30-45 min）                              │
   │  ───────────────────────────────────────────────────        │
   │  目标：搞懂"为什么这么设计"。先记概念，不抠细节。               │
   ├────────────────────────────────────────────────────────────┤
   │  Step 2   打开浏览器看 demo.html（10 min）                    │
   │  ───────────────────────────────────────────────────        │
   │  目标：把 DSL / 渲染流程 / 响应式机制等抽象概念可视化。           │
   ├────────────────────────────────────────────────────────────┤
   │  Step 3   把 code/ 下的代码搬到工程里跑（30-60 min）           │
   │  ───────────────────────────────────────────────────        │
   │  目标：肌肉记忆 + 看到真实运行效果。**禁止只复制粘贴**！          │
   ├────────────────────────────────────────────────────────────┤
   │  Step 4   做章末面试题（20 min）                              │
   │  ───────────────────────────────────────────────────        │
   │  目标：检验是否真的会了。答不上来回去再读一遍文档。              │
   ├────────────────────────────────────────────────────────────┤
   │  Step 5   改一个小变体（30 min）                               │
   │  ───────────────────────────────────────────────────        │
   │  目标：把知识"用进自己脑子里"。比如"如果列表加上下拉刷新呢"。    │
   └────────────────────────────────────────────────────────────┘

💡 生活化类比：学跨端框架就像学开车。只看交规手册（看文档）永远学不会，必须上路（写代码）；上路也别只在停车场挪车，必须在主路上被堵过、追过尾、走错过道，才记得住。

---

0.4 学完之后能干什么

方向	你可以做的事
个人小项目	一个人独立做一个「一码 5 端」的工具类 App（记账、ToDo、笔记）
公司项目	把现有 Android 业务页面"复刻"到 iOS / 鸿蒙 / 小程序
面试	能跟面试官聊清楚 Kuikly vs Flutter vs RN 的架构差异
阅读源码	看 Tencent-TDS/KuiklyUI 仓库不再"打开就关"
团队选型	能给团队拍板：业务场景适不适合 Kuikly
二次开发	写自定义 Module、自定义平台渲染组件

---

0.5 常见误区 & 心态建议

误区 1：「Kuikly = Compose Multiplatform」

错。 两者都基于 KMP，但渲染方案完全不同：

• Compose Multiplatform：用 Skia 自绘，类似 Flutter
• Kuikly：用各平台原生控件渲染，类似 RN

Kuikly 的 Compose DSL 是复用 Compose 的 API 形式，但底层渲染走自己的两棵树 → 原生控件，不走 Skia。

误区 2：「会 Compose 就直接会 Kuikly」

部分对，部分错。 如果你用 Kuikly 的 Compose DSL，思维确实很接近；但用 自研 DSL（attr/event 分离），需要重新适应：

• Compose：Modifier 链式 + Row/Column
• Kuikly 自研 DSL：attr {} 块 + Flexbox

误区 3：「跨端框架 = 一次写完，处处通用」

别天真。 即使是 Kuikly，90% 业务逻辑通用，但仍有 10% 需要平台差异化处理：

• 系统 API（拍照、推送、定位）需要写 Module 桥接
• 不同平台的 UI 设计规范不同（iOS 用滑动返回、Android 用 Material 风格）
• 性能调优策略各端不一样

心态建议

🌱 遇到看不懂就先跳过。Kuikly 涉及 KMP / Gradle / 原生工具链 / 各平台 API 一堆生态，第一次学 30% 不懂正常，第二轮回头再看会豁然开朗。

🔥 别老跟 Flutter / RN 对比。前期对比助理解，后期"用 RN 思维写 Kuikly"反而是阻碍。

🛠 多动手，少抬杠。跨端框架社区永远有"X 比 Y 好"的口水战，能不能解决业务问题最重要。

---

0.6 学习资源清单

入门

• 📖 本笔记 第 1-10 章
• 📺 腾讯云开发者社区 · Kuikly 系列 —— 官方科普
• 🌐 Kuikly Playground 官方文档 —— 边读边照抄

进阶

• 🐙 GitHub · Tencent-TDS/KuiklyUI —— 源码 + Demo
• 📦 npm · create-kuikly-app —— 脚手架，AI Agent 友好
• 📖 Kotlin Multiplatform 官方文档 —— KMP 是底层
• 📖 Compose Multiplatform 官方文档 —— 对比着看更深刻

架构 / 原理

• 📺 腾讯 IMWeb 团队公开课 —— 搜「Kuikly 架构」
• 📖 《Kuikly 跨端框架原理与实战》（系列文章）
• 🔗 跨端框架对比：Flutter vs RN vs Kuikly vs Compose MP

实战 / 案例

• 💼 GitHub 搜 kuikly 关键字，看开源样例（注意 star 数辨别质量）
• 🎤 QQ 音乐 / QQ 浏览器 Kuikly 落地分享 —— 大厂真实案例

---

0.7 学完一个 self-check 清单

走完 14 天，请用下面这份 checklist 验收自己。打 ≥ 8 个勾代表"基础合格"。

• [ ] 能用一段话解释「Kuikly 与 Flutter / RN 的核心架构差异」
• [ ] 能从零创建一个 Kuikly 工程，跑通 Android 端 Hello World
• [ ] 能解释 Pager、ViewBuilder、attr、event 各自的角色
• [ ] 能用 Flexbox 摆出复杂布局（一行三列、左图右文等）
• [ ] 能写出 private var counter by observable(0) 并解释响应式原理
• [ ] 能用 vfor 渲染 1000 条数据，并在面试时讲出"为啥不用 for 循环"
• [ ] 能画出 Kuikly 的「两棵树 + 渲染指令」架构图
• [ ] 能写一个 Module，调用 Android 系统 Toast 并返回结果给 Kotlin 层
• [ ] 知道 Kuikly 动态化的产物形态和加载流程
• [ ] 能独立完成第 10 章的「迷你小红书」项目，并加 1 个新功能（如评论）

🎉 打满 10 个勾：恭喜，可以投腾讯系跨端岗位简历了！ 😅 不到 5 个勾：别气馁，回去把对应章节再走一遍，重点反复练 5、6、7 章。

---

下一站 → 第 1 章 · Kuikly 是什么 →