MUI框架学习之[关闭页面][预加载][事件绑定]

关闭页面

mui框架将窗口关闭功能封装在mui.back方法中，具体执行逻辑是：

• 若当前webview为预加载页面，则hide当前webview；
• 否则，close当前webview；

在mui框架中，有三种操作会触发页面关闭（执行mui.back方法）：

• 点击包含.mui-action-back类的控件
• 在屏幕内，向右快速滑动
• Android手机按下back按键

iOS平台原生支持从屏幕边缘右滑关闭
iOS平台可通过popGesture参数实现从屏幕边缘右滑关闭webview，参考5+规范，若想禁用该功能，可通过setStyle方法设置popGesture为none。

hbuilder中敲mheader生成的代码块，会自动生成带有返回导航箭头的标题栏，点击返回箭头可关闭当前页面，原因就是因为该返回箭头包含.mui-action-back类，代码如下：

<header class="mui-bar mui-bar-nav">    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>    <h1 class="mui-title">标题</h1></header>

若希望在顶部导航栏之外的其它区域添加关闭页面的控件，只需要在对应控件上添加.mui-action-back类即可，如下为一个关闭按钮示例：

<button type="button" class='mui-btn mui-btn-danger mui-action-back'>关闭</button>

mui框架封装的页面右滑关闭功能，默认未启用，若要使用右滑关闭功能，需要在mui.init();方法中设置swipeBack参数，如下：

