MUI作为移动端的老牌的前端框架,自定义为:“最接近原生APP体验的高性能前端框架”,自然有过人之处。
下面是简单总结了MUI中的窗口管理、事件管理、utils,都是基础。
show time
一、窗口管理
1.1 页面初始化
mui.plusReady()
为页面初始化,例如:
mui.plusReady(function(){
console.log(111);
});
mui.init()
是mui插件初始化,具体详情和案例见到3.1节
mui.ready()
是当DOM准备就绪时,指定一个函数来执行。写法与mui.plusReady()
类似
官方文档:dev.dcloud.net.cn/mui/window/…
1.2 创建子页面
tab选项卡和底部tabbar就是典型的创建子页面的例子,如图
list.html
就是index.html
的子页面,创建代码比较简单,如下:
mui.init({
subpages:[{
url:'list.html',//子页面HTML地址,支持本地地址和网络地址
id:'list.html',//子页面标志
styles:{
top:'45px',//mui标题栏默认高度为45px;
bottom:'0px'//默认为0px,可不定义;
}
}]
});
官方文档:https://dev.dcloud.net.cn/mui/window/#pageinit
1.3 打开新页面
总会有点击一个页面跳转到另一个页面的情况。使用mui.openWindow()
mui.openWindow({
url:new-page-url,
id:new-page-id,
styles:{
top:"50px",//新页面顶部位置
bottom:'0px',//新页面底部位置
width:"100%",//新页面宽度,默认为100%
height:"100%",//新页面高度,默认为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,//等待框背景区域高度,默认根据内容自动计算合适高度
......
}
}
})
官方文档:https://dev.dcloud.net.cn/mui/window/#openwindow
1.4 打开带原生导航栏的新页面
通过在 mui.openWindow()
的 styles
节点中设置 titleNView
节点的相关参数,可实现绘制原生导航栏控件
mui.openWindow({
url: webviewUrl,
id: webviewId,
styles: { // 窗口参数 参考5+规范中的WebviewStyle,也就是说WebviewStyle下的参数都可以在此设置
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"
}
}
}
});
官方文档:https://dev.dcloud.net.cn/mui/window/#openWindowWithTitle
1.5 关闭页面
mui框架将窗口关闭功能封装在mui.back
方法中,具体执行逻辑是:
(1)若当前webview
为预加载页面,则hide
当前webview
;
(2)否则,close
当前webview
;
在mui框架中,有三种操作会触发页面关闭(执行mui.back
方法):
(1)点击包含.mui-action-back
类的控件
<button type="button" class='mui-btn mui-btn-danger mui-action-back'>关闭</button>
(2)在屏幕内,向右快速滑动
mui.init({
swipeBack:true //启用右滑关闭功能
});
(3)Android
手机按下back
按键
mui.init({
keyEventBind: {
backbutton: false //关闭back按键监听
}
});
除了以上的方法,还可以直接调用mui.back()
方法
//备份mui.back,mui.back已将窗口关闭逻辑封装的比较完善(预加载及父子窗口),因此最好复用mui.back
var old_back = mui.back;
mui.back = function(){
var btn = ["确定","取消"];
mui.confirm('确认关闭当前窗口?','Hello MUI',btn,function(e){
if(e.index==0){
//执行mui封装好的窗口关闭逻辑;
old_back();
}
});
}
官方文档:https://dev.dcloud.net.cn/mui/window/#closewindow
1.6 预加载
预加载就是在用户尚未触发页面跳转时,提前创建目标页面,这样当用户跳转时,就可以立即进行页面切换,节省创建新页面的时间,提升app使用体验。mui提供两种方式实现页面预加载。
方式一:通过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()
方法
官方文档:https://dev.dcloud.net.cn/mui/window/#preload
二、事件管理
2.1 事件绑定
除了可以使用addEventListener()
方法监听某个特定元素上的事件外, 也可以使用.on()
方法实现批量元素的事件绑定。
mui(".mui-table-view").on('tap','.mui-table-view-cell',function(){
//获取id
var id = this.getAttribute("id");
//传值给详情页面,通知加载新数据
mui.fire(detail,'getDetail',{id:id});
//打开新闻详情
mui.openWindow({
id:'detail',
url:'detail.html'
});
})
官方文档:https://dev.dcloud.net.cn/mui/event/#on
2.2 事件取消
使用on()
方法绑定事件后,若希望取消绑定,则可以使用off()
方法。 off()
方法根据传入参数的不同,有不同的实现逻辑。
2.3 事件触发
使用mui.trigger()
方法可以动态触发特定DOM元素上的事件。
var btn = document.getElementById("submit");
//监听点击事件
btn.addEventListener("tap",function () {
console.log("tap event trigger");
});
//触发submit按钮的点击事件
mui.trigger(btn,'tap');
官方文档:https://dev.dcloud.net.cn/mui/event/#trigger
2.4 手势事件
在开发移动端的应用时,会用到很多的手势操作,比如滑动、长按等
手势事件的配置
通过`mui.init`方法中的`gestureConfig`参数mui.init({
gestureConfig:{
tap: true, //默认为true
doubletap: true, //默认为false
longtap: true, //默认为false
swipe: true, //默认为true
drag: true, //默认为true
hold:false,//默认为false,不监听
release:false//默认为false,不监听
}
});
事件监听
var elem = docment.getElementById("dome");
elem.addEventListener("swipeleft",function(){
console.log("你正在向左滑动");
});
官方文档:https://dev.dcloud.net.cn/mui/event/#gesture
2.5 自定义事件
因为是多webview
之间传值,故无法在手机浏览器、微信中使用;
监听自定义事件
//通过window添加
window.addEventListener('customEvent',function(event){
//通过event.detail可获得传递过来的参数内容
....
});
通过mui.fire()
触发目标窗口的自定义事件
官方文档:https://dev.dcloud.net.cn/mui/event/#customevent
三、utils
3.1 init()
mui框架将很多功能配置都集中在mui.init
方法中,要使用某项功能,只需要在mui.init
方法中完成对应参数配置即可
mui.init({
//子页面
subpages: [{
//...
}],
//预加载
preloadPages:[
//...
],
//下拉刷新、上拉加载
pullRefresh : {
//...
},
//手势配置
gestureConfig:{
//...
},
//侧滑关闭
swipeBack:true, //Boolean(默认false)启用右滑关闭功能
//监听Android手机的back、menu按键
keyEventBind: {
backbutton: false, //Boolean(默认true)关闭back按键监听
menubutton: false //Boolean(默认true)关闭menu按键监听
},
//处理窗口关闭前的业务
beforeback: function() {
//... //窗口关闭前处理其他业务详情点击 ↑ "关闭页面"链接查看
},
//设置状态栏颜色
statusBarBackground: '#9defbcg', //设置状态栏颜色,仅iOS可用
preloadLimit:5//预加载窗口数量限制(一旦超出,先进先出)默认不限制
})
官方文档:https://dev.dcloud.net.cn/mui/util/#init
3.2 mui()
mui使用css选择器获取HTML元素,返回mui对象数组。写法mui("#app")
类似于jQuery写法$("#app")
若要将mui对象转化成dom对象,可使用如下方法(类似jquery对象转成dom对象):
//obj1是mui对象
var obj1 = mui("#title");
//obj2是dom对象
var obj2 = obj1[0];
官方文档:https://dev.dcloud.net.cn/mui/util/#selector
3.3 each()
each既是一个类方法,同时也是一个对象方法,两个方法适用场景不同;换言之,你可以使用mui.each()去遍历数组或json对象,也可以使用mui(selector).each()去遍历DOM结构。
示例:var array = [1,2,3]
mui.each(array,function(index,item){
console.log(item*item);
})
官方文档:https://dev.dcloud.net.cn/mui/util/#each
3.4 extend()
将两个对象和合并成一个对象
var target = {
company:"dcloud",
product:{
mui:"小巧、高效"
}
}
var obj1 = {
city:"beijing",
product:{
HBuilder:"飞一样的编码"
}
}
mui.extend(target,obj1);
//输出:{"company":"dcloud","product":{"HBuilder":"飞一样的编码"},"city":"beijing"}
console.log(JSON.stringify(target));
从如上输出可以看到,product节点下的mui被替换成了HBuilder,因为默认仅合并对象根节点下的key、value;如果想深度合并,则可以传入deep参数,如下:
var target = {
company:"dcloud",
product:{
mui:"小巧、高效"
}
}
var obj1 = {
city:"beijing",
product:{
HBuilder:"飞一样的编码"
}
}
//支持深度合并
mui.extend(true,target,obj1);
//输出:{"company":"dcloud","product":{"mui":"小巧、高效","HBuilder":"飞一样的编码"},"city":"beijing"}
console.log(JSON.stringify(target));
官方文档:https://dev.dcloud.net.cn/mui/util/#extend
3.5 later()
setTimeOut封装
3.6 scrollTo()
滚动窗口屏幕到指定位置,该方法是对window.scrollTo()
方法在手机端的增强实现,可设定滚动动画时间及滚动结束后的回调函数;鉴于手机屏幕大小,该方法仅可实现屏幕纵向滚动。
mui.scrollTo(0,1000);
3.7 os
通过navigator.userAgent
判断当前运行环境的需求,mui对此进行了封装,通过调用mui.os.XXX
即可
if(mui.os.ios||(mui.os.android&&parseFloat(mui.os.version)<4.4)){
//...
}