第 2 章 · 环境搭建 — 可视化演示

点 tab 切换。本章帮你"走完"从环境检查到看见 Hello Kuikly 的全流程。

典型 Kuikly 工程长这样

注意紫色的 shared 模块和黄色的各端宿主壳是两类不同的角色。

📦 MyFirstKuikly/
├─📄 settings.gradle.kts Gradle 多模块配置
├─📄 build.gradle.kts 根项目配置
├─📄 gradle.properties JVM 内存等参数
├─📂 buildSrc/ 集中管理版本号
│ └─📄 KotlinBuildVar.kt Kotlin / Kuikly 版本
├─📂 shared/ ★ 跨端业务代码主战场（KMP 模块）
│ ├─📄 build.gradle.kts
│ └─📂 src/
│ ├─📂 commonMain/ 所有平台共享
│ │ └─📄 HomePage.kt @Page("HomePage")
│ ├─📂 androidMain/ Android 平台特有
│ ├─📂 iosMain/ iOS 平台特有
│ └─📂 ohosArm64Main/ 鸿蒙平台特有
├─📂 androidApp/ Android 宿主壳，集成 .aar
│ ├─📄 AndroidManifest.xml
│ ├─📄 MainActivity.kt
│ └─📄 KuiklyApplication.kt
├─📂 iosApp/ iOS 宿主壳，集成 .framework
├─📂 ohosApp/ 鸿蒙宿主壳
├─📂 h5App/ H5 宿主壳
└─📂 miniApp/ 小程序宿主壳
记忆口诀：「紫色 shared 写一份，黄色 xxxApp 各一个」。业务代码必须写在 commonMain，宿主壳只是"借壳运行"。

3 类目录的对比

目录语言能引用 Android API 吗？编译产物
shared/commonMainKotlin❌ 不能跨端中间产物
shared/androidMainKotlin✅ 可以合并到 .aar
shared/iosMainKotlin❌（可以用 Apple 平台 API）合并到 .framework
androidApp/Kotlin / Java✅ 可以.apk

kuikly doctor 检查项

点击下面的按钮，模拟跑一次 doctor 检查（每次随机生成"模拟环境状态"）。

记住红绿灯：必装的（前 4 项）必须✅ 才能继续；按需的（iOS / 鸿蒙等）按你的目标平台来。

kuikly create 在做什么？

点"开始创建"模拟运行 kuikly create MyFirstKuikly，你能看到脚手架内部 5 步具体做了什么。

点击上方按钮开始模拟...

从 App 启动到 Kuikly 页面渲染的全流程

点击"开始"逐步演示。注意每一步都标注了谁在做什么。

1 App 启动 → MainActivity.onCreate
用户点击 App 图标，Android 系统启动 MainActivity（壳 Activity）。
2 triggerRegisterPages() 注册路由
KSP 在编译期已经生成路由注册代码，这里调用一下，把所有 @Page 类登记到全局路由表。
3 startActivity(KuiklyActivity, "HomePage")
壳 Activity 跳转到 KuiklyActivity（Kuikly 框架提供的通用容器），传入要打开的 pageName。
4 KuiklyActivity 查路由表，创建 HomePage 实例
从路由表找到 "HomePage" 对应的工厂函数，反射创建 HomePage 实例。
5 调用 HomePage.body() 拿到 ViewBuilder
body() 闭包返回页面 UI 描述，引擎解析得到 BuildTree（原型树）。
6 BuildTree → RenderTree → 发指令到 Native
引擎过滤掉非渲染节点，生成 RenderTree，对照差异发出 createNode/setProp 等渲染指令到 Android 原生 View 系统。
7 屏幕显示 "Hello Kuikly!"
系统原生的 TextView / FrameLayout 等控件被创建并 addView 到视图树，用户看到结果。

来改一行代码看看效果

下面模拟了一个 Kuikly 模拟器画面。改下面控件的值，体感"代码改 → UI 变"的开发循环。

Hello Kuikly!
模拟器画面

修改 attr 试试

20f

对应的 Kotlin 代码（实时同步）