页面传值是所有web框架都涉及的问题,在web项目中,页面传值可以通过url参数,session,post等方式,但mui项目是运行在客户端的app,上面的方法自然不可行。
在mui项目开发中,页面传值主要有两种方法:一种是初始化传值,一种是自定义事件。
初始化传值又可分为两种情况,预加载时传值和打开时传值。为避免切页白屏,一般可以将页面先在调用的页面加载,显示的时候直接调用show就可以。但对于这样的预加载页面,只能在预加载的时候传值,页面加载后,调用openWindow只会将加载过得页面显示出来,并不会直接创建,所以在openWindow中传递的参数没什么用。所以初始化传值方式不太常用。
个人推荐第二种方式:自定义事件。
1 初始化传值
初始化传值主要有以下几种方法:
- 通过mui.init()向预加载页面传值
- 通过mui.preload()向预加载页面传递参数
- 通过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”其他页面可以监听)。
也就是说,下面这种需求实现不了:让涉及用户的多个页面监听登录页面的自定义事件,然后当登录页面的登录成功自己触发自定义事件触发后,其他多个页面都重新加载用户信息。
只能在登录成功的时候依次触发需要更新的页面的自定义事件。