skyline-overview

Skyline rendering engine overview

Applicable scenarios

• Getting to know the Skyline rendering engine for the first time
• Evaluating whether to migrate to Skyline
• Viewing the Skyline version changelog
• Understanding the differences and compatibility with WebView
• Obtaining migration steps and best practices

Core concepts

What is Skyline?

Skyline is the new-generation rendering engine for WeChat Mini Programs. Compared with WebView, it has the following advantages:

Comparison item	WebView	Skyline
Rendering thread	Same thread as JS logic	Independent rendering thread
Page memory	One WebView per page	Shared rendering instance
First screen performance	Slower	66%+ faster
Rasterization	Asynchronous chunking	Synchronous (no white screen)
Page stack limit	Up to 10 layers	Unlimited (consecutive Skyline pages)

Environment requirements

Platform	Minimum version	Base library version
Android	WeChat 8.0.40+	3.0.2+
iOS	WeChat 8.0.40+	3.0.2+
HarmonyOS	WeChat 1.0.10+	3.11.3+
Developer tools	Stable 1.06.2307260+	-

Quick start configuration

Required configuration (app.json)

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

Page configuration (page.json)

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

⚠️ MUST: Skyline does not support the native navigation bar, you must set navigationStyle: custom and implement the navigation bar yourself.

Documentation index

Quickly locate according to your needs (paths are relative to references/）：

I want to...	Consult the documentation
Understand the Skyline architecture and advantages	introduction/overview.md
View supported features	introduction/features.md
View performance comparison data	performance/comparison.md
Start migrating the project	migration/getting-started.md
Handle compatibility issues	migration/compatibility.md
Publishing and release guide	migration/release.md
View the changelog	changelog/changelog.md
Detect Skyline support	api/getSkylineInfo.md
Preload the Skyline environment	api/preloadSkylineView.md

Mandatory rules

MUST (must comply)

1. Complete configuration: app.json must contain renderer、lazyCodeLoading、componentFramework three items
2. Custom navigation: all Skyline pages must set navigationStyle: custom
3. Local scrolling: use scroll-view to implement scrolling; relying on global scrolling is prohibited
4. Text component: plain text must be wrapped with the <text> component
5. Preload: call wx.preloadSkylineView()

NEVER (prohibited behaviors)

1. NEVER Use the native navigation bar configuration (not supported by Skyline)
2. NEVER Rely on Page.onPageScroll events (use scroll-view's scroll events instead)
3. NEVER Use web-view component on Skyline pages
4. NEVER Assume all CSS properties are supported (refer to the WXSS support documentation)

Migration checklist

Configuration Check

• Add to app.json renderer: "skyline"
• Add to app.json lazyCodeLoading: "requiredComponents"
• Add to app.json componentFramework: "glass-easel"
• Add to app.json rendererOptions.skyline Configuration
• Add to page json navigationStyle: "custom"
• Add to page json disableScroll: true

Code Check

• Implement custom navigation bar component
• Change global scrolling to scroll-view local scrolling
• Wrap plain text with <text> wrapped in <text>
• Check WXSS property support
• Test native component (map/canvas/video) display

Release Check

• Configure We analysis AB experiment (gray release)
• Test WebView fallback compatibility
• Normal behavior in lower versions of WeChat

Determine the current rendering engine

JS method

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

API method

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

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

Performance optimization tips

Preload Skyline environment

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

Long list optimization

<!-- 列表项必须作为 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>

Related Skills

Scenario	Recommended Skills	Description
Configuration Details	skyline-config	Complete description of JSON configuration items
Style Development	skyline-wxss	WXSS support and differences
Component Development	skyline-components	Component usage guide
Animation Development	skyline-worklet	Worklet animation system
Routing Development	skyline-route	Custom routing and transitions

References directory structure

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