skyline-overview

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Skyline 渲染引擎概览

Overview of Skyline Rendering Engine

适用场景

Applicable Scenarios

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

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

Skyline 是什么？

What is Skyline?

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

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

Skyline is the next-generation rendering engine for WeChat Mini Programs, with the following advantages over WebView:

Comparison Item	WebView	Skyline
Render Thread	Shared thread with JS logic	Independent render thread
Page Memory	One WebView per page	Shared rendering instance
First Screen Performance	Slow	66%+ faster
Rasterization	Asynchronous chunking	Synchronous (no white screen)
Page Stack Limit	Maximum 10 layers	Unlimited (continuous Skyline pages)

环境要求

Environment Requirements

平台	最低版本	基础库版本
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+	-

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

必需配置（app.json）

Required Configuration (app.json)

json

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

json

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

页面配置（page.json）

Page Configuration (page.json)

json

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

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

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/

）：

我想要...	查阅文档
了解 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`

Locate quickly based on your needs (path relative to

references/

I want to...	Refer to Document
Understand Skyline architecture and advantages	`introduction/overview.md`
Check supported features	`introduction/features.md`
View performance comparison data	`performance/comparison.md`
Start migrating projects	`migration/getting-started.md`
Handle compatibility issues	`migration/compatibility.md`
Access release guidelines	`migration/release.md`
View changelogs	`changelog/changelog.md`
Detect Skyline support	`api/getSkylineInfo.md`
Preload Skyline environment	`api/preloadSkylineView.md`

强制规则

Mandatory Rules

MUST（必须遵守）

MUST (Mandatory Compliance)

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

Complete Configuration: app.json must include the three items
```
renderer
```
,
```
lazyCodeLoading
```
, and
```
componentFramework
```
Custom Navigation: All Skyline pages must set
```
navigationStyle: custom
```
Local Scrolling: Use
```
scroll-view
```
to implement scrolling; do not rely on global scrolling
Text Components: Plain text must be wrapped in
```
<text>
```
components
Preloading: Call
```
wx.preloadSkylineView()
```
before navigating to a Skyline page

NEVER（禁止行为）

NEVER (Prohibited Actions)

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

NEVER use native navigation bar configuration (not supported by Skyline)
NEVER rely on the
```
Page.onPageScroll
```
event (use scroll-view's scroll event instead)
NEVER use the
```
web-view
```
component in Skyline pages
NEVER assume all CSS properties are supported (refer to the WXSS support documentation)

迁移检查清单

Migration Checklist

配置检查

Configuration Check

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

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

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

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

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

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

判断当前渲染引擎

Determine Current Rendering Engine

JS 方式

JS Method

javascript

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

javascript

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

API 方式

API Method

javascript

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

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

javascript

// 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

预加载 Skyline 环境

Preload Skyline Environment

javascript

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

javascript

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

长列表优化

Long List Optimization

html

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

html

<!-- 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`	JSON 配置项完整说明
样式开发	`skyline-wxss`	WXSS 支持与差异
组件开发	`skyline-components`	组件使用指南
动画开发	`skyline-worklet`	Worklet 动画系统
路由开发	`skyline-route`	自定义路由和转场

Scenario	Recommended Skill	Description
Configuration Details	`skyline-config`	Complete explanation 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
Route Development	`skyline-route`	Custom routing and transitions

References 目录结构

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

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-overview

Original

Translation

Skyline 渲染引擎概览

Overview of Skyline Rendering Engine

适用场景

Applicable Scenarios

核心概念

Core Concepts

Skyline 是什么？

What is Skyline?

环境要求

Environment Requirements

快速开始配置

Quick Start Configuration

必需配置（app.json）

Required Configuration (app.json)

页面配置（page.json）

Page Configuration (page.json)

文档索引

Document Index

强制规则

Mandatory Rules

MUST（必须遵守）

MUST (Mandatory Compliance)

NEVER（禁止行为）

NEVER (Prohibited Actions)

迁移检查清单

Migration Checklist

配置检查

Configuration Check

代码检查

Code Check

发布检查

Release Check

判断当前渲染引擎

Determine Current Rendering Engine

JS 方式

JS Method

API 方式

API Method

性能优化提示

Performance Optimization Tips

预加载 Skyline 环境

Preload Skyline Environment

长列表优化

Long List Optimization

相关技能

Related Skills

References 目录结构

References Directory Structure