Skyline 渲染引擎概览

适用场景

• 初次了解 Skyline 渲染引擎
• 评估是否迁移到 Skyline
• 查看 Skyline 版本更新日志
• 了解与 WebView 的差异和兼容性
• 获取迁移步骤和最佳实践

核心概念

Skyline 是什么？

Skyline 是微信小程序的新一代渲染引擎，相比 WebView 有以下优势：

环境要求

快速开始配置

必需配置（app.json）

{
  "renderer": "skyline",
  "lazyCodeLoading": "requiredComponents",
  "componentFramework": "glass-easel",
  "rendererOptions": {
    "skyline": {
      "defaultDisplayBlock": true,
      "defaultContentBox": true,
      "tagNameStyleIsolation": "legacy",
      "enableScrollViewAutoSize": true,
      "keyframeStyleIsolation": "legacy"
    }
  }
}

页面配置（page.json）

{
  "navigationStyle": "custom",
  "disableScroll": true
}

⚠️ MUST: Skyline 不支持原生导航栏，必须设置 navigationStyle: custom 并自行实现导航栏。

文档索引

根据需求快速定位（路径相对于 references/）：

强制规则

MUST（必须遵守）

1. 配置完整：app.json 必须包含 renderer、lazyCodeLoading、componentFramework 三项
2. 自定义导航：所有 Skyline 页面必须设置 navigationStyle: custom
3. 局部滚动：使用 scroll-view 实现滚动，禁止依赖全局滚动
4. 文本组件：纯文本必须用 <text> 组件包裹
5. 预加载：跳转 Skyline 页面前调用 wx.preloadSkylineView()

NEVER（禁止行为）

1. NEVER 使用原生导航栏配置（Skyline 不支持）
2. NEVER 依赖 Page.onPageScroll 事件（使用 scroll-view 的滚动事件替代）
3. NEVER 在 Skyline 页面使用 web-view 组件
4. NEVER 假设所有 CSS 属性都支持（参考 WXSS 支持文档）

迁移检查清单

配置检查

• app.json 添加 renderer: "skyline"
• app.json 添加 lazyCodeLoading: "requiredComponents"
• app.json 添加 componentFramework: "glass-easel"
• app.json 添加 rendererOptions.skyline 配置
• 页面 json 添加 navigationStyle: "custom"
• 页面 json 添加 disableScroll: true

代码检查

• 实现自定义导航栏组件
• 全局滚动改为 scroll-view 局部滚动
• 纯文本用 <text> 包裹
• 检查 WXSS 属性支持情况
• 测试原生组件（map/canvas/video）显示

发布检查

• 配置 We 分析 AB 实验（灰度发布）
• 测试 WebView 降级兼容性
• 低版本微信表现正常

判断当前渲染引擎

JS 方式

Page({
  onLoad() {
    // 页面/组件实例上有 renderer 属性
    console.log(this.renderer) // 'skyline' 或 'webview'
  }
})

API 方式

// 异步方式
wx.getSkylineInfo({
  success(res) {
    console.log(res.isSupported) // 是否支持 Skyline
    console.log(res.version)     // Skyline 版本号
  }
})

// 同步方式
const info = wx.getSkylineInfoSync()
console.log(info.isSupported, info.version)

性能优化提示

预加载 Skyline 环境

// 在可能跳转到 Skyline 页面的页面中
Page({
  onShow() {
    // 延迟调用避免阻塞当前页面
    setTimeout(() => {
      wx.preloadSkylineView()
    }, 500)
  }
})

长列表优化

<!-- 列表项必须作为 scroll-view 直接子节点 -->
<scroll-view type="list" scroll-y>
  <view wx:for="{{list}}" wx:key="id">{{item.name}}</view>
</scroll-view>

<!-- 启用样式共享 -->
<scroll-view type="list" scroll-y>
  <view wx:for="{{list}}" wx:key="id" list-item>{{item.name}}</view>
</scroll-view>

相关技能

References 目录结构

references/
├── api/
│   ├── getSkylineInfo.md
│   └── preloadSkylineView.md
├── changelog/
│   └── changelog.md
├── introduction/
│   ├── component-support.md
│   ├── features.md
│   └── overview.md
├── migration/
│   ├── best-practice.md
│   ├── compatibility.md
│   ├── getting-started.md
│   └── release.md
└── performance/
    └── comparison.md