# 兼容

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 一定需要应用到整个小程序吗？

  不需要，Skyline 支持按页面粒度开启，建议开发者逐个页面适配，降低兼容的开发难度。

• 切换 Skyline后，为什么某些布局被挤压？

  box-sizing 默认值为 border-box，可能会导致元素空间不足被挤压。如需改成默认 content-box，开发者可在 app.json 的 skylineOptions 里配置 defaultContentBox: true。

• 开启 Skyline 后布局错乱

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

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

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

• 伪类及伪元素部分支持

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

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

• 切换 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 不支持 <style> 选择器匹配，可自行转成内联的方式；不支持 rgba 格式，可使用 fill-opacity 替代；建议用 SVGO 在线工具优化

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

  • 可留意是否存在跨自定义组件的样式匹配，Skyline 下 tag 和 id 选择器不支持跨自定义组件匹配，而 class 则遵循 组件样式隔离机制
  • Skyline 上如果开启默认 Block 布局，则自定义组件节点为 display: block，可留意是否会对样式有影响 8.0.43 起，默认行为已调整

• WebView scroll-view 横向滚动不生效

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

• icon-font 图标不显示

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

• 当 scroll-view 包含的内容较多时，为什么 boundingClientRect 无法执行？

  由于 scroll-view 的直接子节点（第一层节点）是按需渲染，即直接子节点不在屏时不会渲染，无法获取到节点尺寸，因此当 boundingClientRect 通过 query.selectAll 获取时，无法立即获取节点尺寸，只有在所有节点渲染才能获取。建议开发者尝试调整为逐个获取节点的 boundingClientRect。

• 切换 Skyline 后，为什么 map / canvas / video / camera 在微信开发者工具渲染失败？

  在 Skyline 模式下，微信开发者工具暂未支持调试原生组件，建议开发者使用真机预览完成调试。

• 在 Skyline 模式下，为什么微信开发者工具热重载无响应？

  目前 Skyline 模式暂不支持热重载，建议先关闭热重载，重新编译来预览渲染结果。后续平台将支持热重载能力。