Kuikly多页面与路由实战RouterModule跨端导航一步步入门【免费下载链接】KuiklyUI基于KMP技术的高性能、全平台开发框架具备统一代码库、极致易用性和动态灵活性。 Provide a high-performance, full-platform development framework with unified codebase, ultimate ease of use, and dynamic flexibility. 注意本仓库为Github仓库镜像PR或Issue请移步至Github发起感谢支持项目地址: https://gitcode.com/Tencent-TDS/KuiklyUIKuikly 是基于 KMP 技术的高性能全平台开发框架一套 Kotlin 代码即可同时运行在 Android、iOS、H5 与鸿蒙等平台。本篇教程将带你一步步掌握 Kuikly 多页面开发使用内置的RouterModule 路由模块完成跨端页面导航openPage 打开新页面、closePage 关闭当前页面并配合PagerData实现页面间参数传递最后讲清多页面数据隔离的常见坑与正确姿势。适合刚接触 Kuikly 跨端路由的新手阅读。为什么需要 Kuikly 路由导航真实 App 很少只有一个页面列表页点进去是详情页详情页还能再跳转到订单页……因此你需要一套跨端统一的导航能力。Kuikly 的答案是内置的 RouterModule.kt它封装了两个核心 APIAPI作用典型场景openPage(pageName, pageData)打开一个新的 Kuikly 页面并可携带 JSON 参数从列表页跳详情页closePage()关闭当前页面回到上一级详情页点返回这两个方法在 Android、iOS、H5、鸿蒙等平台行为完全一致——你只写一份导航逻辑全平台生效这就是 KMP 统一代码库带来的跨端红利。第一步用 Page 注解注册你的页面Kuikly 中每个页面都是一个继承自Pager的类类似 Android 的 Activity、iOS 的 ViewController。用Page(页面名)注解把页面注册进框架路由跳转时靠这个页面名找到目标页面Page(secondPage) internal class SecondPage : Pager() { override fun body(): ViewBuilder { return { attr { allCenter() } Text { attr { text(第二页) } } } } }body()方法返回页面的 UI 结构描述写法上就一个注意点路由目标页面的名字必须和Page注解里的字符串一致。页面类一般放在示例工程的 demo 页面目录 这类业务包下路由示例可以参考官方的 RouterPage.kt。第二步openPage 打开新页面在出发页里通过acquireModuleRouterModule拿到路由模块然后在事件回调里调用openPage完成跳转Page(firstPage) internal class FirstPage : Pager() { override fun body(): ViewBuilder { val ctx this return { Button { attr { titleAttr { text(跳转到第二页) } } event { click { ctx.acquireModuleRouterModule(RouterModule.MODULE_NAME) .openPage(secondPage) } } } } } }三个要点acquireModuleRouterModule(RouterModule.MODULE_NAME)是获取模块的标准写法建议在类中用by lazy缓存避免重复获取第一个参数pageName就是目标页面的Page注解名不传参数时直接openPage(secondPage)即可pageData默认为空。第三步用 PagerData 接收跨页面参数打开页面时第二个参数pageData可以携带 JSON 数据目标页面通过pagerData.params读取这是 Kuikly 官方推荐的页面间初始数据传递方式// 跳转方带上参数 ctx.acquireModuleRouterModule(RouterModule.MODULE_NAME) .openPage(secondPage, JSONObject().apply { put(fromFirstPage, heihei) }) // 接收方在 created 生命周期之后读取 override fun created() { super.created() val msg pagerData.params.optString(fromFirstPage) } 小技巧给PageData写一个扩展属性如val PageData.fromFirstPage: String get() params.optString(fromFirstPage)业务代码里就不用到处写 key 字符串了。⚠️ 注意PagerData必须在created()生命周期或之后访问过早读取会触发框架保护异常PagerNotFoundException。参数细节可参考官方文档 页面数据PagerData。第四步closePage 关闭页面回到上一级关闭当前页面更简单一行搞定ctx.acquireModuleRouterModule(RouterModule.MODULE_NAME).closePage()把这句放进返回按钮的点击事件里页面栈就会回退到跳转前的页面。完整的跳转回退闭环官方文档有详细示例打开和关闭Kuikly页面。避坑指南多页面数据不是全局共享的这是新手最容易踩的坑——想当然地用全局变量companion object在页面间共享状态结果动态化模式下数据是隔离的每个动态化页面运行在独立环境里全局变量互不可见observable 不能跨页面驱动 UIobservable绑定创建它的PageScope放在companion object里不仅被标记弃用而且只能驱动创建它的那个页面的更新。✅正确姿势是两条腿走路初始数据用上面讲的openPagePagerData传递运行期实时同步用 NotifyModule.kt 的addNotify/postNotify做页面间事件通知并在pageWillDestroy()中解注册防止内存泄漏。官方在 多页面场景案例与原理解析 里用一个计数器同步的例子把内置模式与动态化模式的差异演示得很清楚发送事件通知 文档则覆盖了 Kuikly 页面互发、以及 Kuikly 与 Native 双向通信的完整写法。小结与延伸阅读回顾一下这篇 Kuikly 跨端路由教程的四步主线Page注解注册页面入口PagerRouterModule.openPage打开新页面PagerData接收跨页面参数closePage回退页面栈再用NotifyModule解决运行期数据同步。掌握这套组合拳后多端 App 的导航逻辑只需要维护一份代码。想继续深入可以按这条路径走页面入口Pager页面生命周期与 UI 构建基础Pager生命周期created、pageWillDestroy 等时机说明模块机制理解acquireModule背后的模块化设计框架总览Kuikly 开发文档目录现在打开你的 Kuikly 工程试着把第一页 → 第二页 → 回退的完整链路跑起来吧【免费下载链接】KuiklyUI基于KMP技术的高性能、全平台开发框架具备统一代码库、极致易用性和动态灵活性。 Provide a high-performance, full-platform development framework with unified codebase, ultimate ease of use, and dynamic flexibility. 注意本仓库为Github仓库镜像PR或Issue请移步至Github发起感谢支持项目地址: https://gitcode.com/Tencent-TDS/KuiklyUI创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考