最近这个礼拜在捣鼓使用hbuilder+mui来实现移动app,然后有个功能需要用到页面间传值,然后官网是说根据不同的业务场景,有两种方式实现页面间传值,一种是通过在mui.openWindow()方法中使用extras参数来给详情页面传递参数,如下所示:
传值页面代码如下:
mui.openWindow({
id:"xxx.html",
url:"xxx.html",
extras:{
property1:value1,
property2:value2
},
});
目标页面通过如下所示方式获取到传过来的参数:
var self=plus.webview.getCurrentWebview();
var property1=self.property1;
另外一种方式就是通过自定义事件来传递参数了,先在mui.init方法中预加载目标页面,然后通过mui.fire方法来触发自定义事件,再在目标页面监听自定义事件;但是在自己的实践过程中,发现在相应的代码中,一直报目标页面找不到的错误Uncaught Error: webview[newsList.html] does not exist at js/mui.min.js:6
列表代码如下所示:
mui.init({
preloadPages:[
{
id:"newsList.html",
url:"newsList.html"
}
]
});
var detailPage=null;
mui.plusReady(function(){
/*detailPage=mui.preload({
//注,下面的代码能够使得使用自定义事件在两页面传值成功
id:"newsList.html",
url:"newsList.html"
})*/
//添加列表点击事件
mui("#newsList").on("tap","a",function(event){
var id=this.getAttribute("id");
//获得详情页面
if(!detailPage){
detailPage=plus.webview.getWebviewById("newsList.html");
//因为是在mui.init()方法中使用的预加载方式,所以下面代码会显示为null
alert(detailPage);
};
//下面的代码是触发详情页面的newsId事件,其中detailPage为目标页面,
//newsId为在目标页面自定义的事件名称eventName
//第三个参数为封装的需要传递给目标页面的参数对象
mui.fire(detailPage,'newsId',{
id:id
});
//打开详情页面
mui.openWindow({
id:"newsList.html",
/*extras:{ //利用extras方法传递简单的参数至另外一个页面
names:"1234"
}*/
})
})
});
如上述代码所示,通过在mui.init()方法中预加载的方式的话,就会报找不到详情页面,
后面通过查找资料,发现得使用另外一种预加载的方式,即:mui.preload()方法,而且该方法得放到mui.plusReady()里面,具体代码如下所示:
mui.init();
var detailPage=null;
mui.plusReady(function(){
detailPage=mui.preload({
id:"newsList.html",
url:"newsList.html"
})
//添加列表点击事件
mui("#newsList").on("tap","a",function(event){
var id=this.getAttribute("id");
//获得详情页面
if(!detailPage){
detailPage=plus.webview.getWebviewById("newsList.html");
alert(detailPage);
};
mui.fire(detailPage,'newsId',{
id:id
});
//打开详情页面
mui.openWindow({
id:"newsList.html",
//注意:在使用自定义事件传递参数时,当目标页面已经预加载成功后,此时再如下代码所示使用
//使用extras传递参数,那么在目标页面无法获取该参数。
/*extras:{ //利用extras方法传递简单的参数至另外一个页面
names:"1234"
}*/
})
})
});
以上就是使用自定义事件传递参数时的代码示例(使用自定义事件传递参数时,如果是在mui.init()方法中预加载目标页面的话,会导致在给列表项添加点击事件时,目标页面(即所谓的详情页面)会不存在的情况),所以建议在mui.plusReady()方法中使用mui.preload()方式预加载详情页面