WebView 的帮助文档:请点击这里
为什么对WebView的掌握很重要?因为它是一个HTML5+ APP的基础。刚刚学习HBuilder的同学一般会将重点放在 mui 组件上。mui 提供了很多默认的方法,如 openWindow(打开新页面),back(回退到上一个窗口)等等,不会意识到其实你操作的就是WebView对象。
那么在HBuilder的引擎中,WebView是一种什么样的实现呢?请参看下图:
从上面的图我们可以看到,每个页面其实就是对应一个WebView对象。每个WebView有自己的javascript运行环境,各个WebView之间不会干扰。同时,所有WebView会共享storage,session等信息。
熟悉Android开发的朋友会知道,Android里面也有一个 WebView,也是一个浏览器的内核。此WebView是否就是基于彼WebView扩展而来,我们无从得知,但是只要参照 HTML5+ API就好了。
(修正:得到HBuilder开发者的确认,WebView就是原生的WebView,HBuilder在其上封装了一层,便于Javascript的调用)
如果你之前有Web开发经验,会知道在浏览器里从一个页面转入到新的页面的时候,旧的页面就无论如何也看不到了---除非你有一个返回的处理。
但是HBuilder就不同了。
正如上面的图所示,每次迁移到新的画面的时候,打开了一个新的WebView,但是旧的WebView其实还停留在那里,只不过新的WebView覆盖在了上面。
当然,如果你直接使用plus.Webview的方法,如create, show 是可以的。但是HBuilder给我们提供了更好的方法,就是 mui 库的 openWindow, preload 等方法。
但是我们一定要知道,一个 webview 的生命周期是需要我们自己维护的。
在 mui 中,默认有后退的功能,也就是返回到上一个页面。我们可以看看 back 的代码:
</div> </div>
- $.registerBack = function(back) {
- return $.regesterHandler('backs', back);
- };