MUI框架（一）：窗口管理、事件管理和utils

时间 2020-07-07

标签 mui 框架窗口管理事件 utils 繁體版

原文原文链接

MUI做为移动端的老牌的前端框架，自定义为：“最接近原生APP体验的高性能前端框架”，天然有过人之处。css

下面是简单总结了MUI中的窗口管理、事件管理、utils，都是基础。
show time

1、窗口管理

1.1 页面初始化

mui.plusReady()为页面初始化，例如：html

mui.plusReady(function(){
    console.log(111);
});
复制代码

mui.init()是mui插件初始化，具体详情和案例见到3.1节
mui.ready()是当DOM准备就绪时，指定一个函数来执行。写法与mui.plusReady()相似前端

官方文档：dev.dcloud.net.cn/mui/window/…jquery

1.2 建立子页面

tab选项卡和底部tabbar就是典型的建立子页面的例子，如图android

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()ios

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 节点的相关参数，可实现绘制原生导航栏控件web

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方法）：json

(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、事件管理

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

3、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)){
   //...
 } 
复制代码