MUI移动框架介绍与使用

MUI移动框架是DCloud 官方发布的一个移动UI框架，搭配原生5+来开发APP, 但我们不一定要使用它，也可以使用其他UI框架, 但它目前是最好的选择， 

如何获得MUI框架资源

打开-》开发工具HBuilder-》 新建移动APP-》选项mui项目 

在这里说明下，mui 不是JQuery, 不具有操作DOM 的方法，有些朋友还这样取值, mui("#id").val(); 这是错误，大家要知道这点，别闹笑话

当我们使用MUI框架时，每个页面引用它的JS 文件和CSS文件进来页面里，然后必须 mui.init(); 初始化mui 组件，才能调用。

<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf-8">
      	mui.init();
</script>

首先从 mui.init();  这个方法讲起， 这个方法里面都有哪些参数呢？ 目前它包含9个参数，我们根据实际情况来配置使用它

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//预加载窗口数量限制(一旦超出,先进先出)默认不限制
})

 第一个参数：subpages ,增加子页面, 例如： 它类似在html页面里增加多一个iframe 框架

如果配置了subpages，它必填的参数有：url , id 

mui.init({
    subpages:[{
      url:'home.html',//子页面HTML地址，支持本地地址和网络地址
      id:'home',//子页面标志
      styles:{
        top:'0px',//子页面顶部位置
        bottom:'10px',//子页面底部位置
        width:'100%',//子页面宽度，默认为100%
        height:'100%',//子页面高度，默认为100%
      },
      extras:{}//额外扩展参数，给子页面传值
    }]
  });

第二个参数：preloadPages ，预加载页面，指的是，当你需要某些页面，先它加载出来，但不显示它，这时就可以使用预加载页面了，还可以配置styles 跟subpages配置一样，这里只列出url和id

mui.init({ 

preloadPages:[
{ url:"class.html", id:"class.html" },
{ url:"article.html", id:"article.html" },
{ url:"searchContent.html", id:"searchContent.html" }

] });

 第三个参数：pullRefresh ，上拉加载和下拉刷新, 这个是调用原生的下拉方法,  实际使用，可参与MUI上拉下拉例子 

mui.init({
  pullRefresh : {
    container:"#refreshContainer",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
    down : {
      style:'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
      color:'#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
      height:'50px',//可选,默认50px.下拉刷新控件的高度,
      range:'100px', //可选 默认100px,控件可下拉拖拽的范围
      offset:'0px', //可选 默认0px,下拉刷新控件的起始位置
      auto: true,//可选,默认false.首次加载自动上拉刷新一次
      callback :pullfresh-function //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
    },
    up:
    {
    auto: true //可选,默认false.首次加载自动上拉加载一次
    }
  }
});

第四个参数：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，不监听 ,释放 

}

假如我需要长按事件，怎么写，长按列表，弹出菜单，我们配置longtap:ture 之后

mui("body").on("longtap","li",function()
  {
      		//当长按li时，触发此方法      		
  });

  剩下5个参数比较简单，参考上面全部 inti 参数，这里不写了。

MUI框架 mui.js 插件包含那些方法？  

1. JS组件

mui.plusReady() ;   //判断HTML5+环境是否加载完成

mui.ready(); //判断html页面dom 是否加载完成

2. 事件

mui.on(事件绑定)  - //绑定事件，例如：tap-点击事件

mui.off(事件取消)   //取消绑定事件

mui.trigger()(事件触发)  //切换

mui.fire()(自定义事件) // 给页面传值

3.弹出窗

mui.alert()(弹出框)

mui.confirm()(确认弹出框)

mui.prompt()(输入弹出框)

mui.toast()(自动消失提示框)

mui.closePopup()(关闭最外层对话框)

mui.closePopups()(关闭全部对话框)

4.工具类

mui() (对象选择器)

mui.each()(数组,对象遍历)

mui().each()(DOM遍历)

mui.extends(对象合并)

mui.later() (setTimeOut封装)

mui.scrollTo() (滚动到指定位置)

mui.os()(判断当前运行环境) 

5.Ajax 

mui.ajax()

mui.post()

mui.get()

mui.getJSON()

6.webview 窗体

mui.open(打开新页面)

mui.currentWebview (当前页面)

mui.back()(关闭窗口)

mui.backFunction()(重写返回逻辑)

mui.backDouble()(双击退出应用)

mui.backTast(双击进入后台)

mui.preload()(预加载) 

7. mui.openWindow（）打开页面

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,//等待框背景区域高度，默认根据内容自动计算合适高度
        ......
      }
    }
})

更多资讯浏览官方：MUI移动框架