mui混合开发（四）

简述：mui预加载完美解决混合应用弱网白屏问题，给用户更好的体验，一旦使用了预加载创建子页面传递参数就会失效，解决办法是使用自定义事件。

一：创建预加载页面

var webView_detail = null;

mui.plusReady(function() {

console.log("H5+准备完毕");

//预加载

webView_detail = mui.preload({

url: 'news_info.html',

id: 'news_info',

styles: {

"render": "always", //一直渲染

"popGesture": "hide",

"bounce": "vertical",

// "bounceBackground": "#efeff4",

// "titleNView": {} //使用原生渐变导航

}

});

二：点击按钮显示预加载页面

//绑定点击事件 #news_btns 是一个有许多 .news_btn标签的元素, 具体用法可以参照

mui('#news_btns').on('tap', '.news_btn', function() {

console.log("打开预加载页面");

//自定义事件传值

mui.fire(webView_detail,'get_detail',{

name:'张肖',

});

setTimeout(function(){

webView_detail.show("slide-in-right", 300);

},150);

});

三：预加载页面接收自定义事件闯过来的参数

mui.plusReady(function() {

//监听自定义事件

document.addEventListener('get_detail',function(event) {

var detail = event.detail.name;

alert("name========"+detail);

});

})

四：监听返回按钮

//监听back按钮

mui.back = function(){

//重写back方法 pop操作不会自动执行

plus.webview.currentWebview().hide("auto", 300);

};

自定义事件

/*

webView_detail：子页面的webView

get_detail：子页面注册的方法名

*/

mui.fire(webView_detail,'get_detail',{

name:'张肖',

});

/*

子页面监听自定义事件

event.detail：获取mui内部封装的值对象

event.detail.name：获取传过来的值自己定义

*/

document.addEventListener('get_detail',function(event) {

var detail = event.detail.name;

alert("name========"+detail);

});