# 环境准备

Skyline 具体支持版本如下：

扫码快速确认环境是否正确

# 使用开发者工具调试

开发者工具提供了对齐移动端的 Skyline 渲染引擎，支持 WXML 调试、 WXSS 样式错误提示、新增的特性等

按以下步骤切换到 Skyline 模式：

若切换期间出现报错、白屏等问题，可尝试重启开发者工具解决

已知问题：目前使用扩展屏调试 Skyline 时可能会出现异常，可将开发者工具切回内建显示器

已知问题：真机调试暂未支持

已知问题：热重载暂未支持

此时，在模拟器左上角能够看到当前的 renderer 为 skyline，见下图

迁移到 Skyline，无需大动干弋，我们保持了上层框架的语法、接口基本不变，只需要做局部的调整，主要是加强了 WXSS 样式、内置组件及部分特性的约束，基本流程如下：

Skyline 依赖按需注入特性，需在 app.json 配上 "lazyCodeLoading": "requiredComponents"
在全局或页面配置中声明为 Skyline 渲染，即 app.json 或 page.json 配上 "renderer": "skyline"
在全局或页面配置中声明使用新版 glass-easel 组件框架，即 { "componentFramework": "glass-easel" }
Skyline 不支持页面全局滚动，需在页面配置加上 "disableScroll": true （使之与 WebView 保持兼容），在需要滚动的区域使用 scroll-view 实现
Skyline 不支持原生导航栏，需在页面配置加上 "navigationStyle": "custom" （使之与 WebView 保持兼容），并自行实现自定义导航栏
在全局配置中声明默认 block 布局，即 app.json 配上 "rendererOptions": { "skyline": { "defaultDisplayBlock": true } } ，详见开启默认 Block 布局
在全局配置中声明默认 content-box 布局，即 app.json 配上 "rendererOptions": { "skyline": { "defaultContentBox": true } } ，详见开启默认 ContentBox 盒模型
组件适配，参考 Skyline 基础组件支持与差异
WXSS 适配，参考 Skyline WXSS 样式支持与差异

按照指引适配后，可以保证在微信低版本或 PC 端 fallback 到 WebView 渲染时，也能表现正确

更多详细指引参考最佳实践和兼容建议

由于 Skyline 默认接入 We 分析的 AB 实验，未配置的情况下，页面渲染仍为 WebView 引擎，可通过以下方式正确切到 Skyline 渲染

迁移完 Skyline 之后，为了让开发者能够针对 Skyline 逐步灰度放量，并且与 WebView 对比性能表现，我们在 We 分析提供了 AB 实验机制。

因此，需要在 We 分析配置之后，小程序用户才可以命中 Skyline 渲染，需要注意的是， 小程序开发者也会受 AB 实验影响 。操作步骤如下：

首先，进入 We 分析，在 AB 实验 > 实验看板，点击“新建实验”

接着，实验类型选择 小程序基础库实验 ，然后按需选择实验层级并分配流量， 如果是小范围调试，可分配 0% 流量，并在 Skyline 渲染 的实验分组里填上测试微信号

最后，创建实验即可生效。后续经 AB 实验验证稳定后，需在 We 分析上先关闭实验再选择 Skyline 全量

考虑到本地调试时，配置 AB 实验会稍微繁琐一些，并且也会需要对比 WebView 的表现，我们提供了快捷切换渲染引擎的入口。

该入口只对开发版/体验版小程序生效，入口为：小程序菜单 > 开发调试 > Switch Render，会出现三个选项，说明如下：

Auto ：跟随 AB 实验，即对齐小程序正式用户的表现
WebView ：强制切为 WebView 渲染。 强切后，开发版、体验版、正式版均为 WebView 渲染，需手动切到 Auto 才能恢复
Skyline ：若当前页面已迁移到 Skyline，则强制切为 Skyline 渲染。 强切后，开发版、体验版、正式版均为 Skyline 渲染，需手动切到 Auto 才能恢复

通过客户端菜单：

打开开发版/体验版小程序，点击菜单即可查看当前页面是否使用 Skyline 渲染。
通过 vConsole 按钮的右上角的红底文案识别
vConsole 的路由日志

路由日志中会包含页面路由的目标页面、路由类型和目标页面的渲染后端。

一个可能的日志形如： On app route: pages/index/index (navigateTo), renderer: skyline ，代表通过 navigateTo 跳转到了 pages/index/index ，渲染后端为 skyline
通过接口判断

页面和自定义组件示例上有属性 renderer ，可以用于判断当前组件的实际渲染后端，如：
```
Page({
  onLoad() {
    console.log(this.renderer)
```