mui.init({    swipeBack:true //启用右滑关闭功能});

mui框架默认会监听Android手机的back按键，然后执行页面关闭逻辑； 若不希望mui自动处理back按键，可通过如下方式关闭mui的back按键监听；

mui.init({    keyEventBind: {        backbutton: false  //关闭back按键监听    }});

除了如上三种操作外，也可以直接调用mui.back()方法，执行窗口关闭逻辑；

mui.back()仅处理窗口逻辑，若希望在窗口关闭之前再处理一些其它业务逻辑，则可将业务逻辑抽象成一个具体函数，然后注册为mui.init方法的beforeback参数;beforeback的执行逻辑为：

• 执行beforeback参数对应的函数若返回false，则不再执行mui.back()方法；
• 否则（返回true或无返回值），继续执行mui.back()方法；

示例：从列表打开详情页面，从详情页面再返回后希望刷新列表界面，此时可注册beforeback参数，然后通过自定义事件通知列表页面刷新数据，示例代码如下：

mui.init({    beforeback: function(){        //获得列表界面的webview        var list = plus.webview.getWebviewById('list');        //触发列表界面的自定义事件（refresh）,从而进行数据刷新        mui.fire(list,'refresh');        //返回true，继续页面关闭逻辑        return true;    }});

注意：beforeback的执行返回必须是同步的（阻塞模式），若使用nativeUI这种异步js（非阻塞模式），则可能会出现意想不到的结果；比如：通过plus.nativeUI.confirm()弹出确认框，可能用户尚未选择，页面已经返回了（beforeback同步执行完毕，无返回值，继续执行mui.back()方法，nativeUI不会阻塞js进程）：在这种情况下，若要自定义业务逻辑，就需要复写mui.back方法了；如下为一个自定义示例，每次都需要用户确认后，才会关闭当前页面:

//备份mui.back，mui.back已将窗口关闭逻辑封装的比较完善（预加载及父子窗口），因此最好复用mui.backvar old_back = mui.back;mui.back = function(){  var btn = ["确定","取消"];  mui.confirm('确认关闭当前窗口？','Hello MUI',btn,function(e){    if(e.index==0){        //执行mui封装好的窗口关闭逻辑；        old_back();    }  });}

为何设置了swipeBack: false，在iOS上依然可以右滑关闭？
iOS平台原生支持从屏幕边缘右滑关闭，这个是通过popGesture参数控制的，参考5+规范，若需禁用，可通过setStyle方法设置popGesture为none。

能否通过addEventListener增加back按键监听实现自定义关闭逻辑？
addEventListener只会增加新的执行逻辑，老的监听逻辑(mui.back)依然会执行，因此，若需实现自定义关闭逻辑，一定要重写mui.back。

预加载

所谓的预加载技术就是在用户尚未触发页面跳转时，提前创建目标页面，这样当用户跳转时，就可以立即进行页面切换，节省创建新页面的时间，提升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()方法；

如上两种方案，各有优劣，需根据具体业务场景灵活选择.

判断预加载是否成功

方式一、通过直观现象分析
预加载页面会立即打开，不会显示等待框；非预加载页面默认会先显示等待框，再显示新页面；

方式二、增加log分析预加载页面是否已创建
比如：A页面中预加载B页面，则在A页面完全加载（可通过setTimeout模拟）后，打印当前应用所有webview，看是否包含B页面的url，以此来分析。

例如：在A页面增加如下代码：

mui.plusReady(function(){    setTimeout(function(){        var array = plus.webview.all();        if(array){            for(var i=0,len=array.length;i<len;i++){                    console.log(array[i].getURL());                }        }    },5000)});

事件绑定

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

.on( event , selector , handler ) event
Type: String
需监听的事件名称，例如：’tap’ selector
Type: String
选择器 handler
Type: Function( Event event )
事件触发时的回调函数，通过回调中的event参数可以获得事件详情

示例

点击新闻列表，获取当前列表项的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'  });}) 

笔记内容

HBuilder使用MUI页面传值

1.HBuilder使用MUI页面传值方法一 (字符串拼接)
关于Hbuilder跳转页面，使用了内部的封装方法mui，跳转的时候使用

mui.openWindow({    url: 'xxx.html'//指定的页面即可});

但是在传值的时候捏，这里不应该因为mui的方法干扰，直接还在网址后面拼接，当然这是get方式传值，在使用HBuilder开发时是可行的，如下

mui.openWindow({    url: xxx.html?date='+str',});

这样就达到了传值的效果，在接受页面中需要如下操作

var thisURL = document.URL; //获取页面传递的数据var getval =thisURL.split('?')[1]; //获取问号之后的值var showval= getval.split("=")[1]; //获取等于号之后的值

这里的showval就是前面页面传递的str值了.

2.HBuilder使用MUI页面传值方法二(自定义事件)

从重置密码页面重置完密码之后, 跳转到登陆页面, 把账号信息携带到登陆页面:

忘记密码页面:

mui.plusReady(function() {    //1.预加载登陆页面    mui.init({        preloadPages: [{            url: "login.html",            id: "login"        }]    });    //2.获得登陆页面    var login = null;    if(!login) {        login = plus.webview.getWebviewById('login');    }    //点击事件    mui('body').on('tap', '#resetPwd', function() {        //3.触发登陆页面的show事件        mui.fire(login, 'show', {            mobileNum: accountInput.value,        });        //4.打开登陆页面        mui.openWindow({            url: "login.html",            id: "login",        });    });}

login页面:

//添加show自定义事件监听window.addEventListener('show', function(event) {    //获得事件参数    var mobileNum = event.detail.mobileNum;    //console.log("传过来的号码为:============" + mobileNum);    accountBox.value = mobileNum;});

3.HBuilder使用MUI页面传值方法三(用extras)

传值页面:

mui.openWindow({    url: 'third.html',    id: 'third',    extras: {        content: message.value,    }});

接收页面:

mui.plusReady(function() {    var v = plus.webview.currentWebview();    var c = v.content;    console.log(c);});

mui点击返回按钮监听事件 (刷新返回后的页面)

A页面跳转到B页面，再从B页面返回到A页面的话刷新A页面

1.reload()方法

B页面中的代码

mui.plusReady(function() {    var old_back = mui.back;    mui.back = function() {        var opener = plus.webview.currentWebview().opener();        opener.reload()        old_back();    }});

2.mui.back() 方法

B页面中的代码

mui.plusReady(function() {    var old_back = mui.back;    mui.back = function() {        var opener = plus.webview.currentWebview().opener();        mui.fire(plus.webview.getWebviewById(opener.id), 'refresh', null);        old_back();    }});

A页面中的代码:

mui.plusReady(function() {    window.addEventListener('refresh', function(msg) {        //自定义方法，刷新数据，不刷新页面        mui.toast("B页面返回并刷新了数据");    });});