兼容

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'
    },
    onl oad() {
        this.setData({
            renderer: this.renderer,
        })
    },
})

常见的兼容问题

• Skyline 一定需要应用到整个小程序吗？

  不需要，Skyline 支持按页面粒度开启，可渐进式迁移。

• 开启 Skyline 后布局错乱

  一般是默认 flex 布局及 box-sizing 默认为 border-box 导致，推荐开发者开启默认 Block 布局和默认ContentBox盒模型。

• 切换 Skyline后，为什么顶部原生导航栏消失？

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

• 切换 Skyline 后，为什么 position: absolute 相对坐标不准确？

  在 Skyline 模式下，所有节点默认是 relative，可能导致 absolute 相对坐标不准。建议开发者修改节点 position 或者修改相对坐标。

• 多段文本无法内联

  因不支持 inline 布局导致，需改成 flex 布局实现，或者使用 text 组件包裹多段文本，而不是用 view 组件包裹，也可以使用 span 组件包裹 text 和 image 混合内联。如 <span><image /></span>、<span><view style="width: 50px;"/></span>

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

  text-overflow: ellipse 只在 text 组件上生效，不能应用在 view 组件上，同时需要声明 white-space: nowrap 以及 overflow: hidden，建议直接使用 <text overflow="ellipsis"/>

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

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

• z-index 表现异常

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

• weui 扩展库无法使用

  平台正在支持扩展库，预计近期上线。建议开发者使用 npm 安装 weui 组件库 后，将 node_ modules/weui-miniprogram 下的miniprogram_ dist 替换为 链接 中的 miniprogram_dist，然后在微信开发中工具中构建 npm 即可。

• 不支持组件 animate 动画接口

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

• svg 渲染不正确

  Skyline 上的 SVG 不支持