mui框架搭建app不同页面间传值的问题
最近这个礼拜在捣鼓使用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()方式预加载详情页面
推荐阅读