WebView(网络视图)能加载显示网页,可以将其视为一个浏览器。
当我们使用mui开发html5+app的时候,其实是调用了设备的webkit内核,即对浏览器的调用,浏览器再实现了设备接口对设备进行操作,目前实现的html5+可以调用摄像,录音,gps等这些更底层的东西,当然是针对移动设备浏览器内核而言的
我们甚至能使用iostream,关于文件流的应用,是实现在浏览器提供的沙盒目录中,
目前5+为了保证应用的安全,plus.io API限制了仅可访问应用沙盒的4个公开目录_www(只读)、_doc、_downloads、_documents,不允许访问其它目录,建议将下载的文件保存到上面三个可写目录中。
先来谈谈我对webview的理解。我们打个比方:
使用mui开发的app,纯粹的说还是html,打开的是网页,按照传统网页的方式去理解:
我们将app理解为浏览器,将webview理解为浏览器下不同标签tab,每一个tab也是一个不同的页面,浏览器浏览可以在tab之中切换,以此来实现app不同页面的切换,使用mui.openWindow表示创建新的tab标签(webview),每一个tab有自己的id,并且tab可以新增重复(createNew)
场景一:
在mainfest.json中我们配置的首页,比如login.html,然后我们启动app,login.html将会第一个呈现在我们屏幕上,这就是第一个tab标签(称之为launchWebView),如果此时我们关闭这个tab,那么浏览器没有其他tab将会关闭。
app也是一个道理,只有一个webView的情况下(假设就是launchWebView,首页),将会退出,可以在首页login.html使用plus.webview.getLaunchWebView()测试,app将会直接退出!
场景二:
浏览器已经有了首页的tab,我们新建一个tab,并且跳转到新tab下
app,webview使用了mui.openWindow()方法,该方法传入一些参数,如下官方说法:
mui.openWindow({ url:new-page-url, id:new-page-id, styles:{ top:newpage-top-position,//新页面顶部位置 bottom:newage-bottom-position,//新页面底部位置 width:newpage-width,//新页面宽度,默认为100% height:newpage-height,//新页面高度,默认为100% ...... }, extras:{ .....//自定义扩展参数,可以用来处理页面间传值 }, createNew:false,//是否重复创建同样id的webview,默认为false:不重复创建,直接显示 show:{ autoShow:true,//页面loaded事件发生后自动显示,默认为true aniShow:animationType,//页面显示动画,默认为”slide-in-right“; duration:animationTime//页面动画持续时间,Android平台默认100毫秒,iOS平台默认200毫秒; }, waiting:{ autoShow:true,//自动显示等待框,默认为true title:‘正在加载...‘,//等待对话框上显示的提示内容 options:{ width:waiting-dialog-widht,//等待框背景区域宽度,默认根据内容自动计算合适宽度 height:waiting-dialog-height,//等待框背景区域高度,默认根据内容自动计算合适高度 ...... } } })
openWindow打开了一个新的webView并且跳转到了新的webView,就像浏览器新建一个tab并且切换过去,只不过切换过程带了参数,实现了动画,等复杂的现象,这也是比浏览器访问网页的强大之处
openWindow有两个核心参数,一个是url表示打开的html文件,打开tab也得知道网页地址对吧?还一个是id,这个参数相当于句柄,以后寻找这个webview就靠它了
请注意:openWindow下有一个特殊的参数:createNew
如果它为false,使用openWindow打开新窗口的时候,会先判断是不是有一样id,url的webview,如果有直接切换过去,没有的话就新建一个窗口,跳过去!
如果它是true,使用openWindow打开新窗口的时候,不管有没有相同id的tab,都回去新创建一个,也就是可能会创建重复的webview,这是很蛋疼的,因为会造成app跳转webview时,与预期效果不同(跳转的webview不是自己想要的)
请尽量不要使用,除非特殊的页面需要创建多个重复的情况下
注:我遇到过创建了重复的webview后造成的自定义触发事件(fire)发生了意想不到的结果,在返回前,对返回页面的dom进行修改刷新,但dom并没有被改变,其实是因为重复webview,修改了别的!
场景三:
我要关闭一个页面!
方法一:触发mui.back()或返回事件,这里注意了back并不会像浏览器那样history.go(-1)返回上一页,而是相当于浏览器直接关闭当前tab,这儿比较特殊,不要使用对浏览器的理解!就是说mui.back()将会关闭当前的webview后返回上一个webview,此时我们如果使用plus.webview.getWebviewById()获取那个被返回的webview是查找不到,因为webview被关闭了,相当于浏览器
方法二:我不要返回,我要关闭指定的webview,那我使用plus.webview.getWebviewById().close(),比如关闭当前的页面,plus.webview.currentWebview().close(),这个方法的效果和mui.back()一样滴
方法三:直接清理掉,清理掉的话将会导致页面跳转不产生动画或者显示加载中,因为页面将被认为从未打开过,使用:plus.webview.getWebviewById().clear()
终结方法:如果我设置的主页是login.html,现在我的用户退出了登陆,那么我要清空他已经打开的所有webview,不留使用痕迹,使用如下代码:
owner.toLogin = function() { var all = plus.webview.all(); var launch = plus.webview.getLaunchWebview() //基座,不可以关掉 for(var i = 0; i < all.length; i++) { if(all[i] === launch) continue; all[i].close(); all[i].clear(); } //立刻退出 setTimeout(function() { launch.show();//不要重新打开login,app的基座就是login页面,直接show出来就行了 }, 0); }
其中不能粗鲁的把所有的webview统统关闭并清空,将会导致app直接关闭,只要仅剩的最后一个webview被关闭,也就默认app退出!
场景四:
打开已经打开过并且没有被close或者clear的webview:
使用:plus.webview.getWebviewById().show()
使用:plus.webview.getWebviewById().hide() //隐藏掉
注意:被关闭和清空,返回掉的webview将会返回null,不可以操作!
总结一下webview!
mui提供的plus对象封装了对webview的操作,hbuilder中输入plus.webview即可获取对象下面的变量
下面有三个get方法获取webview:
分别获取:基座(就是首页),当前顶部页面(其实就是当前显示的),根据id获得webview
返回的是WebViewObject,这个object下面有:
等等的方法,自行在hbuilder中查看吧!