HBuilder mui 入门教程——(3)页面传值

页面传值是所有web框架都涉及的问题,在web项目中,页面传值可以通过url参数,session,post等方式,但mui项目是运行在客户端的app,上面的方法自然不可行。

在mui项目开发中,页面传值主要有两种方法:一种是初始化传值,一种是自定义事件。

初始化传值又可分为两种情况,预加载时传值和打开时传值。为避免切页白屏,一般可以将页面先在调用的页面加载,显示的时候直接调用show就可以。但对于这样的预加载页面,只能在预加载的时候传值,页面加载后,调用openWindow只会将加载过得页面显示出来,并不会直接创建,所以在openWindow中传递的参数没什么用。所以初始化传值方式不太常用。

个人推荐第二种方式:自定义事件。

1 初始化传值

初始化传值主要有以下几种方法:

  1. 通过mui.init()向预加载页面传值
  2. 通过mui.preload()向预加载页面传递参数
  3. 通过mui.openWindow()向页面传递参数

openWindow 函数有三个参数,分别是【页面相对地址,页面ID,初始化参数】。每个页面都有一个唯一对应的ID,默认和页面URL相同,openWindow执行时,先判断对应的ID是否已经预加载了(不管是否是在本页面中预加载),如果已经预加载,这时候会直接显示,并不会创建新的webview,也不会进行初始化操作,这时候传递的参数是无效的。如果页面没有预加载,这时候会创建页面,并用给定的参数初始化。以后每次调用openWindow 都会重新创建。

4.通过mui.init()向子页面传递参数

关于详细怎样使用,请参考我的另一篇文章:http://blog.csdn.net/anjingshen/article/details/73744153

2 自定义事件传值

mui框架中,自定义事件是页面传值的重中之重,一些高级操作一般都是通过自定义事件完成的。

考虑下面几种需求:

1.列表详情页中,为提升体验,详情页一般预加载。如果每次点击列表中某一项,希望更新详情页怎么办?

2.列表详情页中,详情页阅读完返回的时候,希望吧列表中对应项改变样式怎么办?

3.用户登录后,希望把一些涉及到用户页面全部重新加载怎么办?

4.商城APP中,订单列表页已经预加载了,用户下单后,如果希望在不适用定时刷新的情况下,自动更新订单列表页怎么办?

上面几种需求是大部分APP中涉及到的需求,通过初始化传值方式无法完成,必须通过自定义事件方式更新。

mui中自定义事件的事件很简单,下面假设有list.html和details.html,希望在list.html点击列表中的一项时,显示并更新details.html:

//list.html
mui.plusReady(function(){
    //预加载details
    var detailPage = mui.preload({
        url:'details.html',
        id:'details'
    });


    //点击list中某一项时触发details页面的"update"事件
    mui('ul').on('tap','li',function(evt){
        mui.fire(detailPage,'update',{//触发事件
            id:this.getAttribute('data-guid'),
            title:this.getAttribute('data-title')
        });
        detailPage.show('slide-in-right',300);//显示详情页
    });
});

然后下面是在details.html中监听事件并更新

    //在details页面接收id参数
    document.addEventListener('update',function(event){
        //获得事件参数
        var data=event.detail;
        var id = data.id;
        mui('#title')[0].innerText=data.title;
        //根据id向服务器请求新闻详情
        .....
    });

在上面的例子中,点击列表中的某项时,会触发details页面的update事件,并传递id和标题。在details页面中监听update事件,触发时获取id的标题,先更新标题,然后可以通过ajax请求新闻详情。

这是第一个问题的解决方案。

第二个是details返回后更新list,大家可以自己试下。

第三个是用户登录后所有设计页面重新加载。这里可以考虑为这些页面定义统一的事件,如"reload"事件,然后在用户登录成功的地方,依次触发这些页面的reload事件。

第四个也很好解决了,大家可以考虑下。

需要注意的是,在mui中的自定义事件,可以由包括自己在内的任意页面触发,但只能由自己这个页面监听(系统事件如”loaded”其他页面可以监听)。

也就是说,下面这种需求实现不了:让涉及用户的多个页面监听登录页面的自定义事件,然后当登录页面的登录成功自己触发自定义事件触发后,其他多个页面都重新加载用户信息。

只能在登录成功的时候依次触发需要更新的页面的自定义事件。

猜你喜欢

转载自blog.csdn.net/anjingshen/article/details/74149091