微信小程序 黑色背景 页面跳转闪屏

当微信小程序使用黑色背景，页面跳转时会出现闪屏现象。在微信开发工具中没有出现此问题，但是在真机测试中 苹果显示正常，安卓会出现页面闪屏现象 。

在微信小程序论坛中，也有很多人反映，但是官方至今也未解决。有人推测可能是和安卓底层渲染有关。

但是不能直接重新更改UI，因此想出一个折中办法。

思路：

1    做一个白色背景遮罩

2    然后页面加载时 加载动画使该遮罩透明度变为0

效果如下：

预览图

 wxss

.mask{
  background: #e7c8b8;
  position: fixed;
  width: 100%;
  height: 100vh;
  opacity: 1;
  z-index: 2000;
}

wxml

<view class="mask" animation="{{animation}}" hidden="{{ismask}}">
</view>

js

onShow(){
    this.maskAnima();   
    //动画完成后将遮罩层隐藏
    setTimeout(() => {
      this.setData({
        ismask:true,
      })    
    }, 1000);
 },

//遮罩层动画
 maskAnima(){
    var animation = wx.createAnimation({
      duration: 1000,
      timingFunction: 'ease-out',
    });
    animation.opacity(0).step()
    this.setData({
      animation:  animation.export()
    })
  }