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

  1. Skyline渲染模式

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

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

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

    值得注意的是，在微信开发者工具-详情内的选项“开启Skyline渲染模式”不一定有效。它可能只控制模拟器的渲染。配置渲染模式应当在app.json内进行。

    真正返回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",

  1. Echarts图表的滚动穿透问题

    1
    2
    3
    <view class="echarts">
      <ec-canvas type="2d" id="myChart" disable-scroll="true" canvas-id="myChart" ec="{{ec1}}" ></ec-canvas>
    </view>

    假如你根据上面的代码，或者ehcarts的例子配置了图表，并且还给父级元素设置了scroll，允许其滚动，滚动之后，在模拟器上，就可能出现下面的问题。图表不会随着父元素位移。

    正常渲染
    错误渲染

    GitHub：为什么ec-canvas不能跟着直接父元素进行滚动 · Issue #940 · ecomfe/echarts-for-weixin

    参考上面这个Issues，简单说就是微信小程序对canvas的不兼容，所以这个特性优化不了。但是这个情况在真机上不会出现。想要优化在模拟器上的问题，可以在上面的配置代码中加一句force-use-old-canvas="true"，强制用旧渲染模式，就可以了。

    但是此时真机上会出现图表随着滚动震颤的问题，解决办法也很简单，等上线时再删掉这句，就好了。

    1
    2
    3
    <view class="echarts">
      <ec-canvas type="2d" id="myChart" disable-scroll="true" canvas-id="myChart" ec="{{ec1}}" force-use-old-canvas="true"></ec-canvas>
    </view>

持续更新中…（或许吧）