WEB开发者之混合开发APP（七）， 预加载和自定义事件

混合开发App同h5页面开发，完全不同之一就是预加载技术。因为不可能所有的页面打开时，都需要重新创建，
（1） 每次重新创建页面，耗费性能；
（2）新建页面时，如果加载耗时较长，则会出现类似白屏问题，体验极差。

预加载和自定义事件，就可以解决这类问题。
（1）通过页面预加载，提前将页面内容加载完毕；
（2）触发页面的自定义事件，处理数据；
（3）打开页面，数据已经处理完毕，速度快。

1. 预加载

mui提供了2种方式的预加载。

---

1.1 preloadPages

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

该种方案优缺点如下：
（1）可预加载多个页面，但不会返回预加载每个页面的引用，若要获得对应webview引用，还需要通过plus.webview.getWebviewById方式获得；
（2）mui.init是异步执行的，执行完mui.init方法后，立即获得对应webview引用，可能会失败，例如：

mui.init({
  preloadPages:[
    {
      url:'list.html',
      id:'list'
    }
  ]
});
var list = plus.webview.getWebviewByid('list');//立即执行的话，这里可能返回空；

---

1.2 mui.preload

var page = mui.preload({
    url:new-page-url,
    id:new-page-id,//默认使用当前页面的url作为id
    styles:{},//窗口参数
    extras:{}//自定义扩展参数
});

该方案的优缺点：
（1）可立即返回对应webview的引用；
（2）一次仅能预加载一个页面，若需加载多个webview，则需多次调用mui.preload()方法；

2. 自定义事件

2.1 定义

//自定义事件，获取商品详情
window.addEventListener('productInfo',function(event){
    id = event.detail.id;  //获取自定义事件传入的参数,event.detail.xx 

    var data = {id:id};
    console.log("产品详情输入数据："+JSON.stringify(data));
    mui.post(productInfoURL,data,function(data){
        console.log("产品详情输出数据："+JSON.stringify(data));
        if(data.success){
            //数据处理
            $("#imgpic").attr("src",data.img); 
            $("#description").html($("#hdiv").text());
        }
    },'json');
});

2.2 调用

加入以上自定义事件在页面productdetail.html中，以下代码是在a.html中调用的方法：

var detailPage = mui.preload({
                url:'productdetail.html',
                id:'productdetail.html'
});
//触发详情页自定义事件
mui.fire(detailPage,'productInfo',{id:id});  //id是传入的商品id

//打开详情页面
mui.openWindow({
    id:"productdetail.html"
});

懂Html就能开发App，博文持续更新，博主QQ:260737830！