1、mui插件初始化

使用mui.init();进行mui插件初始化。

2、页面初始化

在app开发中，如果使用HTML5+扩展API，必须等plusReady事件发生后才能正常使用，mui将该事件封装成了mui.plusReady()方法，涉及到HTML5+的api，建议都写在mui.plusReady()方法中。

 mui.plusReady(function () {
            console.log("当前页面url："+plus.webview.currentWebview().getURL());
        })

plusReady判断H5+的插件是否加载完毕

3. 创建子页面(专为解决android手机不流畅问题的)

1. 解决思路:将需要滚动的区域通过单独的webview实现，完全使用原生滚动。具体做法是：将目标页面分解为主页面和内容页面，主页面显示卡头卡尾区域，比如顶部导航、底部选项卡等。内容页面显示具体需要滚动的内容，然后在主页面中调用mui.init()方法初始化内容页面。

mui.init({
        subpages:[{
            url:"html/subList.html",   //子页面的html地址
            id: "subList.html",            //子页面标志
            styles:{                                
                top:"40px",              //子页面顶部位置
                bottom:"0px",      //子页面底部位置
               width:subpage-width,  //子页面宽度 默认100%
               height:subpage-height, //子页面高度 默认100%
                    }
                }]
            });

4.打开新页面

1.做app的时候，需要转场到不同的页面，如果通过有刷新的方式打开，用户需要面对空白的页面等待；无刷新方式，通过js移入DOM节点，会碰到很高性能的挑战，DOM节点繁多，页面太大，转场动画不流畅甚至浏览器崩溃。
2.mui解决思路：单webview只承载单个页面的dom，减少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,//等待框背景区域高度，默认根据内容自动计算合适高度
        ......
      }
    }
})  

页面传值,extras{},里面可以放键值对。

    extras:{
            name:'赵三',
            age:28,
        }

目标页面接收值:

        mui.plusReady(function() {
            var data = plus.webview.currentWebview(); //拿到此对象
            mui.toast(data.name)
            console.log(data.age);
            var nameobj = mui('#name');  //mui选择器，选中一个name
            nameobj[0].innerHTML = data.name;
            var ageObj = mui('#age');   //mui选择器，选中一个age #id .class
            ageObj[0].innerHTML = data.age;
        })

5.预加载

就是在用户还没有触发页面跳转的时候，提前创建目标页面，这样用户跳转的时候，可以立刻进行页面切换，体验效果好。

方式一：通过mui.init方法中的preloadPages参数进行配置.

mui.init({
  preloadPages:[
    {
      url:prelaod-page-url,
      id:preload-page-id,
      styles:{},//窗口参数
      extras:{},//自定义扩展参数
      subpages:[{},{}]//预加载页面的子页面
    }
  ],
  preloadLimit:5//预加载窗口数量限制(一旦超出,先进先出)默认不限制
});

1.特点:不会返回预加载每个页面的引用，若要获得对应webview引用，还需要通过plus.webview.getWebviewById方式获得

mui.init({
  preloadPages:[
    {
      url:'list.html',
      id:'list'
    }
  ]
});
var list = plus.webview.getWebviewByid('list');//这里可能返回空；

方式二：通过mui.preload方法预加载.

1.特点:通过mui.preload()方法预加载，可立即返回对应webview的引用，但一次仅能预加载一个页面；若需加载多个webview，则需多次调用mui.preload()方法；

var page = mui.preload({
    url:new-page-url,
    id:new-page-id,//默认使用当前页面的url作为id
    styles:{},//窗口参数
    extras:{}//自定义扩展参数
});

MUI-事件管理

1.事件绑定
除了可以使用addEventListener()方法监听某个特定元素上的事件外， 也可以使用.on()方法实现批量元素的事件绑定。

document.getElementById("bt").addEventListener('tap', function() {
    alert(1)
}

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'
  });
}) 

注意:这里一定要在mui.init()方法中配置gestureConfig参数来支持手势

点击
tap 单击屏幕
doubletap 双击屏幕

长按
longtap 长按屏幕
hold 按住屏幕
release 离开屏幕

滑动
swipeleft 向左滑动
swiperight 向右滑动
swipeup 向上滑动
swipedown 向下滑动

拖动
dragstart 开始拖动
drag 拖动中
dragend 拖动结束

1.批量事件绑定 .on("事件","子选择器",function事件);

//非真机无效
            mui.plusReady(function() {
                //这里一定要在mui.init()方法中配置gestureConfig参数来支持手势
                mui('.mui-table-view').on('tap','.mui-table-view-cell',function () {
                    //获取点击的id,this代表当前的点击对象
                    var id = this.getAttribute('id');
                    mui.toast('ok'+id);
                })
            })

2.事件取消

1.使用on()方法绑定后，可以使用off()方法取消

document.getElementById('bt2').addEventListener('tap', function() {
                    console.log('准备事件取消');
                    //注意，这里不支持匿名函数
                    mui('.mui-table-view').off('tap', '.mui-table-view-cell');
                })