skyline-overview

用途

本技能用于了解微信小程序新一代渲染引擎 Skyline，提供从概览到迁移的完整指引。适用于初次接触 Skyline、评估是否迁移、查看版本更新日志、了解与 WebView 的差异和兼容性，以及获取迁移步骤和最佳实践的场景。

核心概念

Skyline 是微信小程序的新一代渲染引擎。相比 WebView 的对比信息如下：

渲染线程：WebView 与 JS 逻辑同线程；Skyline 为独立渲染线程。
页面内存：WebView 每页一个 WebView；Skyline 共享渲染实例。
首屏性能：WebView 较慢；Skyline 快 66%+。
光栅化：WebView 异步分块；Skyline 同步（无白屏）。
页面栈限制：WebView 最多 10 层；Skyline 无限制（连续 Skyline 页面）。

环境要求

Android：微信 8.0.40+，基础库 3.0.2+
iOS：微信 8.0.40+，基础库 3.0.2+
HarmonyOS：微信 1.0.10+，基础库 3.11.3+
开发者工具：Stable 1.06.2307260+

快速开始配置

必需配置（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 }

注意：Skyline 不支持原生导航栏，必须设置 navigationStyle: custom 并自行实现导航栏。

文档索引

路径相对于 references/：

了解 Skyline 架构和优势：introduction/overview.md
查看支持的特性：introduction/features.md
查看性能对比数据：performance/comparison.md
开始迁移项目：migration/getting-started.md
处理兼容性问题：migration/compatibility.md
发布上线指南：migration/release.md
查看更新日志：changelog/changelog.md
检测 Skyline 支持：api/getSkylineInfo.md
预加载 Skyline 环境：api/preloadSkylineView.md

强制规则

MUST（必须遵守）：

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

NEVER（禁止行为）：

NEVER 使用原生导航栏配置（Skyline 不支持）
NEVER 依赖 Page.onPageScroll 事件（使用 scroll-view 的滚动事件替代）
NEVER 在 Skyline 页面使用 web-view 组件
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

限制

Skyline 不支持原生导航栏；不支持在页面中使用 web-view 组件；不应依赖 Page.onPageScroll 事件；不能假设所有 CSS 属性均受支持，需参考 WXSS 支持文档。其余未在资料中说明的限制暂未提供。

技能介绍

用途