MUI页面的创建、显示、关闭

1. mui.init({ 
2.     subpages:[{ 
3.       url:your-subpage-url,//子页面HTML地址，支持本地地址和网络地址 
4.       id:your-subpage-id,//子页面标志 
5.       styles:{ 
6.         top:subpage-top-position,//子页面顶部位置 
7.         bottom:subpage-bottom-position,//子页面底部位置 
8.         width:subpage-width,//子页面宽度，默认为100% 
9.         height:subpage-height,//子页面高度，默认为100% 
10.         ...... 
11.       }, 
12.       extras:{}//额外扩展参数 
13.     }] 
14.   }); 

子页面相当于在html中使用iframe，所有的浏览器都支持，不依赖h5+api，但是没办法控制创建时隐藏页面，而且显示动画效果只能是"fade-in"；

　　另外，如果子页面已经显示，但是被其它子页面遮盖时，再次显示时，不会有动画效果，解决办法是，先隐藏，然后再显示。

二、打开新页面（非子页面）
 

1. mui.openWindow({ 
2.     url:new-page-url, 
3.     id:new-page-id, 
4.     styles:{ 
5.       top:newpage-top-position,//新页面顶部位置 
6.       bottom:newage-bottom-position,//新页面底部位置 
7.       width:newpage-width,//新页面宽度，默认为100% 
8.       height:newpage-height,//新页面高度，默认为100% 
9.       ...... 
10.     }, 
11.     extras:{ 
12.       .....//自定义扩展参数，可以用来处理页面间传值 
13.     }, 
14.     createNew:false,//是否重复创建同样id的webview，默认为false:不重复创建，直接显示 
15.     show:{ 
16.       autoShow:true,//页面loaded事件发生后自动显示，默认为true 
17.       aniShow:animationType,//页面显示动画，默认为”slide-in-right“； 
18.       duration:animationTime//页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒； 
19.     }, 
20.     waiting:{ 
21.       autoShow:true,//自动显示等待框，默认为true 
22.       title:'正在加载...',//等待对话框上显示的提示内容 
23.       options:{ 
24.         width:waiting-dialog-widht,//等待框背景区域宽度，默认根据内容自动计算合适宽度 
25.         height:waiting-dialog-height,//等待框背景区域高度，默认根据内容自动计算合适高度 
26.         ...... 
27.       } 
28.     } 
29. }) 

mui框架在打开新页面时等待框的处理逻辑为：

　　显示等待框-->创建目标页面webview-->目标页面loaded事件发生-->关闭等待框；

因此，只有当新页面为新创建页面（webview）时，会显示等待框，否则若为预加载好的页面，则直接显示目标页面，不会显示等待框。

三、预加载页面
方式1：
 

1. mui.init({ 
2.   preloadPages:[ 
3.     { 
4.       url:prelaod-page-url, 
5.       id:preload-page-id, 
6.       styles:{},//窗口参数 B5教程网 
7.       extras:{},//自定义扩展参数 
8.       subpages:[{},{}]//预加载页面的子页面 
9.     } 
10.   ], 
11.   preloadLimit:5//预加载窗口数量限制(一旦超出,先进先出)默认不限制 
12. }); 

可预加载多个页面，但不会返回预加载每个页面的引用，若要获得对应webview引用，还需要通过plus.webview.getWebviewById方式获得；另外，因为mui.init是异步执行，执行完mui.init方法后立即获得对应webview引用，可能会失败。

方式2：

1. var page = mui.preload({ 
2.     url:new-page-url,