记录一下在开发微信小程序的时候，遇到的一些兼容性~~（玄学）~~问题。

  1. Skyline渲染模式

    目前个人还不是很推荐使用Skyline。一方面有些组件没有适配，会导致奇怪的兼容性问题，难以调整。

    本人在小程序中引入了Echarts图表，vant组件。然后取修改它们的样式。在Webview下，能保持和官方文档样式基本一致。但是在Skyline下，会出现各种神奇的问题。包括但不限于：

    • 下拉菜单的出现动画消失，收起动画能保持。
    • 单边border的圆角无法绘制，只绘制直线，直接写border可以绘制完整圆角的边框。
    • dropdown-menu的伪元素（小箭头）看起来在真机上失效了，不显示。
    • 由于伪元素在真机上不显示，导致图标丢失等系列问题。
    • 一些CSS样式根本不生效，vant组件内部的CSS变量无效。

    值得注意的是，在微信开发者工具-详情内的选项“开启Skyline渲染模式”不一定有效。它可能只控制模拟器的渲染。也就可能出现和我一样的情况，即在模拟器上用Webview一切正常，在真机上乱七八糟，还不知道为什么。

    真正返回Webview的办法，就是在app.json里删掉下面的代码：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    "renderer": "skyline",
    "rendererOptions": {
        "skyline": {
            "defaultDisplayBlock": true,
            "defaultContentBox": true,
            "tagNameStyleIsolation": "legacy",
            "disableABTest": true,
            "sdkVersionBegin": "3.0.0",
            "sdkVersionEnd": "15.255.255"
        }
    },
    "componentFramework": "glass-easel",

    持续更新中…（或许吧）