hbuilder中進行視窗管理有2種方式，一種是用了mui框架，可以用mui提供的管理方式，都封裝好了。

還有一種是沒有用mui,可以直接通過最底層的plus.webview來管理視窗的操作。

我們建立一個H5+的專案，在common.js中預設有對視窗管理的程式碼，可以直接使用。

在使用的過程中我遇到了下面的問題：

1，在APP下面有一個toolbar，目前每次點選一個按鈕都是通過webview建立一個新的view，view中去載入網頁（我們的功能實現都是通過h5的方式嵌入到app中）

common.js提供的方法原始碼如下：

/**
 * 開啟新視窗
 * @param {URIString} id : 要開啟頁面url
 * @param
 
 {boolean} wa : 是否顯示等待框
 * @param {boolean} ns : 是否不自動顯示
 * @param {JSON} ws : Webview視窗屬性
 */
w.clicked=function(id,wa,ns,ws){
    if(openw){//避免多次開啟同一個頁面
        return null;
    }
    if(w.plus){
        wa&&(waiting=plus.nativeUI.showWaiting());
        ws=ws||{};
        ws.scrollIndicator||(ws.scrollIndicator='none'
 
);
        ws.scalable||(ws.scalable=false);
        var pre='';//'http://192.168.1.178:8080/h5/';
        openw=plus.webview.create(pre+id,id,ws);
        ns||openw.addEventListener('loaded',function(){//頁面載入完成後才顯示
//      setTimeout(function(){//延後顯示可避免低端機上動畫時白屏
            openw.show(as);
            closeWaiting();
//      },200);
 

        },false);
        openw.addEventListener('close',function(){//頁面關閉後可再次開啟
            openw=null;
        },false);
        return openw;
    }else{
        w.open(id);
    }
    return null;
};

我們直接呼叫clicked(‘http://cxytiandi.com‘,true)就可以開啟猿天地的首頁，APP中toolbar對應的幾個模組的主頁肯定會來回切換的，導致每次切換都需要重新渲染，我通過改造clicked方法來實現下面的需求：

• 如果頁面對應的view沒建立，就建立新的
• 如果頁面對應的view已經存在，就直接開啟已經存在的

直接上改造後的程式碼：

wa&&(waiting=plus.nativeUI.showWaiting());
        ws=ws||{};
        ws.scrollIndicator||(ws.scrollIndicator='none');
        ws.scalable||(ws.scalable=false);
        var pre='';//'http://192.168.1.178:8080/h5/';
        if(ws.createNew==false){
            openw = plus.webview.getWebviewById( id );
            if (openw == null) {
                openw=plus.webview.create(pre+id,id,ws);
            } else {
                openw.show(as);
                closeWaiting();
                return openw;
            }
        } else {
            openw=plus.webview.create(pre+id,id,ws);
        }

通過在ws物件中加一個createNew引數來決定是否要建立新的view,如果配置為false的話，就通過plus.webview.getWebviewById去查詢之前有沒有建立過，有就直接顯示，不用建立了，使用程式碼如下：

clicked('http://cxytiandi.com',true, false,{createNew:false});

2,通過webview開啟的頁面，可以通過back()來返回到上個頁面，原始碼如下：

// 處理返回事件
w.back=function(hide){
    if(w.plus){
        ws||(ws=plus.webview.currentWebview());
        if(hide||ws.preate){
            ws.hide('auto');
        }else{
            ws.close('auto');
        }
    }else if(history.length>1){
        history.back();
    }else{
        w.close();
    }
};

有些場景，比如在我的主頁點選關注的使用者，進入使用者主頁，在使用者主頁取消關注，然後回退到我的主頁中，回退相當於重新開啟之前開啟過的view,這個時候我的頁面中的關注數還是之前的，取消關注的並沒有從總關注數中減去，今天我在回退的基礎上做了擴充套件，
可以支援回退的時候指定是否要重新整理上個頁面，可以解決這個問題。

但是重新整理頁面其實使用者體驗很差的，最好的辦法是非同步載入，只改變需要改變的地方，為了支援這個我還加了一個回撥的方法，可以支援方法回撥，你可以自己寫邏輯去實現資料重新整理。

主要還是改造clicked方法，因為view是在clicked中建立的，在回退的時候我們可以通過監聽view的close方法來實現這個操作

openw.addEventListener('close',function(){//頁面關閉後可再次開啟
            //可以設定頁面關閉時回撥的方法，可以對資料進行重新載入操作
            if(callback){
                callback(callbackParams);
            }
            //頁面關閉時需要重新整理上個頁面
            if (ws.closeRefresh==true){
                window.location.reload();
            }
            openw=null;
        },false);

完整的clicked方法如下：

/**
 * 開啟新視窗
 * @param {URIString} id : 要開啟頁面url
 * @param {boolean} wa : 是否顯示等待框
 * @param {boolean} ns : 是否不自動顯示
 * @param {JSON} ws : Webview視窗屬性
 * @param {function} callback : 頁面回退關閉時執行的回撥方法
 * @param {JSON} callbackParams : 回撥方法的引數
 */
w.clicked=function(id,wa,ns,ws,callback,callbackParams){
    /*if(openw){//避免多次開啟同一個頁面
        return null;
    }*/
    if(w.plus){
        wa&&(waiting=plus.nativeUI.showWaiting());
        ws=ws||{};
        ws.scrollIndicator||(ws.scrollIndicator='none');
        ws.scalable||(ws.scalable=false);
        var pre='';//'http://192.168.1.178:8080/h5/';
        if(ws.createNew==false){
            openw = plus.webview.getWebviewById( id );
            if (openw == null) {
                openw=plus.webview.create(pre+id,id,ws);
            } else {
                openw.show(as);
                closeWaiting();
                return openw;
            }
        } else {
            openw=plus.webview.create(pre+id,id,ws);
        }

        ns||openw.addEventListener('loaded',function(){//頁面載入完成後才顯示
//      setTimeout(function(){//延後顯示可避免低端機上動畫時白屏
            openw.show(as);
            closeWaiting();
//      },200);
        },false);
        openw.addEventListener('close',function(){//頁面關閉後可再次開啟
            //可以設定頁面關閉時回撥的方法，可以對資料進行重新載入操作
            if(callback){
                callback(callbackParams);
            }
            //頁面關閉時需要重新整理上個頁面
            if (ws.closeRefresh==true){
                window.location.reload();
            }
            openw=null;
        },false);
        return openw;
    }else{
        w.open(id);
    }
    return null;
};

回退關閉時重新整理使用程式碼如下：

clicked('http://cxytiandi.com',true, false,{closeRefresh:true});

回退關閉時執行回撥程式碼使用程式碼如下：

clicked('http://cxytiandi.com',true, false,{},ref,{id:1001});

function ref(data) {
   console.log(data.id);
}

3, 安卓手機上都有一個回退的按鈕，相當於蘋果中從左往右滑動，到了主頁的時候如果點選了2次回退的按鈕，需要提示是否退出app,這個可以通過監聽來實現：

function plusReady(){
    ws=plus.webview.currentWebview();
    // Android處理返回鍵
    plus.key.addEventListener('backbutton',function(){
        var hurl = window.location.href;
        if(hurl.indexOf("/house/index") > 0 || hurl.indexOf("/quotations/index") > 0
                || hurl.indexOf("/loanInfo/list") > 0 || hurl.indexOf("/selfInfo/index") > 0) {
            plus.nativeUI.confirm("確認退出",function(e) {
                if(e.index == 0) {
                    plus.runtime.quit(); 
                }
            });
        } else {
            back();
        }
    },false);
    compatibleAdjust();
}