Skyline Overview

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