# 兼容

Skyline 目前率先在安卓平台推出,其它各端的情况见下表

平台 支持版本 备注
安卓 8.0.25+ 持续迭代中
iOS 未支持 预计下个版本推出
开发者工具 Nightly 1.06.2207222+ 持续迭代中
Windows 未支持 暂无计划
Mac 未支持 暂无计划
企业微信 未支持 暂无计划

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

# 兼容方法

样式兼容

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

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

对于具体样式兼容的策略上,由于 Skyline 中部分样式的默认值与 web 不同,因使用默认值而省略的样式需要显示指定,如 flex-direction: row,除此之外,还可以使用冗余样式的方法兼容,如

.container {
    height: 100px; /* Skyline 不支持 calc,只会应用这一行 */
    height: calc(50px + 3rem); /* WebView 两者都支持,最终会应用这一行 */
}

根据不同 renderer 兼容

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

<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 组件库

  • 不支持伪类及伪元素

    对于伪类,可通过按需添加 class 替代,如 :first-of-type 则手动给列表里同一类型标签的第一项加个 .first-of-type class。后续版本有计划支持常用的 :first-child:last-child 伪类

    对于伪元素,需要改为添加真实的 WXML 节点实现,若是为了实现 1 物理像素的效果,可直接使用小数点而不是伪元素,如 0.5px

  • 全局固定元素失效

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

  • 多段文本无法内联

    因不支持 inline 布局导致,需改成 flex 布局实现,或者使用 text 组件包裹多段文本,而不是用 view 组件包裹

  • 长文本的省略样式失效

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

  • z-index 表现异常

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

  • weui 扩展库无法使用

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

  • 无限循环 loading 失效

    暂不支持 css animation,可使用 worklet 动画机制实现

  • svg 渲染不出来

    Skyline 上的 SVG 不支持 <style> 选择器匹配,可自行转成内联的方式

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

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

  • scroll-view 横向滚动不生效

    横向滚动需打开 enable-flex 以兼容 WebView,同时设置如下样式

    .wx-scroll-view-flex :is(div):not(.wx-scroll-view-flex) {
      width: auto!important;
    }