Skyline 模式

Skyline 是微信小程序的新一代渲染引擎。它减少了传统 WebView 渲染中的跨线程通信，并提供面向复杂交互和高性能动画的渲染能力。

create-vite-taro 的默认模板已经生成 Skyline 所需配置。无需安装额外依赖，也没有专用的 vpt 选项；相关设置直接写在 vpt() 的 appJson、页面配置和 projectConfigJson 中。

配置示例

在 vite.config.ts 的微信（wx）配置中，将 glass-easel 配置为全局页面默认值：

vpt({
    // ...
    pages: [
        {
            path: 'pages/home/index',
            config: {
                navigationStyle: 'custom',
                navigationBarTextStyle: 'black'
            }
        }
    ],
    appJson: {
        lazyCodeLoading: 'requiredComponents',
        renderer: 'skyline',
        componentFramework: 'glass-easel',
        rendererOptions: {
            skyline: {
                defaultDisplayBlock: true,
                defaultContentBox: true,
                disableABTest: true
            }
        },
        window: {
            glassEaselWebview: true,
            navigationStyle: 'custom'
        }
    },
    projectConfigJson: {
        // ...
        setting: {
            compileHotReLoad: true,
            skylineRenderEnable: false
        }
    }
})

配置	作用
`renderer: 'skyline'`	为页面选择 Skyline 渲染引擎。
`componentFramework: 'glass-easel'`	使用支持 Skyline 的组件框架。
`window.glassEaselWebview: true`	为所有页面默认启用 WebView 的 glass-easel 运行时。
`pages[].config.glassEaselWebview`	设置单个页面的 WebView glass-easel 开关。
`lazyCodeLoading: 'requiredComponents'`	按需注入页面所需组件。
`defaultDisplayBlock`	将 Skyline 节点的默认布局从 `flex` 调整为 `block`。
`defaultContentBox`	将默认盒模型从 `border-box` 调整为 `content-box`，更接近 Web。
`disableABTest: true`	跳过 We 分析 AB 实验，让符合条件的真机直接使用 Skyline。
`navigationStyle: 'custom'`	由应用绘制导航栏，而不是使用微信默认导航栏。
`skylineRenderEnable`	控制微信开发者工具是否开启 Skyline 渲染调试。

开发模式与 Skyline 调试

默认模板把 skylineRenderEnable 设为 false，让日常开发继续使用微信开发者工具的热更新。应用输出仍然包含 Skyline 配置，但开发者工具模拟器不会强制使用 Skyline 渲染。

需要检查 Skyline 的实际布局和组件行为时，将它改为 true：

projectConfigJson: {
    // ...
    setting: {
        compileHotReLoad: true,
        skylineRenderEnable: true
    }
}

重新打开微信项目后，在开发者工具的“详情 → 本地设置”中确认已开启 Skyline 渲染调试，并把调试基础库设为 3.8.12 或更高版本。模拟器左上角应显示当前 renderer 为 skyline。

全局开启或按页面开启

全局开启

把 renderer 和 componentFramework 放在 appJson 中，所有页面都会请求 Skyline。按照微信 glass-easel 迁移文档，componentFramework 选择 WXML 编译器，WebView 还需要 glassEaselWebview: true 来启用 glass-easel 运行时。全局页面默认值放在 appJson.window 中，单页设置放在 pages[].config 中。

pages: [
    {
        path: 'pages/home/index'
    }
],
appJson: {
    renderer: 'skyline',
    componentFramework: 'glass-easel',
    window: { glassEaselWebview: true },
    rendererOptions: {
        skyline: {
            defaultDisplayBlock: true,
            defaultContentBox: true,
            disableABTest: true
        }
    }
}

按页面开启

可以只为部分页面配置 Skyline，但所有微信页面仍需使用 glass-easel。保留全局组件框架和 WebView 默认值，仅把 renderer: 'skyline' 放进目标页面：

pages: [
    {
        path: 'pages/index/index',
        config: {
            renderer: 'skyline',
            navigationStyle: 'custom'
        }
    },
    {
        path: 'pages/settings/index'
    }
],
appJson: {
    lazyCodeLoading: 'requiredComponents',
    componentFramework: 'glass-easel',
    window: { glassEaselWebview: true },
    rendererOptions: {
        skyline: {
            defaultDisplayBlock: true,
            defaultContentBox: true,
            disableABTest: true
        }
    }
}

这样首页使用 Skyline，设置页继续使用 WebView。业务组件和导入路径不需要因为渲染引擎不同而改变。

适配样式与组件

Skyline 尽量保持小程序上层语法不变，但不是浏览器 CSS 的完整实现。迁移时重点检查：

使用 ScrollView 实现滚动，并为滚动区域提供明确尺寸；overflow: scroll 不受支持。
不依赖 inline、完整的 inline-block、BFC 或浏览器层叠上下文。
position: sticky 应改用微信提供的 sticky-header 或 sticky-section 能力。
检查属性选择器、通配选择器及不受支持的 CSS 属性。
在真机上检查文字、固定定位、阴影、渐变、动画和长列表。

模板启用 defaultDisplayBlock 与 defaultContentBox，可以减少常见的 Web 与 Skyline 布局差异，但不会让 Skyline 支持所有浏览器 CSS。完整差异请参考微信 Skyline WXSS 文档。

验证结果

将 skylineRenderEnable 改为 true。
运行微信开发模式并在开发者工具中打开 dist/wx。
确认调试基础库不低于 3.8.12，模拟器显示 skyline。
逐页检查布局、滚动、手势、弹层和自定义导航栏。
使用预览或体验版在 Android 与 iOS 真机上测试。
检查 WebView 回退时页面仍可正常使用。

微信基础库 3.0.2 开始支持 Skyline，defaultContentBox 需要基础库 3.1.0；WebView 使用 glass-easel 运行时需要基础库 3.8.12。OHOS 的支持版本要求更高，请以微信 Skyline 起步文档和 glass-easel 迁移文档为准。

发布与灰度

微信默认要求 Skyline 经过 We 分析 AB 实验；仅配置 renderer: 'skyline' 而未配置实验时，真机仍可能使用 WebView。模板与 Skyline 示例现在默认设置 disableABTest: true，符合条件的真机无需配置实验即可使用 Skyline。rendererOptions.skyline 由应用显式配置。

开发者工具的 skylineRenderEnable 只影响模拟器，不会控制手机。在真机的 … → 开发调试 → Switch Render 中选择 Auto 来验证应用配置，或选择 Skyline 强制调试。手动选择的 WebView 会持续生效，直到再次切换。以原生 Page.renderer 的实际值为准；不支持 Skyline 的客户端仍可能回退。

发布前仍需验证真机稳定性、性能和 WebView 回退效果。如需通过 We 分析逐步放量，将 disableABTest 改为 false 并配置 AB 实验。具体流程请参考微信 Skyline 发布配置。