# compatible

Skyline The current support for each end is shown in the table below

It can be seen that if the Mini Program is not only running in the latest version of WeChat mobile, you need to pay attention to the compatibility. WebView Here we have compiled some compatibility methods and common compatibility problems.

# Compatible method

# Style compatibility

Skyline and WebView The main difference is style support, so most compatibility work is focused on style adaptation, where you can take advantage of the developer tools' WXML Debugging tools, by locating to the problem node, analysis of the corresponding style compatibility.

Also, keep an eye out for the Developer Tools debugger console Panel, for unsupported styles will be given warning Log, which can be adjusted according to the log

For specific style compatibility strategies, because Skyline The default values for some styles in web Different, styles omitted by using default values need to be displayed, such as flex-direction: row, but more recommended here[Open default Block placement](../wxss.md#Turn on the default block layout), the default value handles the same value as the web For more information, see Skyline WXSS Style Support and Differences

# According to different Renderer compatible

Sometimes, simply using WXML and WXSS When compatibility is not possible, you can use JS To judge whether Skyline In order to use different WXML or WXSS Achieved. We have added a page or component instance Renderer Member, with the value of webview or skyline, Refer to the following code

<view class="position {renderer}} ></view>

.position {
    position: fixed
}
.position.skyline {
    position: absolute
}

Page({
    data: {
        renderer: 'webview'
    },
    onLoad() {
        this.setData({
            renderer: this.renderer,
        })
    },
})

# Common Compatibility Issues

• Skyline Does it have to be applied to the entire Mini Program?

  No need, Skyline Support by page granularity, progressive migration.

• open Skyline Post layout derangement

  Usually the default flex Layout and box-sizing The default is border-box Resulting in,Recommend the developer to open[default Block placement](../wxss.md#Turn on the default block layout)and[Default ContentBox Box Model](../wxss.md#Open the default contentbox box model)。

• to switch over After Skyline, why does the top native navigation bar disappear?

  Does not support native navigation bar, need to implement your own, or use [weui Component library](https://github.com/WeChat mini-program /weui-miniprogram /tree/feat-skyline/src/components/navigation-bar)

• to switch over Skyline Later, why? position: absolute Relative coordinates are not accurate?

  in Skyline Mode, all nodes by default are Relative, which may lead to absolute Relative coordinates are off. Suggest that the developer modify the node position Or change the relative coordinates.

• Multiple text cannot be inline

  Because they do not support inline Layout leads to, need to be changed to flex Layout implementation, or use the text Component to wrap multiple pieces of text, instead of using view Component wrap, can also be used span Package package text and image Mix inline. Such as <span><image /></span>、<span><view style="width: 50px"/></span>

• Ellipsis style invalidation of single-line text

  text-overflow: ellipse Only in text Take effect on the component and cannot be applied to the view On the component, you also need to declare white-space: nowrap as well as overflow: hidden, It is recommended to use the direct <text overflow="ellipsis"/>

• Ellipsis style invalidation of multi-line text

  On the basis of the single line text ellipsis, by text Component max-lines Property sets the maximum number of rows, that is, <text max-lines="2"></text>

• z-index Abnormal performance

  This is due to Skyline Not support web Due to the standard cascading context, applied only before nodes of the same level z-index Is effective, and the value can be adjusted according to the actual situation

• weui Extension library cannot be used

  The platform is supporting extended libraries and is expected to go live in the near future. Developers are advised to use npm install [weui Component library](https://github.com/WeChat mini-program /weui-miniprogram ) Later, will Node_ modules/weui-miniprogram The miniprogram under_ dist Replaced by [link](https://github.com/WeChat mini-program /weui-miniprogram /blob/feat-skyline-524/miniprogram_dist.zip) to hit the target miniprogram_Dist, and then build it in the WeChat development tool npm Just...

• Components not supported animate Animation interface

  Components not supported animate Animation interface. If you want to achieve the relevant effect, you can use the worklet Animation mechanism Realization

• svg Rendering incorrect

  Skyline On SVG Not support