mui框架（一）

1.界面初始化

初始化就是把一切程序设为默认状态，把没准备的准备好。

mui框架将很多功能配置都集中在mui.init方法中，要使用某项功能，只需要在mui.init方法中完成对应参数配置即可，目前支持在mui.init方法中配置的功能包括：创建子页面、关闭页面、手势事件配置、预加载、下拉刷新、上拉加载。

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按键监听
    }
});

参考东翌编程