在App开发中,经常会遇到页面间传值的需求,比如从新闻列表页进入详情页,需要将新闻id传递过去; Html5Plus规范设计了evalJS方法来解决该问题; 但evalJS方法仅接收字符串参数,涉及多个参数时,需要开发人员手动拼字符串; 为简化开发,mui框架在evalJS方法的基础上,封装了自定义事件,通过自定义事件,用户可以轻松实现多webview间数据传递。因为是多webview之间传值,故无法在手机浏览器、微信中使用;
添加自定义事件监听操作和标准js事件监听类似,可直接通过window对象添加,如下:
window.addEventListener(‘customEvent’,function(event){
//通过event.detail可获得传递过来的参数内容
…
});
通过mui.fire()方法可触发目标窗口的自定义事件:
mui.fire(detailPage,‘newsId’,{})
//初始化预加载详情页面
mui.init({
preloadPages:[{
id:‘detail.html’,
url:‘detail.html’
}
]
});
用了这个后可以这样打开页面
mui.openWindow({
id:‘detail.html’
});
var detailPage = null;
//添加列表项的点击事件
mui('.mui-content').on('tap', '.mui-slider', 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: 'detail2.html'
});
});
详情页面代码如下:
//添加newId自定义事件监听
window.addEventListener('newsId',function(event){
//获得事件参数
var id = event.detail.id;
});