MUI——窗口管理简明教程

 

一、页面初始化

在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:{}//自定义扩展参数 });

本文为博主原创文章,知识共享,开源精神,转载注明出处。