第一篇文章聊了为什么决定深入 KuiklyUI。这篇是整个系列正文的起点。 一、先从一张图开始这张图是我自己画的 KuiklyUI 架构图。五层按从上到下的顺序说一下。最上面是业务层。 这张图和 KuiklyUI 官方架构图有一个关键差别。 但在真正理解 KuiklyUI 整体设计之前,并不知道 KuiklyUI 和 Vue 在这一点上像到了什么程度。 KuiklyUI 自研了一套依赖收集和更新触发机制,核心 API 是 observable。
上一篇文章从整体架构入手,把 KuiklyUI 拆成业务层、Compose DSL、Core、Bridge、Render 几个部分。 我们已经知道 KuiklyUI 分成了多个层级,现在讨论的重点放在另一个问题上:为什么要这样分层。分层是软件工程里最基础的架构模式之一。 KuiklyUI 的标准更松:commonMain 适合容纳任何不直接引用平台 UI 类的逻辑。 KuiklyUI 的 Bridge 一共 23 个 methodId,分两个方向。 总结从分层设计看 KuiklyUI,每个选择背后都有明确的约束条件,也都有它放弃的东西。
从最早的 Android 入门教程,到 iOS SwiftUI 官方示例,再到 React、Flutter、鸿蒙... 天气应用几乎是所有 UI 框架的"Hello World Plus"——它足够简单,能让你快速上手;又足够丰富,涵盖了数据展示、图表绑定等核心技能。
页面已经创建完了,用户点一下按钮触发 count++,KuiklyUI 怎么知道该更新哪个 View? KuiklyUI 用的是 Kotlin 委托属性:by observable(0) 编译后自动生成 delegate,读写都经过 getValue 和 setValue。 KuiklyUI 的下游不同。每一次更新都要穿越 Bridge,如果每次 count++ 都重新执行整个 body() 再翻译成 Bridge 指令,通信成本会在高频场景迅速膨胀。 四、同步触发的取舍KuiklyUI 的更新链路是同步执行的。count++ 到 Bridge 下发属性,全程在一个调用栈内完成。好处是调用链清楚,调试时不需要跨微任务追踪。 KuiklyUI 选同步路径,更多是为了让跨端更新链路保持直接。attr 重新执行后生成的是 Bridge 指令而非直接操作 UI。
前三篇文章讲了 KuiklyUI 的分层结构、Core/Bridge/Render 各自的职责和它们为什么这样分工。 先说一个会在后面反复出现的判断:KuiklyUI 的页面创建不是一次性渲染,而是分成了两个阶段。 一、页面在 KuiklyUI 里的角色在讲创建链路之前,需要先看清楚 Pager 在 KuiklyUI 里的角色。 Pager 在 KuiklyUI 里有一个更加底层的角色:它不只是页面对象,同时是整棵 view 树的根节点。 这部分 KuiklyUI 不介入。
KuiklyUI 的业务代码就是 Kotlin。 KuiklyUI 的跨端能力建立在 KMP 之上。 KuiklyUI 的 Compose DSL 借鉴了 Jetpack Compose。 回到 KuiklyUI 的具体场景就更清楚。 业务把我推到了 KuiklyUI 面前,我接住了它。现在,决定主动再往深一步走。
KuiklyUI 源码编译运行到鸿蒙平台的实践(Mac) 本指南将帮助你快速搭建 KuiklyUI 在 HarmonyOS 平台的开发环境,并成功运行示例应用。 Git 并配置 SSH 密钥(用于克隆项目) 可选环境 鸿蒙设备或模拟器:用于运行和测试应用 Android Studio:如果需要同时开发 Android 版本 克隆项目 在终端中执行以下命令克隆 KuiklyUI 项目: git clone git@gitcode.com:Tencent-TDS/KuiklyUI.git cd KuiklyUI 注意: 如果使用 HTTPS 方式克隆,命令为: git clone https://gitcode.com/Tencent-TDS/KuiklyUI.git 构建 Ohos App 步骤 1:编译鸿蒙跨端产物 在 KuiklyUI 根目录执行鸿蒙跨端产物编译脚本: /ohosApp/entry/libs/arm64-v8a: No such file or directory libshared.so: copied from /path/to/KuiklyUI/
三、如何使用# 安装 Skillsnpx skills add Tencent-TDS/KuiklyUI-AI/skills# 更新到最新版本npx skills update Tencent-TDS/ KuiklyUI-AI/skillinit命令会自动完成项目配置。 参考 KuiklyUI 仓库 获取源码和 Demo,3. 根据 KuiklyUI-AI 仓库 README 指引配置 Rules 和 Skills,让你的 AI 工具具备 Kuikly 开发能力。
✅ KMP-OH + KuiklyUI-OH(鸿蒙适配版 Kotlin 系跨端方案) ▌ 核心定位:Kotlin 技术栈专属,业务逻辑极致复用这是鸿蒙适配的两大 Kotlin 生态跨端方案,均以「代码复用 KuiklyUI-OH:腾讯官方出品,地址:https://atomgit.com/Tencent-TDS/KuiklyUI,官网:https://framework.tds.qq.com/ 基于 KMP (适配所有 Web 系框架:Electron-OH、Cordova-OH、RN-OH); 高性能需求:C++(Qt-OH 专属,鸿蒙官方 NAPI 接口支持); 小众选型:Kotlin(KMP-OH、KuiklyUI-OH → RN-OH(React 生态无缝衔接,开发成本最低); 有 Web 项目 → Cordova-OH / Electron-OH(前者轻量,后者桌面专属); 有安卓原生项目 → KMP-OH / KuiklyUI-OH
GitHub:https://github.com/Tencent-TDS/KuiklyUI Kotlin 版本:2.0.21 | 开源协议:Apache 2.0 一、什么是 Kuikly? + Compose DSL,兼顾不同团队习惯 ✅ 腾讯级验证:5 亿+ DAU,20+ 产品,1000+ 页面的生产环境验证 开源地址:https://github.com/Tencent-TDS/KuiklyUI
相关资源直达: Kuikly 官方文档:https://kuikly.tds.qq.com Kuikly GitHub:https://github.com/Tencent-TDS/KuiklyUI Kuikly AI :https://github.com/Tencent-TDS/KuiklyUI-AI (注:部分文章提及的AI工具链配置、Rules/Skills的具体使用方法,建议查阅Kuikly官方的最新指南以获取最准确的信息
GitHub 仓库:https://github.com/Tencent-TDS/KuiklyUI 官方文档:https://kuikly.tds.qq.com SDK 体积:Android ~300KB https://kuikly.tds.qq.com/QuickStart/overview.html GitHub 仓库(含 Demo) https://github.com/Tencent-TDS/KuiklyUI
官网:https://kuikly.tds.qq.comGitHub(开源):https://github.com/Tencent-TDS/KuiklyUI开源协议:Apache 2.0生产验证:QQ、 pod 'OpenKuiklyIOSRender', '$kuiklyVersion'end或使用 SPM:plaintexthttps://github.com/Tencent-TDS/KuiklyUI.gitHarmonyOS 日活产品中大规模验证,稳定可靠参考资料Kuikly 官网:https://kuikly.tds.qq.comKuikly GitHub(开源):https://github.com/Tencent-TDS/KuiklyUI
Kuikly具备两层技术结构: KuiklyUI:涵盖Core(核心运行时)、API(跨端接口)、DSL(基于Jetpack Compose 1.7.3改造的声明式UI)、Render(渲染适配)模块 A2:主要依靠Compose DSL在编译期映射为平台原生控件,统一设计描述与渲染策略,并通过KuiklyUI的Render模块屏蔽底层差异,从而在视觉与交互层面保持高度一致。 快速接入Kuikly官方文档:https://kuikly.tds.qq.com/GitHub:https://github.com/Tencent-TDS/KuiklyUI
KuiklyBase 与 KuiklyUI 均已完成 Windows 和 Linux 平台的编译适配,进一步扩大了非 Mac 平台的开发者受众,开发者可参考官方文档完成适配。 ● 组件市场收录渠道:开发者可在 Kuikly-third-party(https://github.com/Tencent-TDS/KuiklyUI-third-party)仓库以 PR 形式,提交三方组件与工具 Github 仓库:https://github.com/Tencent-TDS/KuiklyUI 官网:https://kuikly.tds.qq.com Kuikly框架属于腾讯端服务联盟(tds.qq.com
采用声明式UI编写方式是指通过组合函数与状态驱动视图更新的编程模型,其核心特点是结构直观、响应式刷新、与KuiklyUI的DSL深度契合,主要解决了传统命令式UI更新繁琐且易漏改的问题。 声明式写法配合KuiklyUI的动画与手势能力,可显著提升复杂界面的开发效率。 答:在鸿蒙平台建议API ≥18,以满足KuiklyUI与跨端基建的最低特性需求。问:多端项目中如何确保状态同步一致?
/Tencent-TDS/KuiklyUIKuikly AI介绍:https://kuikly.woa.com/Kuikly AI 入口:https://github.com/Tencent-TDS/KuiklyUI-AI
、小程序(β)Kotlin 统一开发,90%+ 代码跨平台共享基于 KMP 技术,与 Android 生态天然融合GitHub 开源地址:https://github.com/Tencent-TDS/KuiklyUI 八、相关资源资源链接 GitHub 开源仓库https://github.com/Tencent-TDS/KuiklyUI 官方文档https://kuikly.tds.qq.com/ 快速开始https
github.com/Tencent-TDS/KuiklyUIKuiklyAI介绍:https://kuikly.woa.com/KuiklyAI入口:https://github.com/Tencent-TDS/KuiklyUI-AI
六、参考资料 开源地址:https://github.com/Tencent-TDS/KuiklyUI,鸿蒙接入文档:见仓库 docs/ 目录 官方文档:https://kuikly.tds.qq.com