h5+app项目中遇到切换页面白屏问题的解决方案

总结就是使用预加载的方案 ，本篇仅作记录学习。

因为公司项目代码中用到了mui , 可以使用 mui 的 预加载

mui.init({
  preloadPages:[
    {
      url:prelaod-page-url,
      id:preload-page-id,
      styles:{},//窗口参数
      extras:{},//自定义扩展参数
      subpages:[{},{}]//预加载页面的子页面
    }
  ],
  preloadLimit:5//预加载窗口数量限制(一旦超出,先进先出)默认不限制
});

在创建新页面跳转时,可以加上show参数，event指定为loaded：

mui.openWindow({
    url: url,
    show:{
        event:"loaded"//在当前页面加载,加载完在跳转
        },
    waiting: {
        autoShow: true, //自动显示等待框，默认为true
        title: '加载中...'
        }
});

如果使用的是plus.webview：

    var sub = plus.webview.create(url, id, params);
    // 新增加载监听 等页面加载完毕后显示，防止出现切换页面白屏
    sub.addEventListener('loaded',function(){
         sub.show();
    },false);