# 兼容

Skyline 目前各端的支持情况见下表

可以看出，小程序若不是只跑在最新版本的微信移动端，则需要关注兼容 WebView 的情况，这里我们整理了一些兼容方法及常见的兼容问题

# 兼容方法

样式兼容

Skyline 与 WebView 的主要差异在于样式支持度，因此大部分兼容工作主要集中在样式适配，这里可以利用开发者工具的 WXML 调试工具，通过定位到有问题的节点，分析对应的样式兼容性。

另外，也可留意开发者工具调试器中的 console 面板，对于不支持的样式会给出 warning 日志，可根据日志进行调整

对于具体样式兼容的策略上，由于 Skyline 中部分样式的默认值与 web 不同，因使用默认值而省略的样式需要显示指定，如 flex-direction: row，但此处更推荐开启默认 Block 布局，默认值处理与 web 更接近，其它更多信息，详见 Skyline WXSS 样式支持与差异

根据不同 renderer 兼容

有时，单纯用 WXML 和 WXSS 无法做好兼容时，可以通过 JS 判断是否 Skyline 以使用不同的 WXML 或 WXSS 实现。我们在页面或组件实例增加了 renderer 成员，取值为 webview 或 skyline，参考以下代码

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

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

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

# 常见的兼容问题

• 开启 Skyline 后布局错乱

  大多是由于没有全局滚动而导致挤压，以及 flex-direction 默认为 column 造成。前者只需要加上 scroll-view，后者可以在声明了 display: flex 但又没指定 flex-direction 的地方显示指定 flex-direction: row。推荐开发者开启默认 Block 布局。

• 原生导航栏丢失

  不支持原生导航栏，需自行实现，或使用 weui 组件库

• 不支持伪类及伪元素

  对于伪类，目前只支持常用的 :first-child 和 :last-child 。其它伪类可通过按需添加 class 替代，如 :active 则手动给点击状态下的节点加个 .active class。

  对于伪元素，目前只支持 ::before 和 ::after。其它伪元素建议用真实 WXML 节点实现。

• 全局固定元素失效

  因不支持 fixed 导致，但由于没有全局滚动，在页面根节点下使用 absolute 即可达到 fixed 的效果，倘若封装原因无法移至页面根节点，可使用 root-portal 组件包裹

• 多段文本无法内联

  因不支持 inline 布局导致，需改成 flex 布局实现，或者使用 text 组件包裹多段文本，而不是用 view 组件包裹，也可以使用 span 组件包裹 text 和 image 混合内联。

• 单行文本的省略样式失效

  text-overflow: ellipse 只在 text 组件上生效，不能应用在 view 组件上，同时需要声明 white-space: nowrap 以及 overflow: hidden

• 多行文本的省略样式失效

  在单行文本省略的基础上，通过 text 组件的 max-lines 属性设置最长行数，即 <text max-lines="2"></text>

• z-index 表现异常

  这是由于 Skyline 不支持 web 标准的层叠上下文所致，只有在同层级的节点之前应用 z-index 才有效，可根据实际情况调整取值

• weui 扩展库无法使用

  暂不支持 weui 扩展库，适配中，可自行引入 weui-miniprogram Skyline 版本解决

• 无限循环 loading 失效

  暂不支持 css animation（开发中），暂先使用 worklet 动画机制 实现

• 不支持组件 animate 动画接口

  暂不支持组件 animate 动画接口。如需实现相关效果，可使用 worklet 动画机制 实现

• svg 渲染不出来

  Skyline 上的 SVG 不支持 <style> 选择器匹配，可自行转成内联的方式，或使用 SVGO 在线工具优化

• 自定义组件的样式表现不正确

  • 可留意是否存在跨自定义组件的样式匹配，Skyline 下 tag 和 id 选择器不支持跨自定义组件匹配，而 class 则遵循 组件样式隔离机制

  • Skyline 上如果开启默认 Block 布局，则自定义组件节点为 display: block，可留意是否会对样式有影响

• scroll-view 横向滚动不生效

  横向滚动需打开 enable-flex 以兼容 WebView，同时 scroll-view 添加样式 display: flex; flex-direction: row;，scroll-view 子节点添加样式 flex-shrink: 0;

• icon-font 图标不显示

  最新版本已支持伪元素，低版本可参考 代码片段 实现图标