mui框架（一）
1.界面初始化
2.H5plus初始化
在APP开发中，如果用到了H5+的一些API或者接口，需要初始化另外一个函数，类属于 JS 中的window.onload 或者 window.ready
Mui.plusReady(); 所有涉及到H5+的东西，建议写到这个里面
mui.plusReady(function(){ var w = plus.webview.currentWebview(); console.log(w); });
3.创建子页面
为防止APP运行过程中内容滚动出现卡顿的现象，所以部分页面采用头部和内容分离的形式进行实现，比如头部导航和底部导航
mui.init({ subpages:[{ url:your-subpage-url,//子页面HTML地址，支持本地地址和网络地址 id:your-subpage-id,//子页面标志 styles:{ top:subpage-top-position,//子页面顶部位置 bottom:subpage-bottom-position,//子页面底部位置 width:subpage-width,//子页面宽度，默认为100% height:subpage-height,//子页面高度，默认为100% ...... }, extras:{}//额外扩展参数 }] });
4.打开界面
//打开新窗口 mui.openWindow({ url:'target.html', //需要打开页面的url地址 id:'target', //需要打开页面的url页面id styles:{ top:'0px',//新页面顶部位置 bottom:'0px',//新页面底部位置 //width:newpage-width,//新页面宽度，默认为100% //height:newpage-height,//新页面高度，默认为100% ...... }, extras:{ name:'aries', age:'18', //.....//自定义扩展参数，可以用来处理页面间传值 },show:{ //控制打开页面的类型 autoShow:true, //页面loaded事件发生后自动显示，默认为true aniShow:'zoom-fade-out',//页面显示动画，默认为”slide-in-right“； 页面出现的方式 左右上下 duration:'1000'//页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒； }, waiting:{ // 控制 弹出转圈框的信息 autoShow:true,//自动显示等待框，默认为true title:'东翌学院...',//等待对话框上显示的提示内容 options:{ width:'300px',//等待框背景区域宽度，默认根据内容自动计算合适宽度 height:'300px',//等待框背景区域高度，默认根据内容自动计算合适高度 ...... } } });
5.参数传递
mui.plusReady(function(){ var self = plus.webview.currentWebview(); //获得当前页面的对象 var name = self.name; //name 和 age 为传递的参数的键 var age = self.age; console.log(name); console.log(age); // 获得首页 专用的 var index = plus.webview.getLaunchWebview(); // 获得指定页面的对象 注意，要确保你的这个页面是存在的， 就是打开过的 var target = plus.webview.getWebviewById('目标页面的id'); });
6.控制页面load显示
show:{ // openwindow 函数内设置
autoShow:false
}
// 目标页面
//从服务器获取数据 ....
这里是业务逻辑
//业务数据获取完毕，并已插入当前页面DOM；
//注意：若为ajax请求，则需将如下代码放在处理完ajax响应数据之后；
mui.plusReady(function(){
//关闭等待框
plus.nativeUI.closeWaiting();
//显示当前页面
mui.currentWebview.show();
});
7.控制页面load显示
show:{ // openwindow 函数内设置
autoShow:false
}
// 目标页面
//从服务器获取数据 ....
//这里是业务逻辑
//业务数据获取完毕，并已插入当前页面DOM；
//注意：若为ajax请求，则需将如下代码放在处理完ajax响应数据之后；
mui.plusReady(function(){
//关闭等待框
plus.nativeUI.closeWaiting();
//显示当前页面
mui.currentWebview.show();
});
8.关闭界面
1，点击包含.mui-action-back类的控件
2，在页面上，向右快速滑动
3， Android手机按下back按键
mui框架封装的页面右滑关闭功能，默认未启用，若要使用右滑关闭功能，需要在mui.init();方法中设置swipeBack参数，如下：
mui.init({ swipeBack:true //启用右滑关闭功能 });
mui框架默认会监听Android手机的back按键，然后执行页面关闭逻辑； 若不希望mui自动处理back按键，可通过如下方式关闭mui的back按键监听:
mui.init({ keyEventBind: { backbutton: false //关闭back按键监听 } });
参考东翌编程
