??個人認為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 的代碼：

Js代碼??

$.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。

轉載于:https://www.cnblogs.com/lyn940208/p/6013849.html

總結

以上是生活随笔為你收集整理的HBuilder完成webApp入门（3） 关于webview (转)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。