一、页面初始化
在app开发中，如果要使用html5+扩展api（http://www.html5plus.org/doc/h5p.html） 需要写在mui.plusReady()方法中，因为需要等plusready事件发生之后才能正常使用。
另外，mui.init 是插件初始化的方法
mui.ready() 当DOM准备就绪时，指定一个函数来执行。
例如：
mui.plusReady(function(){
console.log("当前页面URL："+plus.webview.currentWebview().getURL());
});
呵呵，以上代码反正我是行不通，弄了半天原来是用mui.ready()。
二、创建子页面
1、mui.openWindow()
因为openWindow（）方法是html5+扩展api封装的方法，所以在使用时，同样要放在mui.ready()里面。这个方法是重新打开一个子页面，代替了href。本例子中实在index.html中写该方法。所以代码直接跳转到list.html页面。
例如：
mui.ready(function(){
mui.openWindow({
url:'template/list.html',
id:'list.html',
styles:{
top:'45px',//mui标题栏默认高度为45px；
bottom:'0px'//默认为0px，可不定义；
}
})
})
2、mui.init()
在初始化页面时就初始化子页面，这样也可以把子页面添加到index.html页面中，避免重复书写相同的或者公共的部分头部底部。
例如:
<script type="text/javascript" charset="utf-8">
mui.init({
subpages:[{
url:'template/list.html',
id:'list.html',
styles:{
top:'45px',//mui标题栏默认高度为45px；
bottom:'0px'//默认为0px，可不定义；
}
}]
});
</script>
三、打开新页面
打开新页面就是上面提到的mui.openWindow（）方法，使用这个方法也是减少因为等待页面的加载出现的界面空白的问题，方法加载dom。这里具体说一下参数属性说明。
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,//等待框背景区域高度，默认根据内容自动计算合适高度
......
}
}
})
Styles：设置页面距离上下的距离和页面本身的宽高，如果不设置宽高，默认也是100%。
Extras：新窗口的参数设置
例如： var webview = mui.openWindow({ url:’template/list.html’, extras:{ name:’mui’ //扩展参数 } }); console.log(webview.name);//输出mui字符串
createNew:意思是是否重复创建相同ID的webview，一般参数微false，不重复创建。
Show:对象参数表示窗口显示的状态，autoshow表示窗口loaded之后是否自动显示。
anishow表示窗口显示动画。如果没有设置，新窗口从右侧划入。
Duration:表示动画窗口的延时时间，单位为ms。
Waiting:系统等待框参数。autoshow表示是否自动打开等待框，默认为true,但是需要注意的是，当为true时，如果目标窗口不显示，需要在目标窗口中手动关闭等待框，有可能是挡到目标窗口了。 关闭等待框的方式：plus.nativeUI.closeWaiting( )。
因为等待框处理的流程是： 显示等待框–>创建目标页面webview–>目标页面loaded事件发生–>关闭等待框
title：等待框上的提示文字
options表示等待框显示参数，比如宽高、背景色、提示文字颜色等
四、打开带原生导航的新页面
如果打开多个webview性能和资源损耗较大。为了解决这个问题，可以通过在mui.openWindow中的style节点中设置titleNView的参数。
例如：
mui.ready(function(){
mui.openWindow({
url:'template/list.html',
id:'list.html',
styles:{
top:'45px',//mui标题栏默认高度为45px；
bottom:'0px',//默认为0px，可不定义；
titleNView: { // 窗口的标题栏控件
titleText:"标题栏", // 标题栏文字,当不设置此属性时，默认加载当前页面的标题，并自动更新页面的标题
titleColor:"#000000", // 字体颜色,颜色值格式为"#RRGGBB",默认值为"#000000"
titleSize:"17px", // 字体大小,默认17px
backgroundColor:"#F7F7F7", // 控件背景颜色,颜色值格式为"#RRGGBB",默认值为"#F7F7F7"
progress:{ // 标题栏控件的进度条样式
color:"#00FF00", // 进度条颜色,默认值为"#00FF00"
height:"2px" // 进度条高度,默认值为"2px"
},
splitLine:{ // 标题栏控件的底部分割线，类似borderBottom
color:"#CCCCCC", // 分割线颜色,默认值为"#CCCCCC"
height:"1px" // 分割线高度,默认值为"2px"
}
}
}
})
})
这个真的好用，直接参数设置。 其实我还有一个方法就是把头部写成模板，给每个页面都加上，这样头部模板只要加载一次。不过还是比不上参数设置的方法。
五、关闭页面
关闭页面有几种方法：
1.使用.mui-action-back类的控件。
就是为控件添加这个类的话，都会含有关闭页面的功能。或者在HBuilder中敲mheader生成的代码块，会自动生成带有返回导航箭头的标题栏。
2.在屏幕内，向右快速滑动
mui.init();方法中设置swipeBack参数
例如：
mui.init({
swipeBack:true
});
3.mui框架默认会监听Android手机的back按键
4.mui.back()方法
mui.back()还可以处理窗口逻辑，比如说在关闭窗口前希望处理一些其它业务逻辑，这样可以把要处理的业务写在mui.init()的参数beforeback参数里面，beforeback是一个函数类型。
例如：
mui.init({ beforeback:function(){ return false // mui.back()不执行, true 继续执行mui.back()方法 } });
六、预加载
预加载就是用于还没出发页面跳转时预先加载好页面，这样就省了等待页面加载的时间，提升用户体验，更加接近原生app。MUI预加载有两种方式。
1.mui.init方法中的preloadPages参数的配
不过只是加载页面，不会加载页面上的引用，可以通过又因为mui.init是异步加载，虽然可以通过plus.webview.getWebviewByid（）方法加载页面应用，不过有可能会失败。
mui.init({
preloadPages:[
{
url:prelaod-page-url,
id:preload-page-id,
styles:{},//窗口参数
extras:{},//自定义扩展参数
subpages:[{},{}]//预加载页面的子页面
}
],
preloadLimit:5//预加载窗口数量限制(一旦超出,先进先出)默认不限制
var list = plus.webview.getWebviewByid('页面id');//这里可能返回空；
});
2.mui.preload方法预加载
不过但一次仅能预加载一个页面；若需加载多个webview，则需多次调用mui.preload()方法。
var page = mui.preload({ url:new-page-url, id:new-page-id,//默认使用当前页面的url作为id styles:{},//窗口参数 extras:{}//自定义扩展参数 });