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！