MUI窗口管理

官方文档

页面初始化

在app开发中，若要使用HTML5+扩展api，必须等plusready事件发生后才能正常使用，mui将该事件封装成了mui.plusReady()方法，涉及到HTML5+的api，建议都写在mui.plusReady方法中。如下为打印当前页面URL的示例：

mui.init()    mui插件初始化mui.ready()    当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,//等待框背景区域高度，默认根据内容自动计算合适高度        ......      }    }})

关闭页面

mui框架将窗口关闭功能封装在mui.back方法中，具体执行逻辑是：

若当前webview为预加载页面，则hide当前webview； 否则，close当前webview；
在mui框架中，有三种操作会触发页面关闭（执行mui.back方法）：

点击包含.mui-action-back类的控件 在屏幕内，向右快速滑动 Android手机按下back按键

mui.init({    swipeBack:true //启用右滑关闭功能});

创建滑动区域

<div class="mui-scroll-wrapper">                <div class="mui-scroll">                    <!--这里放置真实显示的DOM内容-->                </div>            </div>

<script src="js/mui.min.js"></script>    <script>        mui.init();        mui('.mui-scroll-wrapper').scroll();        mui('mui-scroll').scroll();    </script>

---

预加载

---

方式一：通过mui.init方法中的preloadPages参数进行配置.

mui.init({  preloadPages:[    {      url:prelaod-page-url,      id:preload-page-id,      styles:{},//窗口参数      extras:{},//自定义扩展参数      subpages:[{},{}]//预加载页面的子页面    }  ],  preloadLimit:5//预加载窗口数量限制(一旦超出,先进先出)默认不限制});

该种方案使用简单、可预加载多个页面，但不会返回预加载每个页面的引用，若要获得对应webview引用，还需要通过plus.webview.getWebviewById方式获得；另外，因为mui.init是异步执行，执行完mui.init方法后立即获得对应webview引用，可能会失败，例如如下代码：

mui.init({  preloadPages:[    {      url:'list.html',      id:'list'    }  ]});var list = plus.webview.getWebviewByid('list');//这里可能返回空；

方式二：通过mui.preload方法预加载.

var page = mui.preload({    url:new-page-url,    id:new-page-id,//默认使用当前页面的url作为id    styles:{},//窗口参数    extras:{}//自定义扩展参数});

通过mui.preload()方法预加载，可立即返回对应webview的引用，但一次仅能预加载一个页面；若需加载多个webview，则需多次调用mui.preload()方法；