HBuilder完成webApp入門（3） 關於webview (轉)

  個人認為WebView是 html5+ API的一個非常重要的部分。

 WebView 的幫助文檔http://www.html5plus.org/doc/zh_cn/webview.html

為什么對WebView的掌握很重要？因為它是一個HTML5+ APP的基礎。剛剛學習HBuilder的同學一般會將重點放在 mui 組件上。mui 提供了很多默認的方法，如 openWindow(打開新頁面)，back(回退到上一個窗口)等等，不會意識到其實你操作的就是WebView對象。

 那么在HBuilder的引擎中，WebView是一種什么樣的實現呢？請參看下圖：

從上面的圖我們可以看到，每個頁面其實就是對應一個WebView對象。每個WebView有自己的javascript運行環境，各個WebView之間不會干擾。同時，所有WebView會共享storage，session等信息。

 如果你之前有Web開發經驗，會知道在瀏覽器里從一個頁面轉入到新的頁面的時候，舊的頁面就無論如何也看不到了---除非你有一個返回的處理。

但是HBuilder就不同了。

正如上面的圖所示，每次遷移到新的畫面的時候，打開了一個新的WebView，但是舊的WebView其實還停留在那里，只不過新的WebView覆蓋在了上面。

 當然，如果你直接使用plus.Webview的方法，如create, show 是可以的。但是HBuilder給我們提供了更好的方法，就是 mui 庫的 openWindow, preload 等方法

在 mui 中，默認有后退的功能，也就是返回到上一個頁面。我們可以看看 back 的代碼：

$.registerBack = function(back) {
    return $.regesterHandler('backs', back);
};
/**
 * default
 */
$.registerBack({
    name: 'browser',
    index: 100,
    handle: function() {
        if (window.history.length > 1) {
            window.history.back();
            return true;
        }
        return false;
    }
});
/**
 * 后退
 */
$.back = function() {
    if (typeof $.options.back === 'function') {
        if ($.options.back() === false) {
            return;
        }
    }
    $.each($.backs, function(index, back) {
        return !back.handle();
    });
};

 我們可以看到，back 調用的其實是 window.history.back()，這應該依賴於瀏覽器內核的實現。因為HTML5+ API 不涉及瀏覽器內核的標准定義，也沒有 webview 的生命周期的標准定義，所以大家一定要注意控制 webview 的生命周期，以避免重復創建出來多個 webview。