在App开发中,经常会遇到页面间传值的需求,比如从新闻列表页进入详情页,需要将新闻id传递过去,mui框架在evalJS(html5+)方法的基础上,封装了自定义事件,通过自定义事件,用户可以轻松实现多webview间数据传递。
window.addEventListener('customEvent',function(event){
//通过event.detail可获得传递过来的参数内容(说明这一段代码是在目标页面中写的),
//evet.detail是一个对象;
....
});
现在已经定义好了一个自定义事件,那么该如何触发呢,在哪里触发呢,由于该自定义事件要“获取传递过来的参数”,所以自然而然地,在事件触发的时候要能够携带这些参数来传递给目标页面,因为这些参数是存在于上一级页面中的,所以要在上一级页面中进行触发。
那么问题来了,如何触发呢?mui给出的方法是:
mui.fire( target , event , data )
在这里:target Type: WebviewObject 表示需传值的目标webview;event Type: String 自定义事件名称;data Type: JSON json格式的数据;
举一个具体的例子:
假设如下场景:从新闻列表页面进入新闻详情页面,新闻详情页面为共用页面,通过传递新闻ID通知详情页面需要显示具体哪个新闻,详情页面再动态向服务器请求数据,mui要实现类似需求可通过如下步骤实现:
1.在列表页面中预加载详情页面(假设为detail.html)
2.列表页面在点击新闻标题时,首先,获得该新闻id,触发详情页面的newsId事件,并将新闻id作为事件参数传递过去;然后再打开详情页面;
3.详情页面监听newsId自定义事件。
具体的代码如下:
//初始化预加载详情页面,也就是mui官网中所要注意的---要等到webview的loaded之后才要触发自定义事件
mui.init({
preloadPages:[{
id:'detail.html',
url:'detail.html'
}
]
});
var detailPage = null;
//添加列表项的点击事件
mui('.mui-content').on('tap', 'a', function(e) {
var id = this.getAttribute('id');
//获得详情页面
if(!detailPage){
detailPage = plus.webview.getWebviewById('detail.html');
}
//触发详情页面的newsId事件
mui.fire(detailPage,'newsId',{
id:id
});
//打开详情页面
mui.openWindow({
id:'detail.html'
});
});
在目标界面,就是detail.html界面中。
//添加newId自定义事件监听
window.addEventListener('newsId',function(event){
//获得事件参数
var id = event.detail.id;
//根据id向服务器请求新闻详情
.....
});