Webview模块管理应用窗口界面，实现多窗口的逻辑控制管理操作:
webview API文档
创建webview
plus.webview.create( url, id, styles, extras )
webview的显示
plus.webview.show( id_wvobj, aniShow, duration, showedCB, extras )
隐藏Webview
plus.webview.hide( id_wvobj, aniHide, duration, extras );
获取当前窗口的WebviewObject对象
plus.webview.currentWebview()
获取当前窗口的WebviewObject对象ID
plus.webview.currentWebview().id
查找指定标识的WebviewObject
plus.webview.currentWebview(id) //指定页面ID
创建并打开Webview窗口
plus.webview.open( url, id, styles, aniShow, duration, showedCB )
- 在编译器中创建main.html,news.html,set.html
- 输入快捷键
mheader按回车，在输入mtab按回车，整理代码如下:
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title" >首页</h1>
</header>
<nav class="mui-bar mui-bar-tab">
<div class="mui-tab-item mui-active" hr='main.html'>
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</div>
<div class="mui-tab-item" hr='new.html'>
<span class="mui-icon mui-icon-chatboxes"></span>
<span class="mui-tab-label">消息</span>
</div>
<div class="mui-tab-item" hr='set.html'>
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">设置</span>
</div>
</nav>
- 准备工作做好，开始写页面切换逻辑
1.创建页面，首个选项卡页面显示，其他选项卡页面隐藏
var views=['main.html','new.html','set.html']
views_style=[{top:'0px',bottom: '51px'},{top:'45px',bottom: '51px'},{top:'45px',bottom: '51px'}]
mui.plusReady(function(){
var self = plus.webview.currentWebview(); //获取当前页面对象
for(var i = 0 ; i<views.length ; i++){
var sub = plus.webview.create(views[i],views[i],views_style[i]); //创建页面
if(i>0){
sub.hide() //隐藏页面
}
self.append(sub) //显示页面apend()方法在html5plus文档中没有提到，这里的这个方法是将webview对象填充到窗口的方法。
}
})
执行之后main页面显示出来，但是点击选项卡按钮，页面无法切换，因为我们还没有给底部选项卡做点击监听事件，我们会发现头部导航栏的首页两个字没有显示出来，当我们把top:'0px'改成 top：45px之后又能显示，这设计到mui的一个潜规则，父子结构的页面子页面会比父页面层级高
2.选项卡添加点击事件
var activeTab=views[0]; //激活选项卡
var title= document.querySelector('.mui-title')
mui(".mui-bar-tab").on('tap','div',function(){
var tab = this.getAttribute('hr'); // 获取点击页面ID
if(activeTab==tab){
return;
}
plus.webview.show(tab); // 显示点击webview
plus.webview.hide(activeTab); //隐藏当前 webview
title.innerHTML=this.querySelector('.mui-tab-label').innerHTML
activeTab=tab;
})
this.getAttribute('hr')获取该按钮的hr属性的属性值
