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 的代码：

Js代码  

1. $.registerBack = function(back) {  
2.     return $.regesterHandler('backs', back);  
3. };  
4. /** 
5.  * default 
6.  */  
7. $.registerBack({  
8.     name: 'browser',  
9.     index: 100,  
10.     handle: function() {  
11.         if (window.history.length > 1) {  
12.             window.history.back();  
13.             return true;  
14.         }  
15.         return false;  
16.     }  
17. });  
18. /** 
19.  * 后退 
20.  */  
21. $.back = function() {  
22.     if (typeof $.options.back === 'function') {  
23.         if ($.options.back() === false) {  
24.             return;  
25.         }  
26.     }  
27.     $.each($.backs, function(index, back) {  
28.         return !back.handle();  
29.     });  
30. };  

 我们可以看到，back 调用的其实是 window.history.back()，这应该依赖于浏览器内核的实现。因为HTML5+ API 不涉及浏览器内核的标准定义，也没有 webview 的生命周期的标准定义，所以大家一定要注意控制 webview 的生命周期，以避免重复创建出来多个 webview。