skyline-route

Skyline 自定义路由与页面转场技能。涵盖自定义路由动画(routeBuilder)、预设路由(7 种 wx:// 类型)、页面返回手势、容器转场动画(open-container)、Router API。适用于实现半屏弹窗、页面缩放、底部弹出、卡片展开等转场效果。触发关键词:自定义路由、custom-route、routeBuilder、navigateTo、页面转场、半屏、预设路由、返回手势、open-container。

By wechat-miniprogram · 858 installs

npx skills add wechat-miniprogram/skyline-skills --skill skyline-route

Source repository · Upstream listing

Skyline 自定义路由与页面转场 适用场景 实现自定义页面转场动画(半屏、缩放、渐显等) 使用预设路由快速实现常见转场效果 配置页面返回手势(横向/纵向/多方向) 实现卡片展开到详情页的容器转场动画 通过 Router API 管理自定义路由 核心概念 路由能力层级 层级 能力 适用场景 预设路由 一行代码使用 7 种内置效果 快速实现常见转场 自定义路由 通过 routeBuilder 完全控制动画 高度定制化转场 容器转场 <open container 元素级过渡 卡片展开到详情页 动画控制器 属性 说明 primaryAnimation 页面进入/退出动画进度(0→1 进入,1→0 退出) secondaryAnimation 下一页进入时当前页动画进度(与下一页 primaryAnimation 同步) userGestureInProgress 当前路由进度是否由手势控制 startUserGesture / stopUserGesture 手势接管/释放路由控制 didPop 确认返回上一页 文档索引 根据需求快速定位(路径相对于 references/ ): 我想要... 查阅文档 了解自定义路由原理和接口 custom route/custom route guide.md 查看半屏/手势返回代码模式 custom route/route patterns.md 快速使用预设路由 preset route/preset route.md 配置页面返回手势 pop gesture/pop gesture.md 实现卡片展开转场 open container/open container.md 查看 Router API api/router api.md 了解 navigateTo 路由参数 api/navigate to.md 监听路由事件 api/route events.md 强制规则 MUST(必须遵守) 1. 自定义路由仅在连续 Skyline 页面间生效 :WebView 页面不支持自定义路由 2. 动画处理函数必须声明 'worklet' 指令 : 3. 手势接管必须成对调用 startUserGesture / stopUserGesture : 4. 确认返回时必须调用 didPop :引擎无法自动判断开发者是否要退出页面 NEVER(禁止行为) 1. NEVER 在手势处理中忘记调用 startUserGesture 就直接修改 primaryAnimation.value 2. NEVER 假设自定义路由在 WebView 页面生效(低版本基础库会降级) 3. NEVER 在非 worklet 函数中访问 primaryAnimation.value Quick Reference 预设路由速查 routeType 效果 最低基础库 wx://bottom sheet 底部弹出半屏 3.1.0 wx://upwards 自底向上全屏 3.1.0 wx://zoom 缩放进入 3.1.0 wx://cupertino modal iOS 风格模态 3.1.0 wx://cupertino modal inside iOS 模态内嵌 3.1.0 wx://modal navigation 模态导航 3.1.0 wx://modal 模态弹窗 3.1.0 API 速查 API 说明 最低基础库 wx.router.addRouteBuilder(type, builder) 注册自定义路由 2.29.2 wx.router.removeRouteBuilder(type) 移除自定义路由 2.29.2 wx.router.getRouteContext(this) 获取路由上下文 2.29.2 wx.navigateTo({ routeType }) 指定路由类型跳转 2.29.2 wx.navigateTo({ routeConfig }) 覆盖路由配置 3.4.0 wx.navigateTo({ routeOptions }) 传入路由参数 3.4.0 wx.navigateTo({ withOpenContainer }) 容器转场跳转 3.12.2 wx.onBeforeAppRoute(fn) 路由执行前监听 3.5.5 wx.onAppRoute(fn) 路由执行后监听 3.5.5 自定义路由最小示例 场景决策表 场景 推荐方案 底部弹出半屏 预设路由 wx://bottom sheet iOS 风格模态 预设路由 wx://cupertino modal 自定义半屏 + 手势 自定义路由 + handlePrimaryAnimation 卡片展开到详情页 <open container 容器转场 页面渐显效果 自定义路由 + opacity 动画 需要纵向返回手势 popGestureDirection: 'vertical' 相关技能 场景 推荐技能 说明 动画开发 skyline worklet Worklet 动画系统(timing/spring/Easing) 手势处理 skyline components gesture handler 手势组件 共享元素 skyline components share element 页面间动画 配置详解 skyline config app.json/page.json 配置 概览迁移 skyline overview Skyline 概览与迁移指南 References 目录结构