混合開發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！