# Environmental preparation

Skyline The specific supported versions are as follows:

WeChat Android Client 8.0.33 Or above (corresponding to the base library 2.30.4 Or above version)
Weixin iOS client 8.0.34 Or above (corresponding to the base library 2.31.1 Or above version)
Developer Tools Stable 1.06.2307260 Or above (it is recommended to use the Nightly Latest version)

Scan the code to quickly confirm that the environment is correct

# Debugging with developer tools

Developer tools provide the ability to align the mobile Skyline Rendering engine, support WXML Commissioning, WXSS Style error messages, new features, etc.

Follow these steps to switch to Skyline Mode:

in app.json or page.json Medium match renderer: skyline, and press the[Next section](#Start the migration)Add the configuration items, or add them one by one as prompted by the developer tools
Make sure the upper right corner > details > In the local settings. open Skyline Rendering debugging The option is checked on
use worklet When animating features, make sure that the upper right corner > details > In the local settings. Compile worklet code The option is checked on (The code package volume increases slightly)
Debugging the base coop to 3.0.0 Or above version

If there is an error during the switch, white screen and other issues, you can try to restart the developer tools to solve

Known Issues: Currently debugging with the Expansion Screen Skyline You can cut the developer tools back into the built-in display device

Known problem: real machine debugging is not supported

Known Issue: Hot Overload Not Supported

At this point, in the upper left corner of the simulator you can see the current Renderer for Skyline, see below

# Start the migration

Migration to Skyline, no big move dry cruise, we maintain the upper framework of the syntax, the interface is basically unchanged, only need to do local adjustments, mainly to strengthen the WXSS Constraints on styles, built-in components, and some features, the basic flow is as follows:

Skyline rely on Injection on demand Characteristics, which need to be app.json With "lazyCodeLoading": "requiredComponents"
Declared in a global or page configuration as Skyline Rendering, i.e. app.json or page.json With "renderer": "skyline"
Declare use of the new version in a global or page configuration glass-easel Component framework, i.e. { "componentFramework": "glass-easel" }
Skyline Does not support page global scrolling, need to add in page configuration "disableScroll": true(Make it consistent with WebView Keep it compatible), use it in areas that need to be scrolled scroll-view Realization
Skyline Does not support native navigation bar, need to be added in page configuration "navigationStyle": "custom"(Make it consistent with WebView Remain compatible), and implement your own custom navigation bar
Declare the default in the global configuration block Layout, i.e. app.json With "rendererOptions": { "skyline": { "defaultDisplayBlock": true } }, See[Open default Block placement](../wxss.md#Turn on the default block layout)
Declare the default in the global configuration content-box Layout, i.e. app.json With "rendererOptions": { "skyline": { "defaultContentBox": true } }, See[Open default ContentBox Box model](../wxss.md#Open the default ContentBox box model)
Component Adaptation, Reference Skyline Basic Component Support and Differences
WXSS Adaptation, Reference Skyline WXSS Style Support and Differences

Reference Code Template:https://developers.weixin.qq.com/s/zk4z0ymt7GMW

After adapting according to the guidelines, it can be guaranteed to be in the low version of WeChat or PC end fallback reach WebView When rendering, it can also perform correctly

More Detailed Guidance Reference Best practices and Compatibility Recommendations

# Preview the effect on the real machine

Because Skyline Default access We Analytical AB Experiment, the unconfigured case, the page rendering is still WebView Engine, can be properly cut to the Skyline rendering

To configure We Analysis AB Experiment, plus the white list, the operation steps are detailed inLower section
Stop We Analysis AB Experiments, enabled by default Skyline Rendering, the configuration is detailed inthis placeNo. 2 point
By quickly switching the entrance, strong cut to Skyline Rendering, the operation steps are detailed in[Lower section](#Quick Switch Entry)

# To configure We Analysis AB experiment

End of migration Skyline Later, in order to allow developers to target Skyline Progressive grayscale volume, and with the WebView Compared to performance performance, we are in [We Analysis](https://wedata.weixin.qq .com /) Provided the AB Experimental mechanism.

Therefore, there is a need in [We Analysis](https://wedata.weixin.qq .com /) Configuration before the Mini Program user can hit the Skyline Rendering, it should be noted that,Mini Program developers will also be affected by AB Experimental effectThe operation steps are as follows:

First, enter. [We Analysis](https://wedata.weixin.qq .com /), In AB experiment > Experiment Kanban, click "New Experiment"

Next, the experimental type is selected Mini Program basic library experiment, then select the experimental level and allocate the flow as needed.If you are debugging on a small scale, you can assign 0% Flow, and in Skyline rendering Fill in the test group with the test WeChat ID

Finally, create the experiment to take effect. Follow-up AB After experimental verification of stability, it is necessary to We Analytically close the experiment before selecting Skyline Total quantity

Click to see more We Analysis AB Experiment related content

# Quick Switch Entry

With local debugging in mind, the configuration AB The experiment will be a little more tedious and will also require comparison WebView We provide the entry for fast switching rendering engines.

This entry is for the development version only./Experience version of the Mini Program into effect, the entry is: Mini Program menu > Development and debugging > Switch Render, three options appear as follows:

Auto : Follow AB Experiment, that is, align the performance of the regular user of the Mini Program
WebView : Force Cut to WebView Rendering.After strong cut, the development version, experience version, and official version are WebView Render, restart WeChat and restore to Auto
Skyline : If the current page has been moved to Skyline, it is forced to cut to Skyline Rendering.After strong cut, the development version, experience version, and official version are Skyline Render, restart WeChat and restore to Auto

# How to identify if the current page is using Skyline

Via the client menu:

Open the development version/Experience version of the Mini Program, click the menu to see whether the current page is using Skyline Rendering.
adopt vConsole Red bottom copy recognition in the upper right corner of the button
vConsole The routing log of the

The route log contains the destination page of the page route, the route type, and the rendering backend of the destination page.

A possible log is like:On app route: pages/index/index (navigateTo ), renderer: skyline, Representatives through the navigateTo Jump to the pages/index/index, the rendering back end is skyline
Judging by the interface

There are properties on the page and custom component examples Renderer, can be used to determine the actual rendering backend of the current component, such as:
```
Page({
  onLoad() {
    console.log(this.renderer)
  }
})
```