测试页面--首页：index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="css/mui.min.css">
<link rel="stylesheet" type="text/css" href="css/app.css"/>
<script src="js/mui.min.js"></script>
<script>
mui.init();
mui.plusReady(function () {
//在APP首页预加载多个待用的页面
var testPage=mui.preload({url:'test.html',id:'test.html'});
//var pagen=mui.preload({url:'pagen.html',id:'pagen.html'});
// testPage.addEventListener('loaded',function () {
// console.log('000');
// });
mui(document).on('tap','#test',function(){
console.log(testPage.id);//显示待显示页面的id(即便是下面的代码打不开testPage页面时也能显示预加载页面的id)
//有时候在低端智能安卓手机上打不开(经反复测试发现在index.html这个停留一段时间不操作后，有很大的概率打不开)
//一般通过重启APP之后又能通过mui.fire里面的监听方法打开页面了
//testPage页面的refreshPage监听事件直接显示testPage
mui.fire(testPage,'refreshPage',{data:'你好！'});
//假如在打不开testPage页面时,加入如下代码,就能打开
//testPage.show();
});
});
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">测试mui.preload预加载</h1>
</header>
<div class="mui-content">
<button id="test" type="button" style="margin-top: 100px;" class="mui-btn mui-btn-blue mui-btn-block">打开预加载页面</button>
</div>
</body>
</html>测试页面2：--test.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
<script src="js/mui.js"></script>
<script type="text/javascript">
mui.init();
window.addEventListener('refreshPage',function (event) {
var data=event.detail.data;
mui('#t2')[0].style.display='none';
mui('#t1')[0].innerText=data;
plus.webview.currentWebview().show();
});
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">标题</h1>
</header>
<div class="mui-content">
<div id="t1">hello world!</div>
<div id="t2"></div>
</div>
</body>
</html>
