▶_MiniApp Toolkit

awesome-skyline

工具

微信官方 Skyline 渲染引擎示例集，提供通讯录、相册、卡片转场、半屏弹窗等 UI 交互模式的完整示例代码。帮助开发者快速理解和迁移到 Skyline 渲染引擎。

官网文档
Skyline渲染引擎UI示例微信小程序官方示例性能优化

详细文档

awesome-skyline#

平台概述#

awesome-skyline 是微信官方维护的 Skyline 渲染引擎示例集。Skyline 是微信小程序推出的新一代渲染引擎，旨在替代传统的 WebView 渲染，提供更好的渲染性能和更接近原生的交互体验。

核心价值：Skyline 渲染引擎引入了全新的 UI 组件和动画系统（worklet 动画），但与传统 WebView 渲染存在差异。本示例集提供了 8+ 种常见 UI 交互模式的完整实现代码，帮助开发者快速掌握 Skyline 开发模式，降低迁移成本。

项目数据（2026-07-31 核实）：

  • GitHub：199⭐ / 54 forks / MIT License
  • 维护方：微信小程序团队（wechat-miniprogram 官方组织）
  • 最近活跃：2025-10-22
  • 官方文档：Skyline 渲染引擎介绍

设计规范#

Skyline 渲染引擎特性#

特性WebView 渲染Skyline 渲染
渲染后端Chromium WebView自研渲染引擎
滚动性能一般接近原生（线程化渲染）
动画系统CSS Animation/JSworklet 动画（UI 线程）
组件支持全部原生组件子集（持续扩展中）
CSS 支持完整子集（Tailwind-like 原子类增强）
调试工具Chrome DevTools微信开发者工具 Skyline 面板

示例覆盖的 UI 模式#

示例交互模式应用场景
address-book通讯录索引列表联系人、城市选择器
album相册浏览图片网格 + 详情查看
card_transition卡片转场动画商品详情、卡片展开
half-screen半屏弹窗底部弹出面板
segmented-half-screen分段式半屏多级半屏弹出
tab-indicatorTab 指示条顶部导航 Tab 切换
product-list搜索栏吸附电商商品列表
expanded-scroll-view沉浸式浏览头图展开滚动
associated-scroll-view分类列表联动左右联动列表

Skyline 专属组件#

  • scroll-view：增强版，支持 type="custom" 自定义渲染
  • grid-view：网格布局组件（Skyline 专属）
  • waterfall：瀑布流组件（Skyline 专属）
  • sticky-section：吸顶分组（Skyline 专属）
  • sticky-header：吸顶头部（Skyline 专属）

审核规范#

不涉及（示例项目，供开发参考）。

开发指南#

快速上手#

code
# 克隆仓库
git clone https://github.com/wechat-miniprogram/awesome-skyline.git

# 用微信开发者工具打开任意示例目录
# 如 awesome-skyline/examples/address-book

启用 Skyline 渲染#

code
// app.json
{
  "renderer": "skyline",
  "rendererOptions": {
    "skyline": {
      "defaultDisplayBlock": true,
      "disableABTest": true,
      "sdkVersionBegin": "3.0.0",
      "sdkVersionEnd": "15.255.255"
    }
  },
  "componentFramework": "glass-easel",
  "lazyCodeLoading": "requiredComponents"
}

worklet 动画示例#

code
// 页面 JS
const { shared, timing, sequence } = wx.worklet

Page({
  onLoad() {
    // 创建共享动画值
    this.transY = shared(0)
    this.scale = shared(1)
  },
  onScroll(deltaY) {
    'worklet'
    // 在 worklet 线程中执行动画计算，不阻塞 UI
    this.transY.value = deltaY
    this.scale.value = timing(0.95, { duration: 200 })
  }
})

常见陷阱#

  1. 组件兼容性：部分传统组件在 Skyline 下不可用（如 rich-text），需检查兼容性列表
  2. CSS 子集限制：Skyline 不支持 float、position: fixed（需用 sticky 替代）等部分 CSS 特性
  3. 基础库版本要求：Skyline 需要基础库 ≥ 3.0.0
  4. 调试模式：开发者工具中需切换到 Skyline 模式才能正确预览

迁移工具#

微信官方提供 skylint 工具，帮助检测项目中的 Skyline 不兼容代码：

code
npx skylint ./src

生态资源#

官方生态#

资源说明
Skyline 官方文档渲染引擎介绍、组件列表、迁移指南
skylintSkyline 迁移检查工具（83⭐ / MIT）
skyline-skillsSkyline Agent Skills（46⭐）
glass-easel新一代组件框架运行时（314⭐）

相关组件库#

  • WeUI：微信官方视觉标准库，部分组件已适配 Skyline
  • TDesign 小程序版：腾讯设计体系，持续增加 Skyline 支持

社区资源#

  • GitHub Issues：2 个开放问题
  • 微信开放社区：Skyline 专区讨论

版本更新#

当前状态（2026-07-31 核实）#

  • GitHub：199⭐ / 54 forks / MIT License
  • 维护方：wechat-miniprogram 官方组织
  • 最近推送：2025-10-22
  • 创建日期：2023-02-22
  • 仓库大小：812KB（纯代码示例）

更新频率#

  • 更新频率较低（最近推送 2025-10），但内容仍然有效
  • 随 Skyline 渲染引擎大版本更新而添加新示例
  • 示例代码与最新 Skyline API 保持一致

核实记录#

  • 2026-07-31：GitHub API 核实，199⭐ / 54 forks / MIT / 最后推送 2025-10-22。活跃度偏低（>6 月无推送），但内容为官方标准示例，仍为 Skyline 开发的最佳学习资源。结合 skylint 迁移工具使用效果最佳。

支持平台

微信小游戏T1微信小程序T0