MUI框架(一):窗口管理、事件管理和utils

1,866 阅读8分钟

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()方法实现批量元素的事件绑定。

示例:点击新闻列表,获取当前列表项的id,并将该id传给新闻详情页面,然后打开新闻详情页面

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()方法根据传入参数的不同,有不同的实现逻辑。

示例见官网:dev.dcloud.net.cn/mui/event/#…

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()方法在手机端的增强实现,可设定滚动动画时间及滚动结束后的回调函数;鉴于手机屏幕大小,该方法仅可实现屏幕纵向滚动。

示例:1秒钟之内滚动到页面顶部

mui.scrollTo(0,1000);

3.7 os

通过navigator.userAgent判断当前运行环境的需求,mui对此进行了封装,通过调用mui.os.XXX即可

示例:检测是否为iOS或安卓系统版本是否小于4.4

if(mui.os.ios||(mui.os.android&&parseFloat(mui.os.version)<4.4)){
   //...
 }