Overview of Skyline Rendering Engine

Applicable Scenarios

• New to Skyline Rendering Engine
• Evaluating whether to migrate to Skyline
• Checking Skyline version changelogs
• Understanding differences and compatibility with WebView
• Obtaining migration steps and best practices

Core Concepts

What is Skyline?

Environment Requirements

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 native navigation bars. You must set

navigationStyle: custom

and implement the navigation bar yourself.

Document Index

references/

introduction/overview.md

introduction/features.md

performance/comparison.md

migration/getting-started.md

migration/compatibility.md

migration/release.md

changelog/changelog.md

api/getSkylineInfo.md

api/preloadSkylineView.md

Mandatory Rules

MUST (Mandatory Compliance)

1. Complete Configuration: app.json must include the three items

   renderer

   ,

   lazyCodeLoading

   , and

   componentFramework

2. Custom Navigation: All Skyline pages must set

   navigationStyle: custom

3. Local Scrolling: Use

   scroll-view

   to implement scrolling; do not rely on global scrolling
4. Text Components: Plain text must be wrapped in

   <text>

   components
5. Preloading: Call

   wx.preloadSkylineView()

   before navigating to a Skyline page

NEVER (Prohibited Actions)

1. NEVER use native navigation bar configuration (not supported by Skyline)
2. NEVER rely on the

   Page.onPageScroll

   event (use scroll-view's scroll event instead)
3. NEVER use the

   web-view

   component in Skyline pages
4. NEVER assume all CSS properties are supported (refer to the WXSS support documentation)

Migration Checklist

Configuration Check

• Add

  renderer: "skyline"

  to app.json
• Add

  lazyCodeLoading: "requiredComponents"

  to app.json
• Add

  componentFramework: "glass-easel"

  to app.json
• Add

  rendererOptions.skyline

  configuration to app.json
• Add

  navigationStyle: "custom"

  to page json
• Add

  disableScroll: true

  to page json

Code Check

• Implement custom navigation bar component
• Replace global scrolling with scroll-view local scrolling
• Wrap plain text with

  <text>

• Check WXSS property support
• Test display of native components (map/canvas/video)

Release Check

• Configure We Analytics AB experiment (grayscale release)
• Test WebView downgrade compatibility
• Ensure normal behavior on older WeChat versions

Determine Current Rendering Engine

JS Method

Page({
  onLoad() {
    // The page/component instance has a renderer property
    console.log(this.renderer) // 'skyline' or 'webview'
  }
})

API Method

// Asynchronous method
wx.getSkylineInfo({
  success(res) {
    console.log(res.isSupported) // Whether Skyline is supported
    console.log(res.version)     // Skyline version number
  }
})

// Synchronous method
const info = wx.getSkylineInfoSync()
console.log(info.isSupported, info.version)

Performance Optimization Tips

Preload Skyline Environment

// In pages that may navigate to Skyline pages
Page({
  onShow() {
    // Delay call to avoid blocking current page
    setTimeout(() => {
      wx.preloadSkylineView()
    }, 500)
  }
})

Long List Optimization

<!-- List items must be direct child nodes of scroll-view -->
<scroll-view type="list" scroll-y>
  <view wx:for="{{list}}" wx:key="id">{{item.name}}</view>
</scroll-view>

<!-- Enable style sharing -->
<scroll-view type="list" scroll-y>
  <view wx:for="{{list}}" wx:key="id" list-item>{{item.name}}</view>
</scroll-view>

Related Skills

skyline-config

skyline-wxss

skyline-components

skyline-worklet

skyline-route

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