Skyline Route

This handles custom page transitions and routing animations in WeChat's Skyline rendering engine. You get seven preset routes like bottom sheets and iOS-style modals, or build your own with routeBuilder for things like half-screen popups, scaling transitions, and card-to-detail expansions. The worklet directive requirement is non-negotiable for animation functions, and custom routes only work between consecutive Skyline pages, not WebView. Most useful when you need gesture-driven navigation or want that polished native app feel. The open-container component for card expansions is nice, though you'll spend time wiring up startUserGesture and didPop correctly if you go beyond the presets.

skills.sh installs: 1K
GitHub stars: 56
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add wechat-miniprogram/skyline-skills --skill skyline-route --agent claude-code

Installs into .claude/skills of the current project.

Files

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`